Create a CRUD application for task management that includes user authentication and offers a visually appealing user interface. Each task should have attributes like title, description, and status (e.g., pending, completed).
- it is recommended to use latest nodejs stable version
- during the development of this app, i used
node v20.13.1
- use the frozen lockfile to install the exact version
git clone https://github.com/aallali/technical-test-c4
cd technical-test-c4
## install and run api
cd server
yarn ci
yarn start
## install and run ui
cd ../ui
yarn ci
yarn start
- Ui :
React.Js
,TypeScript
,Tailwind
,Zustand
- Server:
Node.Js
,TypeScript
,Express.Js
,Mongoose
- Db:
MongoDb
- Api unit tests
src
├── App.tsx
├── index.css
├── index.tsx
├── modules
│ ├── auth
│ │ ├── assets
│ │ │ └── lock.png
│ │ ├── auth.api.ts
│ │ ├── auth.config.ts
│ │ ├── auth.store.ts
│ │ ├── auth.validator.ts
│ │ └── Index.tsx
│ └── tasks
│ ├── index.tsx
│ ├── task.api.ts
│ └── task.validator.ts
├── react-app-env.d.ts
├── setupTests.ts
└── utils
└── axios.ts
5 directories, 15 files
- command:
yarn test
- : setup skeleton
- : wait until server is done...
- : create login
- : test login component
- : create new task input component
- : update task [title, description, status] functionlity
- : delete task
- : fetch all tasks
- : tasks filter on browser
- : write tests for remaining components
- : add some screenshots to readme
- command:
yarn test:coverage
- User Model:
const UserSchema: Schema = new Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true },
});
- Task Model:
const TaskSchema: Schema = new Schema({
title: { type: String, required: true },
description: { type: String },
status: {
type: String,
enum: ['pending', 'done'],
default: 'pending'
},
userId: { type: Types.ObjectId, ref: 'User', required: true },
}, {
timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' }
});
POST : /api/v1/auth/signin : login
POST : /api/v1/auth/signup : register
GET : /api/v1/auth/whoami : fetch info of current authorized user
POST : /api/v1/task/ : create new task
PATCH : /api/v1/task/ : update task
DELETE : /api/v1/task/{taskId} : delete a task
GET : /api/v1/task/ : fetch all tasks
- please use this collection
├── nodemon.json
├── package.json
├── src
│ ├── controllers
│ │ ├── auth.controller.ts
│ │ └── task.controller.ts
│ ├── database
│ │ ├── config.ts
│ │ └── drivers
│ │ ├── task.driver.ts
│ │ └── user.driver.ts
│ ├── index.ts
│ ├── middleware
│ │ ├── authentication.middelware.ts
│ │ ├── index.ts
│ │ └── validateRequest.middleware.ts
│ ├── models
│ │ ├── task.ts
│ │ └── user.ts
│ ├── routes
│ │ ├── auth.route.ts
│ │ ├── index.ts
│ │ └── task.route.ts
│ ├── types
│ │ └── index.ts
│ └── validators
│ ├── task.validator.ts
│ └── user.validator.ts
├── tests
│ ├── auth.middelware.test.ts
│ ├── auth.signin.controller.test.ts
│ ├── auth.signup.controller.test.ts
│ ├── health.test.ts
│ ├── task.add.controller.test.ts
│ ├── task.delete.controller.test.ts
│ ├── task.read.controller.test.ts
│ └── task.update.controller.test.ts
├── tsconfig.json
└── yarn.lock
- : setup skeleton
- : setup jest for Unite test
- : integrate mongoose
- : setup DB drivers
- : setup jwt auth system (user+pass,
no email
) - : setup auth middleware and test it
- : create units tests for the auth flow
- follow TDD approach
- service: add task
- create unit test
- create the service
- - service: update task
- create unit test
- create the service
- - service: delete task
- create unit test
- create the service
- - service: read tasks
- create unit test
- create the service
- - document the roadmap