A full-featured, real-time Kanban-style task management application built with React, TypeScript, and Supabase. Designed for individuals and small teams to organize, prioritize, and track tasks through customizable workflow stages.
Live Demo: https://taskflow-kanban-gules.vercel.app
- Features
- Advanced Features
- Tech Stack
- Getting Started
- Database Setup
- Project Structure
- How to Use
- Deployment
- Kanban Board with 4 Columns — Tasks are organized into To Do, In Progress, In Review, and Done columns, providing a clear visual representation of your workflow.
- Create, Read, Update, Delete (CRUD) — Full task management with title, description, priority levels, status, and due dates.
- Drag & Drop — Seamlessly move tasks between columns using intuitive drag-and-drop powered by @hello-pangea/dnd. Task positions persist to the database.
- Supabase Backend — All data is stored in a PostgreSQL database via Supabase with Row Level Security (RLS) ensuring data isolation per user.
- Anonymous Authentication — Instant access with no sign-up required. Supabase anonymous auth automatically creates a session, so users can start managing tasks immediately.
All 7 advanced features from the assessment have been implemented:
Tasks can be assigned one of three priority levels: Low, Normal, or High. Each priority is visually distinguished with a colored badge on the task card (green for low, blue for normal, red for high). Priority can be set during task creation and modified in the task detail modal. Tasks display their priority prominently, making it easy to identify what needs attention first.
Every task supports an optional due date. The system provides intelligent visual indicators:
- Overdue — Tasks past their due date display a red warning badge and the due date input highlights in red.
- Due Today — Tasks due today show an amber/yellow warning indicator.
- Upcoming — Future due dates display normally with a calendar icon.
- Completed tasks — Due date warnings are suppressed for tasks in the Done column.
The Board Stats bar also shows a count of overdue tasks across all columns.
A powerful search and filter system in the header allows you to:
- Search — Real-time text search across task titles and descriptions.
- Filter by Priority — Dropdown to show only Low, Normal, or High priority tasks.
- Filter by Label — Dropdown to show only tasks tagged with a specific label.
- Filter by Assignee — Dropdown to show only tasks assigned to a specific team member.
All filters work simultaneously, so you can combine them (e.g., show only high-priority tasks assigned to "Alice" with the "Bug" label).
Create team members from the header's Team panel and assign them to tasks:
- Add/Remove Team Members — Create named team members with auto-assigned colors.
- Assign to Tasks — In the task detail modal, toggle team members on or off for any task.
- Visual Avatars — Assigned members appear as colored avatar circles on task cards, showing the first letter of their name.
- Many-to-Many Relationship — A task can have multiple assignees, and a member can be assigned to multiple tasks.
Create custom labels from the header's Labels panel and apply them to tasks:
- Create/Delete Labels — Define labels with custom names and colors.
- Apply to Tasks — Toggle labels on or off in the task detail modal.
- Visual Label Chips — Applied labels appear as colored chips on task cards for quick identification.
- Filter by Label — Use the label filter dropdown to view tasks by label.
Each task has a dedicated Comments tab in its detail modal:
- Add Comments — Type a comment and press Enter or click Send.
- View Comment History — All comments are displayed with relative timestamps (e.g., "2 minutes ago").
- Delete Comments — Remove any comment with a single click.
- Comment Count — The Comments tab displays the total number of comments for the task.
Every significant action on a task is automatically recorded in the Activity tab:
- Status Changes — Logged when a task moves between columns (via drag-and-drop or manual status change).
- Task Edits — Logged when title, description, priority, or due date is modified.
- Assignments — Logged when team members are assigned or unassigned.
- Label Changes — Logged when labels are added or removed.
- Timestamps — Each activity entry shows a relative timestamp.
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite 8 |
| Styling | Tailwind CSS v4 + Custom CSS |
| Drag & Drop | @hello-pangea/dnd |
| Backend | Supabase (PostgreSQL + Auth + RLS) |
| Icons | Lucide React |
| Date Utils | date-fns |
| Deployment | Vercel |
- Node.js 18+ and npm
- A Supabase account (free tier works)
# Clone the repository
git clone https://github.com/rishika7006/taskflow-kanban.git
cd taskflow-kanban
# Install dependencies
npm install
# Create .env file with your Supabase credentials
cp .env.example .env
# Edit .env and add your VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
# Start development server
npm run devThe app will be available at http://localhost:5173.
Create a .env file in the project root:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
Go to supabase.com, create a new project, and note your project URL and anon key from Settings → API.
In your Supabase dashboard, go to Authentication → Providers → Anonymous Sign-In and enable it. This allows users to start using the app immediately without creating an account.
Open the SQL Editor in your Supabase dashboard and execute the contents of supabase-schema.sql. This creates:
- 7 tables:
tasks,team_members,task_assignees,labels,task_labels,comments,activity_log - Row Level Security (RLS) policies on all tables ensuring users can only access their own data
- Performance indexes on frequently queried columns
tasks — Core task data (title, description, status, priority, due_date, position)
team_members — Named team members with colors
task_assignees — Many-to-many: tasks ↔ team_members
labels — Custom labels with colors
task_labels — Many-to-many: tasks ↔ labels
comments — Task comments with timestamps
activity_log — Automatic activity tracking
taskflow-kanban/
├── public/
├── src/
│ ├── components/
│ │ ├── Board.tsx # Drag-and-drop Kanban board with 4 columns
│ │ ├── BoardStats.tsx # Dashboard stats bar (total, in-progress, done, overdue)
│ │ ├── CreateTaskModal.tsx # Modal form for creating new tasks
│ │ ├── Header.tsx # Search, filters, team management, label management
│ │ ├── TaskCard.tsx # Individual task card with labels, avatars, priority badge
│ │ └── TaskDetailModal.tsx # Full task detail view with tabs (Details, Comments, Activity)
│ ├── hooks/
│ │ ├── useAuth.ts # Anonymous authentication hook
│ │ └── useTasks.ts # All CRUD operations and data fetching
│ ├── lib/
│ │ └── supabase.ts # Supabase client initialization
│ ├── types/
│ │ └── index.ts # TypeScript types, constants, and configuration
│ ├── App.tsx # Root component with state management and filtering
│ ├── index.css # Tailwind v4 theme + custom component styles
│ └── main.tsx # Entry point
├── supabase-schema.sql # Complete database schema with RLS policies
├── .env # Environment variables (not committed)
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
Click the "+ Add Task" button at the bottom of any column, or use the "+ New Task" button in the header. Fill in the title (required), description, priority, status, and due date, then click Create Task.
Drag and drop a task card from one column to another. The status updates automatically and the change is persisted to the database. You can also change status from the task detail modal's status dropdown.
Click any task card to open its detail modal with three tabs:
- Details — Edit title, description, status, priority, due date. Manage assignees and labels.
- Comments — Add, view, and delete comments on the task.
- Activity — View the full history of changes made to the task.
Click the Team button in the header to open the team panel. Type a name and click "Add" to create a new team member. Members can then be assigned to tasks from the task detail modal's Details tab.
Click the Labels button in the header to open the labels panel. Create labels with custom names and colors. Apply labels to tasks from the task detail modal. Use the label filter in the header to view tasks by label.
Use the search bar to find tasks by title or description. Use the Priority, Label, and Assignee dropdown filters to narrow down your view. All filters combine together for precise results.
The stats bar at the top of the board shows: total tasks, tasks in progress, completion percentage, and number of overdue tasks — giving you a quick overview of project health.
- Push your code to GitHub.
- Go to vercel.com and import the GitHub repository.
- Add environment variables in the Vercel dashboard:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
- Deploy. Vercel will auto-detect Vite and configure the build automatically.
npm run build # Outputs to dist/
npm run preview # Preview the production build locallyRishika Vaish GitHub: @rishika7006
This project was built as part of the Next Play Games Software Development Internship Assessment.