Task Manager (MERN Stack)

A full-stack task management application built with MongoDB, Express, React, and Node.js. It supports authentication, role-aware task operations, dashboards, checklist progress tracking, image uploads, and Excel report exports.

---

Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Prerequisites
• Environment Variables
• Installation
• Run the App
• API Reference
• Authentication
• Task Status Rules
• File Uploads
• Reports
• Recent Updates
• Known Notes
• Roadmap Ideas
• Author

---

Overview

This project is organized into two top-level apps:

• Backend/: REST API, auth, MongoDB models, uploads, reporting.
• Frontend/: React + Vite dashboard UI for admin/member workflows.

---

Features

Core Features

• JWT-based user authentication (register, login, profile)
• Role model in backend (admin, member)
• Admin-focused task creation/management
• Task assignment to one or more users
• Task checklist with automatic progress calculation
• Status-aware dashboards (Pending, In_Progress, Completed)
• Image upload API with multer (JPEG/PNG, max 5MB)
• Excel report export for tasks and users
• Responsive frontend with charts and cards
• Dark/Light mode toggle

New Features (Latest Update)

• Toast Notifications: Real-time user feedback with success, error, info, and warning notifications across the application
• Task Comments: Team collaboration feature - users can add, view, and manage comments on tasks they're assigned to
• Edit Profile: Both users and admins can update their profile (name, email, password, profile photo)
• Admin User Enrollment: Admins can create new users directly from the dashboard with optional admin role assignment via invite token
• Sidebar Integration: New "Edit Profile" and "Add User" menu items in admin and user sidebars

---

Tech Stack

Frontend

• React 19
• Vite
• React Router
• Axios
• Tailwind CSS 4
• Recharts
• React Toastify

Backend

• Node.js
• Express 5
• MongoDB + Mongoose
• JWT (jsonwebtoken)
• bcryptjs
• multer
• exceljs
• dotenv

---

Project Structure

Task_Manager/
├── Backend/
│   ├── config/
│   ├── controllers/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   ├── uploads/
│   ├── package.json
│   └── server.js
├── Frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── routes/
│   │   └── utils/
│   └── package.json
└── README.md

---

Prerequisites

• Node.js 18+
• npm 9+
• MongoDB instance (local or Atlas)

---

Environment Variables

Create Backend/.env:

PORT=8000
MONGO_URL=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173
ADMIN_INVITE_TOKEN=optional_admin_invite_token

Why PORT=8000?

Frontend is currently configured with:

• Frontend/src/utils/apiPath.js → BASE_URL = 'http://localhost:8000'

So backend should run on port 8000 unless you also change frontend base URL.

---

Installation

From project root:

# Backend dependencies
cd Backend
npm install

# Frontend dependencies
cd ../Frontend
npm install

---

Run the App

Use two terminals:

Terminal 1 (Backend)

cd Backend
npm run dev

Backend: http://localhost:8000

Terminal 2 (Frontend)

cd Frontend
npm run dev

Frontend (Vite default): http://localhost:5173

---

API Reference

Base URL: http://localhost:8000

Auth Routes (/api/auth)

• POST /register - Register new user
• POST /login - Login and receive JWT
• GET /profile - Get current user profile (protected)
• PUT /profile - Update current user profile (protected)
• POST /upload-image - Upload profile image (multipart/form-data, field: image)
• POST /uploads - Additional upload endpoint from server.js (multipart/form-data, field: image)

User Routes (/api/users)

• GET / - Get users (admin only)
• GET /:id - Get single user
• POST / - Create user (admin only) - NEW
• DELETE /:id - Delete user (admin only)

Task Routes (/api/tasks)

• GET /dashboard-data - Admin dashboard summary
• GET /user-dashboard-data - Current user dashboard summary
• GET / - List tasks (?status=Pending|In_Progress|Completed)
• GET /:id - Get task by ID
• POST / - Create task (admin only)
• PUT /:id - Update task
• DELETE /:id - Delete task (admin only)
• PUT /:id/status - Update task status
• PUT /:id/todo - Update checklist + auto progress/status
• GET /:id/comments - Get all comments on a task (protected) - NEW
• POST /:id/comments - Add comment to task (protected) - NEW

Report Routes (/api/reports)

• GET /exports/tasks - Download task report .xlsx (admin only)
• GET /exports/users - Download user report .xlsx (admin only)

---

Authentication

Protected routes require header:

Authorization: Bearer <jwt_token>

Token is generated on login/register and expires in 7 days.

---

Task Status Rules

Supported canonical statuses in backend:

• Pending
• In Progress
• Completed

Backend also normalizes variants like in progress, in-progress, In Progress.

Checklist updates automatically recalculate:

• progress percentage
• status transition (Pending → In_Progress → Completed)

---

File Uploads

Upload constraints:

• Allowed formats: .jpg, .jpeg, .png
• Max size: 5MB
• Storage: Backend/uploads/

Static access:

• GET /uploads/<filename>

---

Reports

Exports use exceljs and return downloadable Excel files:

• task_report.xlsx
• user_report.xlsx

---

Recent Updates

Version 2.0 - New Features Released

1. Toast Notifications System ✅

• Integrated react-toastify for real-time user feedback
• Implemented 4 notification types: success, error, info, warning
• Applied across: Login, User Creation, Profile Updates, Comment Operations
• Files Modified:
  • Frontend/src/utils/toast.js (NEW)
  • Frontend/src/main.jsx
  • Frontend/src/pages/Auth/Login.jsx
  • Frontend/src/pages/Admin/CreateUser.jsx
  • Frontend/src/pages/EditProfile.jsx

2. Task Comments System ✅

• Team members can add and view comments on tasks
• Only task collaborators and admins can comment
• Real-time comment updates with timestamps
• User avatars and names shown with each comment
• Backend:
  • Backend/models/Task.js - Added comments schema field
  • Backend/controllers/taskController.js - Added addComment() and getComments()
  • Backend/routes/taskRoute.js - Added comment endpoints
• Frontend:
  • Frontend/src/pages/User/ViewTaskDetails.jsx - Full comment UI

3. User Profile Management ✅

• Edit profile page for both users and admins
• Update: name, email, password, profile photo
• New Routes:
  • /admin/edit-profile (Admin)
  • /user/edit-profile (User)
• Files Modified:
  • Frontend/src/pages/EditProfile.jsx (NEW)
  • Frontend/src/components/Inputs/ProfilePhotoSelector.jsx - Enhanced

4. Admin User Enrollment ✅

• Admins can create new users from dashboard
• Optional role assignment via ADMIN_INVITE_TOKEN
• Direct user management without signup page
• New Route: /admin/create-user
• Files Modified:
  • Frontend/src/pages/Admin/CreateUser.jsx (NEW)
  • Backend/controllers/userController.js - Added createUser()

5. Navigation & UI Improvements ✅

• Added "Add User" menu item in admin sidebar
• Added "Edit Profile" menu item in both sidebars
• Improved sidebar organization
• Files Modified: Frontend/src/utils/data.js

---

Known Notes

• In backend env, key is MONGO_URL (not MONGO_URI).
• Frontend API base URL is hardcoded in Frontend/src/utils/apiPath.js.
• Backend report routes are /api/reports/exports/....
• Frontend/src/utils/apiPath.js currently uses /api/reports/export/... (without s) for reports.

---

Roadmap Ideas

• Complete user GET /:id and DELETE /:id controller logic.
• Add pagination/filtering/sorting for task list endpoints.
• Add automated tests for API routes and auth middleware.
• Move frontend API base URL to .env (VITE_API_BASE_URL).

---

IMAGE OR DEMO

----- HOME PAGE ----

-----LOGIN PAGE ----

----- ADMIN DASHBOARD ----

---- USER DASHBOARD ----

Author

Made by Arya.