Task Management System

A comprehensive full-stack task management application built with React, Node.js, Express, and MongoDB. This system provides role-based access control with separate interfaces for administrators and team members to efficiently manage tasks and track progress.

🚀 Features

For Administrators

• Dashboard Analytics: View comprehensive statistics including total tasks, pending tasks, completed tasks, and overdue tasks
• Task Management: Create, update, delete, and assign tasks to team members
• User Management: View all team members and their task statistics
• Task Filtering: Filter tasks by status (All, Pending, In Progress, Completed)
• Progress Tracking: Monitor task completion rates and team productivity
• Excel Reports: Export task and user data to Excel files for reporting
• File Attachments: Add attachments to tasks for additional context

For Leaders

• Dashboard Analytics: View statistics for tasks they created
• Task Management: Create, update, delete tasks they created and assign to team members
• User Management: View team members and leaders (but cannot manage users)
• Task Filtering: Filter tasks by status for their created tasks
• Progress Tracking: Monitor completion rates for their created tasks
• Excel Reports: Export data for tasks they created and users they can see

For Team Members

• Personal Dashboard: View personal task statistics and recent assignments
• My Tasks: View all assigned tasks with filtering capabilities
• Task Details: View detailed task information including description, due dates, and attachments
• Todo Checklist: Mark checklist items as complete and track progress
• Status Updates: Automatic status updates based on checklist completion
• Profile Management: Update personal profile information and avatar

Core Features

• Authentication & Authorization: Secure login/signup with JWT tokens
• Role-based Access Control: Admin, Leader, and Member roles with appropriate permissions
• Real-time Progress Tracking: Automatic task status updates based on checklist completion
• File Upload: Support for profile images and task attachments
• Responsive Design: Mobile-friendly interface built with Tailwind CSS
• Data Visualization: Charts and graphs for task analytics using Recharts

🛠️ Tech Stack

Frontend

• React 19: Modern React with hooks and functional components
• Vite: Fast build tool and development server
• React Router DOM: Client-side routing
• Tailwind CSS: Utility-first CSS framework
• Axios: HTTP client for API requests
• React Hot Toast: Toast notifications
• React Icons: Icon library
• Recharts: Data visualization library
• Moment.js: Date manipulation and formatting

Backend

• Node.js: JavaScript runtime
• Express.js: Web application framework
• MongoDB: NoSQL database
• Mongoose: MongoDB object modeling
• JWT: JSON Web Tokens for authentication
• bcryptjs: Password hashing
• Multer: File upload handling
• ExcelJS: Excel file generation
• CORS: Cross-origin resource sharing

DevOps & Tools

• Docker: Containerization
• Docker Compose: Multi-container orchestration
• ESLint: Code linting
• Prettier: Code formatting
• Nodemon: Development auto-restart

📁 Project Structure

task-management/
├── backend/                    # Node.js/Express backend
│   ├── config/                # Database configuration
│   ├── controllers/           # Route controllers
│   ├── middlewares/           # Custom middlewares
│   ├── models/               # Mongoose schemas
│   ├── routes/               # API routes
│   ├── uploads/              # File uploads directory
│   ├── server.js             # Main server file
│   └── package.json          # Backend dependencies
├── frontend/                  # React frontend
│   ├── public/               # Static assets
│   ├── src/                  # Source code
│   │   ├── components/       # Reusable components
│   │   ├── context/          # React context providers
│   │   ├── hooks/            # Custom hooks
│   │   ├── pages/            # Page components
│   │   ├── routes/           # Route configurations
│   │   └── utils/            # Utility functions
│   └── package.json          # Frontend dependencies
├── mongodb-data/             # MongoDB data directory
├── uploads/                  # Shared uploads directory
└── docker-compose.yml        # Docker configuration

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (v6 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/HuynhKhanh1402/task-management.git
   cd task-management

2. Backend Setup

   cd backend
   npm install
   cp .env.example .env

   Update the .env file with your configuration:

   PORT=8000
   MONGO_URI=mongodb://localhost:27017/task-management
   CLIENT_URL=http://localhost:5173
   JWT_SECRET=your_jwt_secret_here
   NODE_ENV=development

3. Frontend Setup

   cd ../frontend
   npm install
   cp .env.example .env

   Update the .env file:

   VITE_API_URL=http://localhost:8000
   VITE_ENV=development

4. Start MongoDB Make sure MongoDB is running on your system or use Docker:

   docker run -d -p 27017:27017 --name mongodb mongo:latest

5. Run the Application

   Backend (Terminal 1):

   cd backend
   npm run dev

   Frontend (Terminal 2):

   cd frontend
   npm run dev

Using Docker (Recommended)

1. Run with Docker Compose

   docker-compose up -d

This will start:

• Frontend on http://localhost:5173
• Backend on http://localhost:8000
• MongoDB on http://localhost:27017

📱 Usage

Creating Admin Account

1. Register a new account at /signup
2. Use the admin invite token (set in environment variables) to create an admin account
3. Login with admin credentials to access administrative features

Creating Leader Account

1. Register a new account at /signup
2. Use the leader invite token (set in environment variables) to create a leader account
3. Login with leader credentials to access leader features

For Administrators

1. Dashboard: View system-wide statistics and charts
2. Manage Tasks: Create new tasks, assign to team members, set priorities and due dates
3. Manage Users: View all team members and their task progress
4. Reports: Export data to Excel for external analysis

For Leaders

1. Dashboard: View statistics for tasks they created
2. Manage Tasks: Create, update, delete tasks they created
3. Team Members: View team members and other leaders (no management capability)
4. Reports: Export data for their created tasks

For Team Members

1. Dashboard: View personal task statistics
2. My Tasks: View assigned tasks and update progress
3. Task Details: Complete checklist items and track progress
4. Profile: Update personal information and profile image

🔐 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/profile - Get user profile
• PUT /api/auth/profile - Update user profile

Tasks

• GET /api/tasks - Get tasks (filtered by role: Admin sees all, Leader sees created, Member sees assigned)
• POST /api/tasks - Create new task (Admin and Leader only)
• GET /api/tasks/:id - Get task by ID (with role-based access)
• PUT /api/tasks/:id - Update task (with role-based permissions)
• DELETE /api/tasks/:id - Delete task (Admin or task creator only)
• PUT /api/tasks/:id/status - Update task status
• PUT /api/tasks/:id/todo - Update task checklist

Users

• GET /api/users - Get users (Admin sees all members, Leader sees members and leaders)
• PUT /api/users/:id - Update user (Admin only)
• DELETE /api/users/:id - Delete user (Admin only)

Reports

• GET /api/reports/export/tasks - Export tasks to Excel
• GET /api/reports/export/users - Export users to Excel

🎨 Screenshots

Coming soon

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

• HuynhKhanh1402 - Initial work - HuynhKhanh1402

🙏 Acknowledgments

• React team for the amazing framework
• MongoDB team for the excellent database
• All contributors who helped make this project better

---

⭐ Star this repository if you find it helpful!

For more information or support, please open an issue on GitHub.