A modern, full-featured task management app with real-time sync, drag-and-drop, and a beautiful glassmorphism UI.
Live Demo : todo-list-lilac-sigma.vercel.app
- Create, edit, and delete tasks with inline editing
- Mark tasks as complete / active with one click
- Star important tasks to keep them at the top of your mind
- Set priority levels (High / Medium / Low) with color-coded indicators
- Reorder tasks freely by dragging and dropping
- Custom sort order is persisted to the database
- Smooth visual feedback and animations during drag
- Full-text search across all tasks in real time
- Filter by status: All / Active / Completed / Starred
- Attach images to any task
- Preview thumbnails inline; click to view full resolution
- Automatic cleanup when a task is deleted
- At-a-glance stats: total tasks, active, completed, completion rate
- Animated progress bar showing overall progress
- Changes sync instantly across all open sessions via Supabase Realtime (PostgreSQL CDC)
- Cloud-persisted data — pick up where you left off on any device
- Email / password authentication powered by Supabase Auth
- Password recovery and sign-up flows included
- Each user's data is isolated and protected by Row Level Security
- Responsive layout from mobile to desktop
- Animated gradient background with glassmorphism cards
- Loading spinners, disabled states, and friendly error messages
- Keyboard shortcuts — press Enter to quickly add a task
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router, React 19) |
| Language | TypeScript |
| Backend / DB | Supabase (PostgreSQL + Auth + Storage + Realtime) |
| Styling | Tailwind CSS + shadcn/ui + Radix UI |
| Drag & Drop | dnd-kit |
| Deployment | Vercel |