✅ TaskFlow

Corporate Task Management System

A full-stack, role-based task management platform built for teams that ship.

📋 Table of Contents

• About
• Key Features
• Tech Stack
• Architecture
• Project Structure
• Getting Started
• Deployment
• Roles & Permissions
• API Reference
• Environment Variables
• Contributing
• License

---

🎯 About

TaskFlow is a corporate-grade task management system designed for small-to-mid-sized teams. It provides a clean, intuitive interface for managing tasks across projects with real-time Kanban boards, dashboard analytics, and granular role-based access control.

Built as part of an IBM Internship Project, TaskFlow demonstrates enterprise-level full-stack development with modern web technologies — from a responsive Next.js frontend to a secure Express.js REST API backed by MongoDB Atlas.

🔗 Live Demo: taskflow-app-flame-kappa.vercel.app

---

✨ Key Features

🔐 Authentication & Security JWT-based token authentication Bcrypt password hashing Protected API routes with middleware Active session tracking & management	👥 Role-Based Access Control Admin — Full system control Manager — Team & task management Team Member — Personal task visibility
📊 Dashboard & Analytics Real-time task completion statistics Dynamic progress tracking Task distribution by status/priority Personalized "My Tasks" view	📋 Kanban Board Drag-and-drop task management Status columns: To Do → In Progress → Done Priority labels & due date tracking Real-time persistence to database
👤 User & Team Management View all team members & their roles Invite users to the workspace Profile customization with avatar upload Role-based user listing	✅ Personal To-Do Individual task tracking Independent from project tasks Quick add/complete workflow Available for all roles

---

🛠️ Tech Stack

Layer	Technology	Purpose
Frontend		App Router, Server Components, Responsive UI
UI Library		Accessible components, icons, analytics charts
Drag & Drop		Kanban board with drag-and-drop task reordering
Backend		REST API, authentication middleware, file uploads
Database		Document storage, ODM with schema validation
Auth		Token-based auth, secure password hashing
Deployment		Frontend hosting, backend hosting, managed database

---

🏗️ Architecture

┌──────────────────────────────────────────────────────────────────┐
│                          CLIENT (Browser)                        │
│                                                                  │
│   Next.js 14 (App Router)  ──  TypeScript  ──  Tailwind CSS      │
│   ┌───────────┬──────────┬──────────┬──────────┬───────────┐     │
│   │ Auth Page │ Dashboard│  Kanban  │   Team   │ Personal  │     │
│   │           │  Stats   │  Board   │ Manage   │   To-Do   │     │
│   └───────────┴──────────┴──────────┴──────────┴───────────┘     │
│                          │ Axios HTTP │                           │
└──────────────────────────┼────────────┼──────────────────────────┘
                           │  REST API  │
┌──────────────────────────┼────────────┼──────────────────────────┐
│                     EXPRESS.JS SERVER                             │
│                                                                  │
│   ┌─────────────┐  ┌──────────────┐  ┌────────────────────┐     │
│   │ Auth Routes  │  │ Task Routes  │  │  Upload Routes     │     │
│   │  /api/auth   │  │  /api/tasks  │  │  /api/upload       │     │
│   └──────┬───────┘  └──────┬───────┘  └────────┬───────────┘     │
│          │                 │                    │                 │
│   ┌──────▼─────────────────▼────────────────────▼───────────┐    │
│   │              JWT Auth Middleware                         │    │
│   └──────────────────────┬──────────────────────────────────┘    │
│                          │  Mongoose ODM                         │
└──────────────────────────┼──────────────────────────────────────┘
                           │
              ┌────────────▼────────────┐
              │    MongoDB Atlas        │
              │  ┌──────┐ ┌──────────┐  │
              │  │Users │ │  Tasks   │  │
              │  ├──────┤ ├──────────┤  │
              │  │Admin │ │ Sessions │  │
              │  ├──────┤ └──────────┘  │
              │  │Manager│              │
              │  └──────┘               │
              └─────────────────────────┘

---

📦 Project Structure

taskflow-app/
│
├── frontend/                    # Next.js 14 Application
│   ├── app/                     # App Router (pages & layouts)
│   │   ├── dashboard/           # Protected dashboard routes
│   │   ├── layout.tsx           # Root layout with providers
│   │   ├── page.tsx             # Landing / Auth page
│   │   └── globals.css          # Global styles
│   ├── components/              # React components
│   │   ├── ui/                  # Reusable UI primitives (shadcn/ui)
│   │   ├── auth-page.tsx        # Login & Registration
│   │   ├── dashboard-layout.tsx # Main app shell & navigation
│   │   ├── dashboard-stats.tsx  # Analytics cards & charts
│   │   ├── kanban-board.tsx     # Drag-and-drop task board
│   │   ├── personal-todo.tsx    # Personal task manager
│   │   ├── user-management.tsx  # Team member listing
│   │   ├── task-modal.tsx       # Task create/edit dialog
│   │   ├── project-modal.tsx    # Project create/edit dialog
│   │   ├── project-overview.tsx # Project listing & overview
│   │   └── profile-settings-modal.tsx  # User profile editor
│   ├── contexts/                # React Context providers
│   │   └── notification-context.tsx
│   ├── hooks/                   # Custom React hooks
│   └── lib/                     # Utilities & configuration
│
├── backend/                     # Express.js REST API
│   ├── server.js                # App entry point & config
│   ├── models/                  # Mongoose schemas
│   │   ├── user.js              # User model
│   │   ├── Admin.js             # Admin model
│   │   ├── Manager.js           # Manager model
│   │   ├── Task.js              # Task model
│   │   └── activeSession.js     # Session tracking
│   ├── routes/                  # API route handlers
│   │   ├── authRoutes.js        # Auth endpoints
│   │   ├── taskRoutes.js        # Task CRUD endpoints
│   │   ├── uploadRoutes.js      # File upload endpoints
│   │   └── user.js              # User profile endpoints
│   ├── middleware/              # Express middleware
│   │   └── authMiddleware.js    # JWT verification
│   └── scripts/                 # Utility scripts
│
├── .gitignore
└── README.md

---

⚡ Getting Started

Prerequisites

Tool	Version	Purpose
Node.js	18+	Runtime environment
MongoDB	6+ (or Atlas)	Database
Git	Latest	Version control

1️⃣ Clone the Repository

git clone https://github.com/Ethical-21/taskflow-app.git
cd taskflow-app

2️⃣ Setup Backend

cd backend
npm install

Create a .env file in the backend/ directory:

PORT=5000
MONGO_URI=mongodb://localhost:27017/taskmanagement
JWT_SECRET=your_strong_secret_key_here

Start the development server:

npm run dev    # Starts on http://localhost:5000

3️⃣ Setup Frontend

cd frontend
npm install

Create a .env.local file in the frontend/ directory:

NEXT_PUBLIC_API_URL=http://localhost:5000

Start the development server:

npm run dev    # Starts on http://localhost:3000

4️⃣ Open the App

Navigate to http://localhost:3000 in your browser. Create an account to get started!

---

🌐 Deployment

Frontend → Vercel

1. Import the repository on vercel.com
2. Set Root Directory to frontend
3. Framework Preset will auto-detect as Next.js
4. Add environment variable:

   NEXT_PUBLIC_API_URL = https://your-backend.onrender.com
   

5. Deploy 🚀

Backend → Render

1. Create a Web Service on render.com
2. Connect your GitHub repository
3. Set Root Directory to backend
4. Configure:
   • Build Command: npm install
   • Start Command: node server.js
5. Add environment variables:

   MONGO_URI = your_mongodb_atlas_connection_string
   JWT_SECRET = your_strong_secret_key
   PORT = 10000
   FRONTEND_URL = https://your-app.vercel.app
   

6. Deploy 🚀

Database → MongoDB Atlas

1. Create a free cluster on cloud.mongodb.com
2. Create a database user with read/write access
3. Whitelist 0.0.0.0/0 to allow Render access
4. Copy the connection string and add it as MONGO_URI in Render env vars

---

👥 Roles & Permissions

Feature	🔴 Admin	🟡 Manager	🟢 Team Member
View all tasks	✅	✅	❌ (own only)
Create tasks	✅	✅	❌
Edit / delete tasks	✅	✅	❌
Assign tasks to users	✅	✅	❌
Kanban drag-and-drop	✅	✅	❌
Team management	✅	✅	❌
View dashboard analytics	✅	✅	✅ (own stats)
Personal to-do list	✅	✅	✅
Profile management	✅	✅	✅

---

🔌 API Reference

Authentication

Method	Endpoint	Description	Auth
POST	/api/auth/signup	Register a new user	❌
POST	/api/auth/signin	Login & receive JWT	❌
POST	/api/auth/logout	End current session	✅
GET	/api/auth/users	List all users	✅
GET	/api/auth/active-sessions	Get active sessions	✅

Tasks

Method	Endpoint	Description	Auth
GET	/api/tasks	Get tasks (role-filtered)	✅
POST	/api/tasks	Create a new task	✅
PUT	/api/tasks/:id	Update a task	✅
DELETE	/api/tasks/:id	Delete a task	✅
GET	/api/tasks/stats/summary	Dashboard statistics	✅

User Profile

Method	Endpoint	Description	Auth
GET	/api/auth/user/profile	Get user profile	✅
PUT	/api/auth/user/profile	Update profile	✅
POST	/api/upload/avatar	Upload profile picture	✅

---

🔑 Environment Variables

Backend (backend/.env)

Variable	Description	Example
PORT	Server port	5000
MONGO_URI	MongoDB connection string	mongodb+srv://...
JWT_SECRET	Secret key for JWT signing	my_super_secret_key
FRONTEND_URL	Allowed CORS origin (optional)	https://your-app.vercel.app

Frontend (frontend/.env.local)

Variable	Description	Example
NEXT_PUBLIC_API_URL	Backend API base URL	http://localhost:5000

---

🤝 Contributing

Contributions are welcome! Here's how to get started:

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

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with ❤️ by Jay Tapodhan

Live Demo · Report Bug · Request Feature