TaskFlow

A full-stack project management platform that helps teams organize projects, manage tasks, and collaborate through Kanban workflows.

TaskFlow simplifies how development teams track their work by providing an intuitive, drag-and-drop interface connected to a robust, scalable backend. It bridges the gap between complex enterprise tools and simple to-do lists.

Screenshots

Dashboard	Kanban Board
Task Details	Authentication

Features

Authentication

• Secure user registration and login
• JWT-based session handling via HTTP-only cookies
• Persistent authentication state

Dashboard

• High-level overview of project statistics
• Recent activity timeline and history logs
• Quick access to active projects

Workspace & Project Management

• Relational database schema supporting hierarchical workspaces and projects
• User roles (owner, admin, member) built into the data layer

Task Management

• Full backend CRUD operations for tasks
• Drag-and-drop Kanban interface for visual tracking
• Task prioritization and assignments

User Experience

• Responsive, modern interface built with Tailwind CSS
• Accessible and semantic UI components
• Global state management for instant UI updates

Tech Stack

Category	Technology
Frontend	React 18, Vite, Tailwind CSS, Zustand, React Router, @hello-pangea/dnd
Backend	Node.js, Express.js
Database	PostgreSQL
Authentication	Supabase Auth (JWT)
API Client	Axios

Architecture

Frontend Architecture: The client is a Single Page Application (SPA) built with React and Vite. It utilizes a modular structure separating components, pages, layouts, and services. Global state (like authentication) is managed via zustand, while Axios instances handle API communication. Routing is protected using React Router to ensure unauthenticated users cannot access core application views.

Backend Architecture: The server follows a standard MVC (Model-View-Controller) design pattern. Express routes pass requests through security and authentication middleware before handing them off to specific controllers.

Database Approach: The PostgreSQL database is fully relational, utilizing UUIDs for primary keys to ensure security against enumeration attacks. It relies on cascading deletes and constrained foreign keys to maintain data integrity across Workspaces, Projects, Boards, and Tasks.

Database Design

The database revolves around a hierarchical structure:

• Profiles: Extends the default authentication users table.
• Workspaces: The top-level container for an organization.
• Projects & Boards: Workspaces contain Projects, which contain Boards.
• Columns & Tasks: Boards contain Columns (e.g., Todo, In Progress), which hold Tasks.
• Relations: Many-to-many relationships handle Workspace Members and Task Labels.

API Overview

All API endpoints are prefixed with /api.

Authentication APIs

• POST /auth/register - Register a new user
• POST /auth/login - Authenticate user and issue session token
• GET /auth/me - Validate session and get current user
• POST /auth/logout - Clear user session

Task APIs

• GET /tasks - Retrieve tasks (supports filtering by board)
• POST /tasks - Create a new task
• PUT /tasks/:id - Update task details
• DELETE /tasks/:id - Remove a task

Installation and Setup

1. Clone the repository

git clone https://github.com/yourusername/TaskFlow.git
cd TaskFlow

2. Database Setup Create a new project in Supabase. Open their SQL Editor and execute the database_schema.sql file located in the root of this repository to create all tables and relationships.

3. Environment Variables Configure your environment variables for both the client and server. Reference the Environment Variables section below for details.

4. Start the Backend

cd server
npm install
npm run dev

The server will run on http://localhost:5000

5. Start the Frontend

cd client
npm install
npm run dev

The client will run on http://localhost:5173

Environment Variables

Server (server/.env)

• PORT - The port the Express server will run on (default: 5000).
• SUPABASE_URL - Your Supabase project URL.
• SUPABASE_ANON_KEY - Your Supabase publishable API key for database interactions.
• SUPABASE_SERVICE_ROLE_KEY - Your Supabase secret key (Optional, keep secure).

Client (client/.env.local)

• VITE_API_URL - The base URL of your backend server (e.g., http://localhost:5000/api).
• VITE_SUPABASE_URL - Your Supabase project URL.
• VITE_SUPABASE_ANON_KEY - Your Supabase publishable API key.

Project Structure

TaskFlow/
├── client/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── layouts/
│   │   ├── pages/
│   │   ├── routes/
│   │   ├── services/
│   │   ├── store/
│   │   ├── styles/
│   │   └── utils/
│   ├── index.html
│   └── vite.config.js
├── server/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   ├── validators/
│   └── server.js
└── database_schema.sql

Deployment

The application is structured to be deployed independently:

• Frontend: Can be deployed to services like Vercel, Netlify, or AWS Amplify. Ensure environment variables are set in the deployment dashboard and build command is npm run build.
• Backend: Can be deployed to services like Render, Heroku, or DigitalOcean App Platform.
• Database: Hosted on Supabase (PostgreSQL).

Security Practices

• Authentication: Sessions are managed securely via Supabase Auth.
• Protected Routes: Both the React frontend and Express backend verify authentication state before allowing access to private data.
• Validation: Backend controllers validate the presence of required fields before executing database queries.
• Error Handling: A centralized Express error middleware ensures stack traces are never leaked in production environments.
• Environment Protection: API keys and environment variables are strictly ignored in .gitignore.

Future Improvements

• Connect the frontend drag-and-drop state directly to the backend task API endpoints.
• Build full CRUD interfaces for Workspaces, Projects, and Columns.
• Add real-time task updates using WebSockets or Supabase Realtime subscriptions.
• Implement rich text comments and file attachments on tasks.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

• Name: Abhilash Shah
• GitHub: @shahabhilash