TaskFlow - Task Management System

A modern, full-featured task management system built with React, TypeScript, and Tailwind CSS. Features a drag-and-drop Kanban board, sprint planning, and role-based access control.

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Access the app at: http://localhost:5173

🔐 Demo Login Credentials

All demo accounts use password: password123

• Admin: admin@taskmanager.com
• Manager: bob@taskmanager.com
• Developer: charlie@taskmanager.com

✨ Features

Implemented

• ✅ Authentication - Login with role-based access
• ✅ Dashboard - Overview with statistics and recent tasks
• ✅ Kanban Board - Drag-and-drop task management across 5 statuses
• ✅ Task Filtering - Filter by sprint, priority, status
• ✅ Task Cards - Priority badges, assignee avatars, due dates, overdue indicators
• ✅ Mock API - Complete mock data layer that can easily switch to real backend
• ✅ Responsive Design - Works on desktop and mobile

Coming Soon

• ⏳ Task Create/Edit Form
• ⏳ Task Details with History & Comments
• ⏳ Sprint Management Page
• ⏳ My Tasks View
• ⏳ File Attachments
• ⏳ Real-time Notifications

🛠 Tech Stack

• React 18 + TypeScript
• Tailwind CSS - Styling
• React Router v6 - Navigation
• @dnd-kit - Drag & drop
• date-fns - Date formatting
• Vite - Build tool

📦 Project Structure

src/
├── components/     # UI components (common, layout, tasks, kanban)
├── contexts/       # React Context (Auth, Task, Sprint)
├── services/       # API services (mock + real implementations)
├── types/          # TypeScript definitions
├── pages/          # Page components
└── App.tsx         # Main app with routing

See PROJECT_SUMMARY.md for detailed documentation.

🔄 Switching to Real Backend

1. Open src/services/apiConfig.ts
2. Change:

export const USE_MOCK_API = false;
export const API_BASE_URL = 'http://your-api-url/api';

That's it! All services automatically switch to real API calls.

Expected Backend Endpoints

Authentication:

• POST /api/auth/login
• GET /api/auth/me
• POST /api/auth/logout

Tasks:

• GET /api/tasks (with filters)
• GET /api/tasks/:id
• POST /api/tasks
• PUT /api/tasks/:id
• PATCH /api/tasks/:id/status
• DELETE /api/tasks/:id

Sprints:

• GET /api/sprints
• POST /api/sprints
• PUT /api/sprints/:id

Users:

• GET /api/users

See service files in src/services/ for complete request/response formats.

📊 Database Schema

The TypeScript types match the expected database schema:

• Users - Authentication and profile data
• Sprints - Sprint planning with dates and status
• Tasks - Full task details with assignments and tracking
• TaskHistory - Complete audit trail
• Comments - Task discussions
• Attachments - File uploads (structure ready)

🎨 Features Showcase

Kanban Board

• Smooth drag-and-drop between columns
• Optimistic UI updates
• Visual feedback during drag
• Color-coded priority system
• Overdue task warnings

Dashboard

• Real-time statistics
• Active sprint overview
• Recent task activity
• Quick navigation

Authentication

• Secure JWT-based auth
• Protected routes
• Auto-session restore
• Multiple role support

👥 User Roles

• Admin - Full system access
• Manager - Sprint and task management
• Developer - Task execution
• Reporter - Task creation and tracking

🧪 Development

# Install dependencies
npm install

# Start dev server with hot reload
npm run dev

# Type checking
npm run tsc

# Linting
npm run lint

# Build for production
npm run build

# Preview production build
npm run preview

📝 API Integration Guide

All API services follow the same pattern:

// Service automatically switches based on USE_MOCK_API
import { taskService } from './services/taskService';

// Works with both mock and real API
const tasks = await taskService.getTasks({ status: 'InProgress' });

Mock services include realistic delays to simulate network latency.

🤝 Contributing

1. Create components in appropriate folders
2. Use TypeScript types from src/types/
3. Follow existing patterns for services
4. Use Tailwind CSS for styling
5. Keep components small and reusable

📄 License

MIT

---

Need help? Check PROJECT_SUMMARY.md for detailed implementation guide and architecture overview.