Task Management System

"Task Management System" is a simple full-stack web application. Inside this app, the admin has more control than the user. The user will be able to just read their assigned task, update their task status and profile, and delete their account. On the other hand, admin will be able to do everything.

Visit website: https://task-management-system-flax.vercel.app

For Admin login---> Email: [email protected] | Password: 1qasw2!@Q

Features that have been implemented

• Login, Logout, and Registration authentication
• Access token, and Refresh token based authentication
• Role-based authorization
• Account activated through token email verification
• Reset password through token email verification
• Update user profile
• Manage users by admin
• Task management
• Task status management
• Search and filter tasks
• Delete tasks
• Update tasks
• Automatically send reminder emails to users 15 minutes before the deadline for an assigned task
• Automatically move failed task data to the failed task table from the main table in the database

Technology that have been used

React.js, Material UI, Tailwind CSS, Node.js, Express.js, MySQL, Sequelize ORM

Run this web application on your local server

Here is the step-by-step guideline that will help you run this project on your local server.

1. Open your terminal and clone the repository using this command

git clone https://github.com/yousufislam191/Task-Management-System.git

2. After cloning, you will see a folder which name is Task-Management-System. Open this foler using vs code. After opening, you will see there are two folders which will be client and server.

---

3. For running front-end site, open your terminal in your vs code and run this three command

cd client
npm install
npm run dev

4. You will get to show a URL where the front-end site is running, then open this link in your browser.

---

5. Now it's time to run the backend site, and there are some steps for running the backend site, and you have to follow these steps strictly; otherwise, you will face some errors.
6. Open a new terminal in your vs code then run this two command.

cd server
npm install

7. Go to your email to create SMTP App Password or by clicking here, or you can watch this video to understand the better way. After creating the password, you have to save this password in your notepad for later uses because you will never get it after closing the window.

8. After that, create a new file in your root folder of the server folder which name will be .env, or you will be able to see a .env.example file, where you can set the environment variable by removin .example from the .env.example.
9. Inside the .env file, you have to store some of your environment variables. Your environment variables must be exactly the same format. For example, APP_NAME= Task Management System. All environment variables are named below:

Environment Variable Name	Value
SERVER_PORT	Your server port number, you can use any number, like 5100
DB_PORT	Your database port number like 3306
DB_HOST	Your database host name like localhost
DB_USER_NAME	Your database username. By default your local mysql server username will be root
DB_PASS	Your database password
DB_NAME	Your database name
APP_NAME	You can be use any name such as Task Management System
CLIENT_URL	Your client site url which you are already running for front-end
CORS_ORIGIN	Your client site url which you are already running for front-end
USER_ACCOUNT_ACTIVATE_KEY	You can be use any some word like uppercase, lowercase, number
USER_ACCOUNT_JWT_EXPIRE_TIME	You can be use any number like 10m (ten minutes)
USER_LOGIN_KEY	You can be use any some word like uppercase, lowercase, number
USER_ACCESS_TOKEN_EXPIRE_TIME	You can be use any number like 5m (five minutes)
REFRESH_TOKEN_KEY	You can be use any some word like uppercase, lowercase, number
USER_REFRESH_TOKEN_EXPIRE_TIME	You can be use any number but it must be a day like 7d (seven days). And of course its duration must be greater than the USER_ACCESS_TOKEN_EXPIRE_TIME
USER_PASSWORD_RESET_KEY	You can be use any some word like uppercase, lowercase, number
USER_PASSWORD_RESET_JWT_EXPIRE_TIME	You can be use any number like 10m (ten minutes)
SMTP_USERNAME	This will be your email and the email you used to create the SMTP App Password in step 7 will be here
SMTP_PASSWORD	This will be your password which you created in step 7 and saved in notepad

10. Then save changes and run this command.

npm run dev

Ok now enjoy everything ✌️

---

API Endpoints

Here are all the API endpoints for this project. And you can also visit the Postman API documentation for these projects.

User API

• GET /api/user : Get all users with task status activities. [for admin only]
• GET /api/user/:id : Get user by id.
• POST /api/user/register : Create user account.
• POST /api/user/verify-account : Verify user account.
• POST /api/user/forgot-password : Forget user password.
• PUT /api/user/reset-password : Reset user password.
• PUT /api/user/:id : Update user account by id.
• PUT /api/user/update-password/:id : Update user password.
• DELETE /api/user/:id : Delete user by id.

Auth API

• POST /api/auth/login : User login.
• POST /api/auth/logout : User logout.
• GET /api/auth/refresh-token : Generate refresh token.
• GET /api/auth/protected : Check protected access.

Task API

• POST /api/task : Get all tasks. [for admin only]
• GET /api/task/single-task/:id : Get task by id.
• POST /api/task/user-tasks : Get all task for a particular user.
• POST /api/task/create-task : Create new task. [for admin only]
• PUT /api/task/:id : Update task by id. [for admin only]
• PUT /api/task/status/:id : Update task status. [for user only]
• DELETE /api/task/:id : Delete task by id. [for admin only]

Seed API

Seed API has been used for enhancing development purposes. For the production grade, it has been disabled. You will be able to use it for your local server by removing the // from the app.js file.

• GET /api/seed/users : Seed user.
• GET /api/seed/tasks : Seed task.

About Developer

Facebook | Linkedin | Instagram | Twittwer | Github | Kaggle | Website