TaskFlow — Task Management Platform

Live Demo: Link

Role	How to access
Admin	Register with invite token 123456789
Member	Register normally

---

Overview

TaskFlow is a full-stack task management platform built with React on the frontend and Node.js/Express on the backend, backed by MongoDB. It supports two distinct roles — Admin and Member — each with their own dashboard and set of capabilities.

Admins can create and assign tasks, manage team members, track progress across the whole workspace, and export reports to Excel. Members get a focused view of just their assigned tasks, can update status and checklists, and attach files to tasks. Authentication is JWT-based throughout, with all private routes protected.

The app is fully deployed: frontend on Vercel, backend on Render, database on MongoDB Atlas, and media on Cloudinary.

---

Screenshots

Admin Dashboard

The admin dashboard gives a bird's-eye view of all tasks — total count, completed, pending, and overdue — with charts for quick visual scanning.

Managing Tasks

Admins can see all tasks in one place, filter by status or priority, and take bulk actions.

Managing Users

The user management view shows every member alongside their task breakdown — how many are pending, in progress, or completed.

Creating a Task

When creating a task, admins can set a title, description, priority level, due date, assign it to one or multiple members, and add a checklist of sub-tasks.

Editing a Task

Tasks can be edited at any time — update assignees, change priority, modify the checklist, or adjust the due date.

Member — Assigned Tasks

Members only see tasks assigned to them, keeping the interface clean and focused.

Member — Task In Progress

Inside a task, members can tick off checklist items and advance the task through Pending → In Progress → Completed.

---

Features

Admin

• View all registered members with per-user task stats (Pending / In Progress / Completed)
• Delete users; their task assignments are cleaned up automatically
• Create tasks with title, description, priority (Low / Medium / High / Critical), due date, multi-user assignment, and a sub-task checklist
• Edit or delete any task
• Admin dashboard with counts and charts for total, completed, pending, and overdue tasks
• Export .xlsx reports — one for all tasks, one summarizing per-user progress (via ExcelJS)
• Scoped workspaces — admins only see their own workspace; no cross-admin data leakage
• Admin registration is gated behind a secret invite token (ADMIN_INVITE_TOKEN)

Member

• Personalized dashboard showing only tasks assigned to the logged-in user
• Update task status through the progression: Pending → In Progress → Completed
• Mark checklist sub-tasks as done; overall task completion is derived from the checklist
• Attach files (images, PDFs) to tasks — stored on Cloudinary and displayed inline
• Upload a profile photo
• All private routes are JWT-protected; 401 responses auto-clear the session

---

Tech Stack

Frontend

• React 18 + Vite 7
• React Router v6 (client-side routing, protected routes)
• Axios with JWT interceptor
• react-hot-toast for notifications
• Vanilla CSS with a custom dark design system using CSS variables

Backend

• Node.js + Express.js
• JWT for authentication and authorization
• bcryptjs for password hashing
• Multer (memory storage) for in-memory file handling before upload
• Cloudinary for permanent cloud storage of images and attachments
• ExcelJS for .xlsx report generation

Database

• MongoDB + Mongoose

Deployment

• Frontend → Vercel
• Backend → Render
• Database → MongoDB Atlas
• Media → Cloudinary

---

API Reference

Access levels: Public · Private (JWT required) · Admin Only

Auth — /api/auth

Method	Endpoint	Description	Access
POST	/register	Register a user (admin if adminInviteToken is provided)	Public
POST	/login	Login — returns JWT + profileImage	Public
GET	/profile	Get the current user's profile	Private
PUT	/profile	Update profile details	Private
POST	/upload-image	Upload image or PDF to Cloudinary, returns secure_url	Private

Users — /api/user

Method	Endpoint	Description	Access
GET	/	All members with task counts	Admin Only
GET	/:id	Get user by ID	Private
DELETE	/:id	Delete user and clean their task assignments	Admin Only

Tasks — /api/task

Method	Endpoint	Description	Access
POST	/	Create a task	Admin Only
GET	/	All tasks (admin) or assigned tasks (member)	Private
GET	/:id	Get task by ID	Private
PUT	/:id	Update a task	Private
DELETE	/:id	Delete a task	Admin Only
PUT	/:id/status	Update task status	Private
PUT	/:id/todo	Update checklist	Private
GET	/dashboard-data	Admin dashboard stats	Admin Only
GET	/user-dashboard-data	Member dashboard stats	Private

Reports — /api/report

Method	Endpoint	Description	Access
GET	/export/tasks	Download Excel report — all tasks	Admin Only
GET	/export/users	Download Excel report — user summaries	Admin Only

---

Environment Variables

Backend — backend/.env

PORT=8000
MONGO_URI=mongodb+srv://<user>:<pass>@cluster.mongodb.net/taskflow
JWT_SECRET=your-very-long-random-secret
ADMIN_INVITE_TOKEN=your-admin-invite-token
CLIENT_URL= your-backend-url    Cloudinary (https://cloudinary.com/console)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Frontend — frontend/.env

VITE_API_BASE_URL= your-backend-url

---

Getting Started Locally

Prerequisites

• Node.js v18+
• MongoDB (local instance or Atlas)
• A free Cloudinary account
• Git

Steps

# 1. Clone the repository
git clone https://github.com/Yousuf-177/TaskFlow.git
cd TaskFlow

# 2. Set up the backend
cd backend
npm install
cp .env.example .env   # fill in all values
npm run dev            # runs on :8000

# 3. Set up the frontend (open a new terminal)
cd frontend
npm install
cp .env.example .env   # set VITE_API_BASE_URL=http://localhost:8000/api
npm run dev            # runs on :5173

---

Deployment

Layer	Platform	URL
Frontend	Vercel	https://taskflowmanage.vercel.app
Backend	Render	https://taskflow-9egu.onrender.com
Database	MongoDB Atlas	—
Media	Cloudinary	—

See deployment_guide.md for the full step-by-step walkthrough.

Note: Render's free tier spins down after 15 minutes of inactivity. The first request after a period of dormancy may take around 30 seconds.

---

What's Next

A few things planned for future iterations:

• Real-time notifications via WebSockets
• Advanced filtering and search — by status, priority, assignee, date range
• PDF export for reports, plus trend charts
• Member-initiated task creation (admin-configurable)
• Granular role system — Manager, Team Lead, etc.

---

Contributing

Contributions are welcome. To get started:

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

---

Contact

Author: Yousuf Ansari
GitHub: Yousuf-177
Email: mohdyousufans177@gmail.com
Live App: taskflowmanage.vercel.app