The Task Management System is a web application designed to help users efficiently create, assign, and manage tasks. Built using Next.js, Tailwind CSS, and Flowbite, it offers a user-friendly interface and robust features tailored for both Admin and Regular users. This system streamlines task management, enhancing productivity and collaboration within teams.
You can access the production application at the following link: Task Management System
Login form interface.
Main dashboard view displaying the list of tasks.
Form to create new tasks with all required fields.
List of tasks assigned to a regular user.
Interface in both light and dark themes.
- Next.js 14
- Flowbite React
- Tailwind CSS
- Zustand for global state management
-
Admin User:
- Can create, assign, edit, and delete tasks.
- Can view and manage all tasks.
-
Regular User:
- Can view tasks assigned to them or their group.
- Can mark tasks as Completed or In Progress.
-
Task Creation and Assignment (Admin Only):
- Admin users can create tasks with fields for title, description, assigned user/group, due date, and priority.
- Tasks can be assigned to specific users or groups.
-
Viewing Tasks:
- Admin users can view all tasks and filter by user, group, or status (completed, pending).
- Regular users can only view tasks assigned to them or their group.
-
Managing Tasks (Regular Users):
- Regular users can mark their assigned tasks as Completed or In Progress.
- Users can add comments to tasks for better communication.
-
Task Status Tracking:
- Tasks can have statuses: Pending, In Progress, and Completed.
-
Filtering and Sorting Tasks:
- Users can filter tasks by status, priority, or assigned user/group.
- Admin users can sort tasks by due date, priority, or creation date.
-
Responsive User Interface:
- Built with Tailwind CSS and Flowbite to provide a clean and responsive design.
- Includes a light/dark theme toggle button in the navbar, allowing users to select their preferred theme.
-
Basic Authorization:
- Admin users can access task creation and management pages, while regular users can only access their assigned task list.
-
Form Validation:
- Integrated form validation for login, task creation, and task editing to ensure data integrity and provide user feedback on errors.
-
Route Protection and Authentication Middleware:
- Implemented middleware to protect routes and handle user authentication, ensuring that only authenticated users can access certain pages, with appropriate redirection based on their authentication status and roles.
- Node.js 16+ and npm installed.
To run the application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Jonlle/task-management-system.git cd task-management-system -
Install dependencies:
npm install
-
Create a
.env.localfile for environment variables. Example:NEXT_PUBLIC_API_URL=http://localhost:3000 -
Run the application:
npm run dev
This project uses Jest for testing both the UI and API components. Below are the available scripts to run the tests:
To run both UI and API tests, use the following command:
npm testTo run only the UI tests, use the following command:
npm run test:uiTo run only the API tests, use the following command:
npm run test:api-
Database Integration: Integrate a database like SQLite or MongoDB for persistent task storage, enhancing data management and reliability.
-
Real-Time Updates: Implement WebSocket support to provide real-time notifications when tasks are assigned or updated, improving user engagement.
-
Drag-and-Drop Task Management: Enhance user experience by allowing users to change task statuses using drag-and-drop functionality.
The application is deployed on Vercel for easy access. You can view the live version here.
This project is licensed under the terms of the MIT License.