Task Management System Using MERN Stack

Project Overview

The Advanced Task Management System Using MERN Stack is a full-stack web application designed to help organizations manage employees, distribute tasks, monitor deadlines and track work progress. It provides separate dashboards for administrators and employees, allowing each role to access the features relevant to its responsibilities.

Developed using MongoDB, Express.js, React.js and Node.js, the application combines a responsive interface with role-based access control, task tracking and database-driven statistics. It is suitable for students learning full-stack JavaScript development, REST APIs, authentication and database operations.

Available Features

1. User Authentication and Profile Management

• Secure login for Admin and Employee users.
• JWT-based authentication.
• Password hashing for account security.
• Role-based authorization for protected pages and API operations.
• Secure logout functionality.
• View and edit personal profile information.

2. Admin Dashboard

• View task counts grouped by status.
• Identify overdue tasks.
• Manage employee accounts.
• Create, assign, update and delete tasks.
• Monitor employee workloads and task completion rates.
• Search, filter and sort employee and task records.
• View dashboard charts and workload information based on MongoDB records.

3. Employee Dashboard

• View tasks assigned to the logged-in employee.
• Read task descriptions and deadlines.
• Check task priority levels.
• Update task status to Pending, In Progress or Completed.
• Filter assigned tasks by status and priority.
• View personal task statistics and profile information.

4. Task Management

• Create and maintain task titles and descriptions.
• Assign tasks to employees.
• Set Low, Medium and High priority levels.
• Set task deadlines.
• Track task status and timestamps.
• Automatically identify overdue tasks.
• Validate task updates and restrict unauthorized operations.

5. Database-Driven Statistics

The dashboard uses actual MongoDB records rather than fixed demonstration values. Task information can be organized by status, priority, deadline and assigned employee, helping administrators understand workload distribution and completion progress.

Administrator Workspace

Administrators can manage employee accounts, create and assign tasks, update task details, monitor deadlines and review work progress. Dashboard charts and statistics provide an overview of task distribution, overdue work and employee completion rates.

Employee Workspace

Employees can access their assigned tasks, review requirements and deadlines, check priorities and update task progress. The employee dashboard also provides access to personal task statistics and profile information without exposing administrative functions.

Task Priority and Deadline Tracking

Each task can include a title, description, assigned employee, priority, deadline and status. The application identifies tasks whose deadlines have passed while their status remains incomplete, making delayed work easier to monitor.

Technology Stack

• Frontend: React.js
• Styling: CSS
• Backend: Node.js and Express.js
• Database: MongoDB
• Authentication: JSON Web Tokens (JWT)
• Password Security: Password hashing
• API: REST API endpoints

Software and Tools Required

• Node.js and npm
• MongoDB Community Server or another accessible MongoDB deployment
• Visual Studio Code
• A modern web browser
• MongoDB connection string and backend environment configuration

Installation and Execution

Extract the project ZIP file and open the project folder in Visual Studio Code. Configure MongoDB and the backend environment variables, then install the dependencies using the commands below from the project root.

npm install
npm run install:all

Start the application using:

npm run dev

When both servers start successfully, open http://localhost:5173 for the frontend. The backend API is available at http://localhost:5000/api, with its health check at http://localhost:5000/api/health.

Initial Administrator Setup

Open the application in your browser and use the initial Admin setup option to enter the required name, email address and password. According to the project documentation, the initial Admin creation endpoint becomes unavailable after an account has been created.

After signing in, create employee accounts, assign tasks, set deadlines and monitor progress through the administrator dashboard.

Project Applications

• Employee task assignment and monitoring.
• Workload distribution across teams.
• Deadline and overdue task tracking.
• Employee progress monitoring.
• Full-stack MERN development practice.
• Academic projects involving authentication, CRUD operations and database-driven dashboards.

More Details and Full Documentation

View Advanced Task Management System Using MERN Stack Details