🚀 TaskFlow — Team Task Manager

A production-grade, full-stack SaaS-style Team Task Manager built with modern technologies. Manage projects, assign tasks, and track progress with role-based access control.

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• Setup Instructions
• Environment Variables
• API Documentation
• Screenshots
• Live Demo

---

Overview

TaskFlow is a team collaboration platform that enables administrators to create projects, manage team members, and assign tasks with full lifecycle tracking. Members can view their assignments and update task statuses in real time. The dashboard provides visual insights into project health, task distribution, and overdue items.

Key Highlights

• 🔐 JWT-based authentication with bcrypt password hashing
• 👥 Role-based access control (Admin / Member)
• 📊 Interactive dashboard with charts and progress tracking
• ⚡ Real-time overdue task detection
• 🎨 Modern SaaS-grade UI with smooth animations

---

Features

Authentication

• Secure signup and login with JWT tokens
• Password hashing with bcrypt (12 salt rounds)
• Token-based session management
• Automatic logout on token expiration

Project Management (Admin)

• Create, edit, and delete projects
• Add/remove team members
• View project progress and task statistics
• Cascading deletion (project + associated tasks)

Task Management

• Create tasks with title, description, assignee, due date
• Status tracking: To Do → In Progress → Done
• Filter tasks by status and overdue state
• Dynamic overdue highlighting
• Members can only update status of their assigned tasks

Dashboard

• Overview cards: total projects, tasks, completed, overdue
• Task distribution pie chart
• Per-project progress bar chart
• Project breakdown with individual progress bars
• Recent activity feed

UI/UX

• Clean, modern SaaS-style interface
• Sidebar navigation with active state indicators
• Smooth CSS animations and transitions
• Toast notifications for all actions
• Loading states and empty state placeholders
• Responsive layout design

---

Tech Stack

Layer	Technology
Frontend	React 19, Tailwind CSS 4, Vite
Backend	Node.js, Express 4
Database	MongoDB with Mongoose ODM
Auth	JWT, bcryptjs
Validation	Joi
Charts	Recharts
Icons	Lucide React
HTTP	Axios
Routing	React Router v7

---

Architecture

team-task-manager/
├── backend/
│   ├── src/
│   │   ├── config/          # Database connection
│   │   ├── controllers/     # Request handlers (thin layer)
│   │   ├── middleware/       # Auth, validation, error handling
│   │   ├── models/           # Mongoose schemas (User, Project, Task)
│   │   ├── routes/           # Express route definitions
│   │   ├── services/         # Business logic (separation of concerns)
│   │   ├── validators/       # Joi validation schemas
│   │   ├── utils/            # Seed script, helpers
│   │   ├── app.js            # Express app setup
│   │   └── server.js         # Entry point
│   ├── .env.example
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── hooks/            # Custom hooks (useAuth)
│   │   ├── layouts/          # App layout with sidebar
│   │   ├── pages/            # Page components
│   │   ├── services/         # API client (Axios)
│   │   ├── App.jsx           # Root component with routing
│   │   ├── main.jsx          # Entry point
│   │   └── index.css         # Global styles & design tokens
│   ├── vite.config.js
│   └── package.json
├── package.json              # Monorepo root
└── README.md

Design Principles

• Separation of Concerns: Controllers → Services → Models
• Centralized Error Handling: All errors flow through middleware
• Validation First: Joi schemas validate all inputs before processing
• Role Enforcement: Middleware + service-level role checks

---

Setup Instructions

Prerequisites

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

1. Clone & Install

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

# Install backend dependencies
cd backend && npm install

# Install frontend dependencies
cd ../frontend && npm install

2. Configure Environment

# Copy example env
cp backend/.env.example backend/.env

Edit backend/.env with your MongoDB URI and a strong JWT secret.

3. Seed Database (Optional)

cd backend
npm run seed

This creates two test users:

• Admin: admin@ttm.com / admin123
• Member: member@ttm.com / member123

4. Run Development Servers

Terminal 1 — Backend:

cd backend
npm run dev

Terminal 2 — Frontend:

cd frontend
npm run dev

The app will be available at http://localhost:5173

---

Environment Variables

Variable	Description	Default
PORT	Backend server port	5000
MONGO_URI	MongoDB connection string	mongodb://localhost:27017/ttm
JWT_SECRET	JWT signing secret	(required)
JWT_EXPIRES_IN	Token expiration	7d
NODE_ENV	Environment mode	development
FRONTEND_URL	CORS allowed origin	http://localhost:5173

---

API Documentation

Auth

Method	Endpoint	Access	Description
POST	/api/auth/signup	Public	Register user
POST	/api/auth/login	Public	Authenticate user
GET	/api/auth/me	Auth	Get current user

Projects

Method	Endpoint	Access	Description
GET	/api/projects	Auth	List user projects
GET	/api/projects/:id	Auth	Get project details
POST	/api/projects	Admin	Create project
PUT	/api/projects/:id	Admin	Update project
DELETE	/api/projects/:id	Admin	Delete project

Tasks

Method	Endpoint	Access	Description
GET	/api/tasks	Auth	List tasks
GET	/api/tasks/:id	Auth	Get task details
POST	/api/tasks	Admin	Create task
PUT	/api/tasks/:id	Auth*	Update task
DELETE	/api/tasks/:id	Admin	Delete task

*Members can only update the status field of tasks assigned to them.

Dashboard

Method	Endpoint	Access	Description
GET	/api/dashboard	Auth	Get dashboard stats

Users

Method	Endpoint	Access	Description
GET	/api/users	Auth	List all users

---

Screenshots

Screenshots will be added after deployment.

---

Live Demo

🔗 Live URL: Will be added after Railway deployment

Demo Credentials

• Admin: admin@ttm.com / admin123
• Member: member@ttm.com / member123

---

🎥 Demo Video Script

1. Introduction (30s): Overview of TaskFlow and its purpose
2. Authentication Flow (30s): Signup as admin, logout, login again
3. Project Creation (45s): Create a project, add members
4. Task Assignment (45s): Create tasks, assign to members, set due dates
5. Dashboard Overview (30s): Show stats, charts, progress bars
6. Role-Based Access (45s): Login as member, show restricted actions, update task status

---

License

MIT © 2024

---

Built with ☕ and clean architecture principles.