TaskFlow is a premium, feature-rich full-stack MERN application that serves as a lightweight, intelligent Trello/Asana alternative. It features secure JWT authentication, multiple board workspaces, interactive Kanban task boards, progress metrics charts, and a smart AI assistant that automatically estimates task effort, suggests realistic due dates, drafts subtask checklists, and explains its reasoning.
- Secure JWT Auth: Custom register and login views with client validations and secure token persistence in headers.
- Workspaces Dashboard: List, create, rename, and delete boards. Deletion triggers custom warning modals and automatically purges associated cards.
- Kanban Board: Three columns (To Do, In Progress, Done) with smooth HTML5 drag-and-drop and accessible manual move buttons.
- AI Task Assistant: Instantly suggests task due dates, effort estimates, and actionable subtask checklists based on the card title and description.
- Interactive Checklists: Add, check, or delete individual subtasks on cards, updating a visual progress bar.
- Analytics Dashboard: Metrics counters (Total, In Progress, Completed, Overdue) and charts powered by
rechartsfor status and priority distributions. - Glassmorphism Design: Curated dark and light themes using CSS modules with persistent local storage theme preferences.
- React v18+ (Vite SPA template)
- React Router v6 (Protected routing wrappers)
- Recharts (Visual analytics)
- Lucide React (Modern iconography)
- Vanilla CSS / CSS Modules (Custom styling system with design variables)
- Node.js & Express.js (REST API)
- MongoDB & Mongoose (Data models & relationships)
- JSONWebToken & Bcrypt.js (Security, cryptography, token auth)
- Zod (Request validation schemas)
- MongoDB Memory Server (In-memory database helper for zero-setup local dev runs)
Ensure you have Node.js (v22+) and npm installed on your system.
Install all root, client, and server dependencies concurrently by running the following command in the root folder:
npm run install-allCopy .env.example in the root folder to a new file named .env:
# Server configuration
PORT=5000
JWT_SECRET=your_jwt_secret_key_here
# Leave blank to use zero-config in-memory MongoDB development fallback
MONGODB_URI=
# Leave blank to use Smart Mock AI demo mode
GEMINI_API_KEY=Note
Zero Configuration Database: If MONGODB_URI is left blank, TaskFlow automatically downloads and spins up an in-memory MongoDB database (mongodb-memory-server) in the background. It is fully connected via Mongoose and lets you run the app instantly without pre-installing MongoDB locally!
Due to Windows path space characters, run the servers individually using their direct node/vite entry points:
In the root directory, start the API:
npm run serverConsole will print database start notifications and listen on http://localhost:5000.
In a separate terminal tab, navigate to the client/ subdirectory and start the frontend:
cd client
node node_modules/vite/bin/vite.jsVite will boot and host the SPA at http://localhost:3000/.
We chose the Google Gemini API (gemini-2.5-flash model) for several reasons:
- Generous Free Tier: Perfect for take-home evaluations and sandbox integrations.
- Speed & Efficiency: Extremely low latency for lightweight task helpers.
- Structured JSON Output: Supported natively by setting
responseMimeType: 'application/json'in the generation config, ensuring robust parser calls on the server.
sequenceDiagram
participant Browser as React Client
participant Server as Express API
participant AI as Gemini API
Browser->>Server: POST /api/tasks/suggest (title, description)
alt Gemini Key Present
Server->>AI: Send prompt with current date + text context
AI-->>Server: Return structured JSON (effort, due date, subtasks, reasoning)
else Gemini Key Missing / Error
Server->>Server: Fall back to smart local mock algorithm
end
Server-->>Browser: Return clean suggestion payload
Browser->>Browser: Click "Accept Suggestions" to populate form
If no GEMINI_API_KEY is provided in .env, the server uses a Smart Mock AI generator that matches keywords in the title/description (e.g., "bug", "deploy", "auth", "test", "readme") to generate context-specific, realistic estimates, reasoning, and checklists.
All board and task routes enforce ownership checks. A user can only view, edit, or delete items they own.
POST /api/auth/register- Create a new user account. Returns JWT.POST /api/auth/login- Authenticates user. Returns JWT.GET /api/auth/me- Validates token in header and returns logged-in user profile. [Protected]
GET /api/boards- Fetch all boards owned by the user. [Protected]POST /api/boards- Create a new board (body:title,description). [Protected]PUT /api/boards/:id- Update board title or description. [Protected]DELETE /api/boards/:id- Delete board and all its tasks. [Protected]
GET /api/tasks?boardId=id- Fetch tasks for a board. Supports query parameters forsearch,priority, andstatus. [Protected]POST /api/tasks- Create a task. [Protected]PUT /api/tasks/:id- Update task fields (status, priority, subtasks, estimatedEffort, dueDate). [Protected]DELETE /api/tasks/:id- Delete a task. [Protected]POST /api/tasks/suggest- Request smart estimate recommendations (body:title,description). [Protected]
- Persistent Local Database: The default setup runs an in-memory MongoDB database which clears its state whenever the server restarts. To resolve, input a cloud URI string (like MongoDB Atlas) into
MONGODB_URIin.env. - Real-time Syncing: Local state updates are maintained via React page mounts and API updates. Implementing WebSockets (Socket.io) would allow real-time board collaboration.
- Advanced AI Agent: The assist tool is focused on estimations and checklists. Future improvements include automated natural-language board parsing ("Add a high-priority bug ticket for login screen") or automatic task categorization.