🚀 Task Tracker App — Documentation
A modern, clean, fully functional Task Management Application built using:
Next.js (App Router)
TypeScript
Redux Toolkit + Redux Persist
ShadCN UI Components
Drag-and-Drop (hello-pangea/dnd)
TailwindCSS
This app allows users to create, update, delete, filter, search, reorder, and analyze daily tasks.
📦 Features Overview ✅ Core Features
Add / Edit / Delete tasks
Mark as Completed (with switch toggle)
Search tasks
Filter by Priority & Category
Color-coded priorities
Multiple tags support
Drag-and-drop task reordering
Task completion stats (All, Active, Completed)
🎨 UI & UX Features
Modern ShadCN UI components
Responsive & mobile friendly
Smooth drag animations
Status ribbon when task is completed
Priority indicator dot
Dialog-based Task Form
Delete confirmation dialog
Dashboard-style stats with circular progress
🧠 State Management
Redux Toolkit for global state
Redux Persist (sessionStorage) for state persistence
Slice-based architecture:
list → all tasks
search → search text
priorityFilter → "all" | "low" | "medium" | "high"
categoryFilter → "all" | category name
🛠 Technology Stack Layer Technology Framework Next.js 16 UI ShadCN + Tailwind State Redux Toolkit + Persist Drag & Drop @hello-pangea/dnd Icons Lucide Icons Language TypeScript
⚙️ Setup Instructions 1️⃣ Clone the repository git clone cd task-tracker
2️⃣ Install dependencies npm install
3️⃣ Install ShadCN components (if needed) npx shadcn-ui init
4️⃣ Install drag-and-drop library npm install @hello-pangea/dnd
5️⃣ Run the development server npm run dev
Visit 👉 http://localhost:3000
🚀 How It Works 📝 Adding Tasks
Click Add Task
Fill title, priority, category
Optional: description + tags
Submit to save in Redux state
✏️ Editing Tasks
Click Edit icon
Update any field
Save updates (Redux state updated)
🔍 Filtering / Search
Search works across:
Title
Description
Category
Filter by:
Priority
Category
🔄 Drag-and-Drop Reordering
Tasks can be reordered by dragging
New order is instantly saved in Redux
📊 Stats Section
Shows All, Active, Completed
Circular progress = completed / total
🎯 Summary
This project is a complete, production-ready Task Tracker built with clean architecture and scalable Redux state management. It demonstrates:
Modern UI
Smooth UX
State persistence
Reusability of components
Strong TypeScript patterns
Drag-and-drop task workflow