⚡ TaskFlow — Role-Based Task Management System

A full-stack web application with JWT authentication, role-based access control (Admin/User), and a real-time activity tracking system.

---

🧱 Tech Stack

Layer	Technology
Backend	Node.js, Express.js
Database	MongoDB + Mongoose ODM
Auth	JWT (JSON Web Tokens) + bcryptjs
Frontend	React.js 18, React Router v6
Styling	Custom CSS (design system)
HTTP	Axios with interceptors
Toasts	react-hot-toast

---

📁 Project Structure

task-manager/
├── backend/
│   ├── config/
│   │   └── db.js                  # MongoDB connection
│   ├── controllers/
│   │   ├── authController.js      # Register, Login, GetMe
│   │   ├── taskController.js      # User CRUD for tasks
│   │   └── adminController.js     # Admin APIs
│   ├── middleware/
│   │   ├── auth.js                # protect + adminOnly middleware
│   │   ├── errorHandler.js        # Global error handler
│   │   └── validate.js            # express-validator rules
│   ├── models/
│   │   ├── User.js                # User schema (role, status, bcrypt)
│   │   ├── Task.js                # Task schema
│   │   └── ActivityLog.js         # Activity tracking schema
│   ├── routes/
│   │   ├── authRoutes.js          # /api/auth/*
│   │   ├── taskRoutes.js          # /api/tasks/*
│   │   └── adminRoutes.js         # /api/admin/*
│   ├── services/
│   │   └── activityService.js     # Reusable logActivity()
│   ├── utils/
│   │   ├── response.js            # sendSuccess / sendError helpers
│   │   └── seeder.js              # Seeds admin user
│   ├── .env.example
│   ├── package.json
│   └── server.js                  # Express app entry point
│
└── frontend/
    ├── public/
    │   └── index.html
    └── src/
        ├── components/
        │   └── common/
        │       ├── Layout.js          # Sidebar + content wrapper
        │       ├── Modal.js           # Reusable modal dialog
        │       ├── ProtectedRoute.js  # Route guard component
        │       └── Sidebar.js        # Navigation with role-based links
        ├── context/
        │   └── AuthContext.js         # Global auth state (useAuth hook)
        ├── pages/
        │   ├── auth/
        │   │   ├── LoginPage.js
        │   │   └── RegisterPage.js
        │   ├── user/
        │   │   ├── DashboardPage.js   # Stats + recent tasks
        │   │   └── TasksPage.js       # Full CRUD tasks
        │   └── admin/
        │       ├── AdminDashboard.js  # Analytics + charts
        │       ├── UserManagementPage.js
        │       ├── TaskMonitorPage.js
        │       └── ActivityLogsPage.js
        ├── services/
        │   └── api.js                 # Axios instance + all API calls
        ├── App.js                     # Router + routes
        ├── index.css                  # Design system styles
        └── index.js

---

🚀 Quick Start

Prerequisites

• Node.js v16+
• MongoDB (local or Atlas)
• Git

---

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/task-manager.git
cd task-manager

---

2. Backend Setup

cd backend

# Install dependencies
npm install

# Create environment file
cp .env.example .env

Edit .env with your values:

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/task_manager
JWT_SECRET=your_super_secret_key_here
JWT_EXPIRE=7d

# Admin seed credentials
ADMIN_NAME=Super Admin
ADMIN_EMAIL=admin@taskmanager.com
ADMIN_PASSWORD=Admin@123456

# Seed the admin user
npm run seed

# Start development server
npm run dev

Backend runs at: http://localhost:5000

---

3. Frontend Setup

cd ../frontend

# Install dependencies
npm install

# Start React app
npm start

Frontend runs at: http://localhost:3000

The React app proxies /api requests to http://localhost:5000 automatically (via "proxy" in package.json).

---

🔐 Default Login Credentials

Role	Email	Password
Admin	admin@taskmanager.com	Admin@123456

Register new accounts through the /register page (all new accounts default to "User" role).

---

📡 API Reference

Auth Routes — /api/auth

Method	Endpoint	Auth	Description
POST	/register	❌	Register new user
POST	/login	❌	Login and get JWT
GET	/me	✅	Get current user info

Task Routes — /api/tasks

Method	Endpoint	Auth	Description
GET	/	✅	Get own tasks (filterable)
POST	/	✅	Create new task
GET	/:id	✅	Get one task
PUT	/:id	✅	Update own task
DELETE	/:id	✅	Delete own task

Query Params for GET /tasks: ?status=pending&priority=high&search=keyword

Admin Routes — /api/admin (Admin only)

Method	Endpoint	Description
GET	/analytics	Dashboard analytics
GET	/users	All users (filterable)
PUT	/users/:id/status	Activate/deactivate user
DELETE	/users/:id	Delete user + their tasks
GET	/tasks	All tasks (filterable)
DELETE	/tasks/:id	Delete any task
GET	/activity-logs	Full activity log

---

🧪 Sample API Tests (with curl)

Register

curl -X POST http://localhost:5000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"name":"Jane Doe","email":"jane@example.com","password":"pass1234"}'

Login

curl -X POST http://localhost:5000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"admin@taskmanager.com","password":"Admin@123456"}'

Create Task (with token)

curl -X POST http://localhost:5000/api/tasks \
  -H "Authorization: Bearer YOUR_TOKEN_HERE" \
  -H "Content-Type: application/json" \
  -d '{"title":"My first task","priority":"high","status":"pending"}'

Get All Tasks

curl http://localhost:5000/api/tasks \
  -H "Authorization: Bearer YOUR_TOKEN_HERE"

Admin: Get All Users

curl http://localhost:5000/api/admin/users \
  -H "Authorization: Bearer ADMIN_TOKEN_HERE"

Admin: Analytics

curl http://localhost:5000/api/admin/analytics \
  -H "Authorization: Bearer ADMIN_TOKEN_HERE"

---

🔒 Authorization Flow

Request → protect middleware → adminOnly middleware (admin routes)
            ↓
     Verify JWT token
            ↓
     Find user in DB
            ↓
     Check user status (active/inactive)
            ↓
     Attach req.user → route handler

---

🗄️ MongoDB Schemas

User

Field	Type	Details
name	String	required, max 50 chars
email	String	unique, lowercase
password	String	hashed with bcrypt (select:false)
role	Enum	"user" | "admin"
status	Enum	"active" | "inactive"
lastLogin	Date	updated on login

Task

Field	Type	Details
title	String	required, max 100 chars
description	String	optional, max 500 chars
status	Enum	pending / in-progress / completed
priority	Enum	low / medium / high
dueDate	Date	optional
user	ObjectId	ref to User

ActivityLog

Field	Type	Details
user	ObjectId	ref to User
action	Enum	LOGIN, TASK_CREATED, etc.
description	String	Human-readable summary
resourceId	ObjectId	Affected resource (optional)
resourceType	Enum	"Task" | "User" | null
ipAddress	String	Client IP for audit

---

⚙️ Git Workflow (Assignment Requirements)

# 1. Create and switch to new branch
git checkout -b feature/role-based-access

# 2. Add all files
git add .

# 3. Commit with clear message
git commit -m "feat: implement role-based task management with admin dashboard"

# 4. Push to GitHub
git push origin feature/role-based-access

# 5. Open Pull Request on GitHub
# → Compare: feature/role-based-access → main
# → Add description, screenshots
# → Request review

---

✅ Features Checklist

• JWT Authentication (Register/Login)
• Role-based access (Admin/User)
• User schema with status (Active/Inactive)
• Protected routes (backend middleware)
• Admin: View/Delete/Update users
• Admin: View/Delete all tasks
• User: CRUD own tasks only
• Activity Log System (login, task events)
• React protected routes (ProtectedRoute)
• Admin sidebar (admin links hidden from users)
• Analytics dashboard (counts, charts)
• Responsive design
• Global error handling
• Input validation
• Password hashing (bcrypt)
• Environment variables
• Reusable components (Modal, Layout, Sidebar)
• Toast notifications

---

📦 Build for Production

# Frontend
cd frontend && npm run build

# Backend (set NODE_ENV=production in .env)
cd backend && npm start

---

🛠️ Troubleshooting

MongoDB connection error:

• Make sure MongoDB is running: mongod or check MongoDB Atlas URI

Port already in use:

• Change PORT in .env or kill the process using the port

JWT errors:

• Ensure JWT_SECRET is the same across restarts
• Check token expiry (JWT_EXPIRE=7d)

CORS errors:

• Backend allows http://localhost:3000 by default
• Update the cors config in server.js for production URLs