A clean, responsive task manager built with Next.js, TypeScript, and Tailwind CSS.
🔗 Live demo: https://task-manager-livid-psi-61.vercel.app
- Add tasks with priority levels (high, medium, low)
- Set and edit due dates per task
- Mark tasks as complete / incomplete
- Edit tasks inline (text + due date)
- Delete tasks with undo support
- Filter by All / Active / Completed (with live counts)
- Multiple lists (Personal, Work, Shopping, etc.)
- Drag and drop to reorder tasks
- Progress bar showing completion percentage
- Overdue tasks highlighted with red border
- Confetti celebration when all tasks are done
- Dark mode with persistent preference
- Persists data via localStorage
- Smooth animations with Framer Motion
- Fully responsive (mobile + desktop)
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS v4
- Framer Motion
- @dnd-kit (drag and drop)
- canvas-confetti
git clone https://github.com/gupatel/task-manager.git
cd task-manager
npm install
npm run dev├── app/ → pages and global styles ├── components/ → TaskInput, FilterBar, TaskList, TaskCard, │ ListSidebar, ProgressBar, ThemeToggle, Toast ├── hooks/ → useTasks, useLists (all logic + localStorage) └── types/ → Task, Filter, Priority, TaskList types
- All task logic lives in
useTasksand list logic inuseLists— keeps components clean and focused on UI only - TypeScript interfaces defined upfront in
/types— enforces consistency across components - localStorage synced via
useEffect— simple persistence without a backend @dnd-kitused for accessible drag and drop with sortable strategy- Dark mode implemented via CSS class toggling on
<html>with Tailwind v4 custom variant