Looking for the backend? It’s available here 👇
📌 Setup & API Docs:
Head over to the backend repository and follow its README for complete installation, environment setup, and API usage details.
A modern, responsive, and feature-rich task management web app built with Next.js 14, React, and Tailwind CSS v4.1+.
This is the frontend for the Task Manager project.
- Next.js 14 App Router for fast, scalable routing
- Tailwind CSS v4.1+ for utility-first, dark mode-ready styling
- Manual and system dark mode toggle (no config needed)
- Authentication (login/signup) with JWT (via backend API)
A modern, responsive, and feature-rich task management web app built with Next.js 14, React, and Tailwind CSS v4.1+.
This is the frontend for the Task Manager project.
- ⚡ Next.js 14 App Router for fast, scalable routing
- 🎨 Tailwind CSS v4.1+ for utility-first, dark mode-ready styling
- 🌗 Manual & system dark mode toggle (no config needed)
- 🔐 Authentication (login/signup) with JWT (via backend API)
- ✅ Task CRUD: Add, edit, delete, and mark tasks as complete
- ⭐ Task priority: Set and edit priority (1-5), sort by priority
- 🟦 Drag & drop task reordering (with @hello-pangea/dnd)
- 📱 Responsive: Mobile-first, works great on all devices
- 🪄 Animated modals for adding tasks, with background blur
- 🧠 Context-based Auth and Dark Mode
- ✨ Beautiful UI with glassmorphism, gradients, and smooth transitions
frontend/
├── app/
│ ├── layout.tsx # Root layout, providers, global styles
│ ├── globals.css # Tailwind base styles
│ ├── page.tsx # Home page
│ ├── login/page.tsx # Login page
│ ├── signup/page.tsx # Signup page
│ └── tasks/page.tsx # Main task dashboard
├── components/
│ ├── Navbar.tsx # Top navigation bar
│ ├── TaskForm.tsx # Add/edit task form (modal)
│ ├── TaskItem.tsx # Single task display & edit
│ └── WaitForDarkMode.tsx# Client-side dark mode gate
├── context/
│ ├── AuthContext.tsx # Auth state/context
│ └── DarkModeContext.tsx# Dark mode state/context
├── lib/
│ └── api.ts # Axios instance for API calls
├── types/
│ └── index.d.ts # TypeScript types (Task, User, etc.)
└── public/ # Static assets (icons, images)
Next.js 14 (App Router, TypeScript)
React 18
Tailwind CSS v4.1+
TypeScript
- 🎬 Framer Motion (animations)
- 🟦 @hello-pangea/dnd (drag & drop)
Lucide React (icons)
- Uses Tailwind v4.1+ color-scheme-based dark mode (no config needed)
- 🌙 Toggle in Navbar, persists via localStorage
- All pages/components styled for both modes
- 📦 Install dependencies:
cd frontend npm install ▶️ Start the dev server:npm run dev
- 🔗 Connect to backend:
- The frontend expects a backend API (see
/lib/api.tsfor base URL) - Make sure your backend is running and CORS is enabled
- The frontend expects a backend API (see
app/tasks/page.tsx— 🗂️ Main dashboard, task list, add/edit modal, drag & drop, priority sortingcomponents/TaskForm.tsx— ➕ Add/edit task form, modal, priority selectcomponents/TaskItem.tsx— 📝 Task display, edit, delete, priority badgecontext/AuthContext.tsx— 🔐 Auth state, login/logout, user infocontext/DarkModeContext.tsx— 🌗 Dark mode state, toggle, persistencecomponents/Navbar.tsx— 🧭 Navigation, dark mode toggle, user menu
- No
.envneeded for frontend unless you want to override API base URL in/lib/api.ts.
Pull requests are welcome! Please open an issue or discussion for major changes.
MIT
| ☀️ Light Mode | 🌙 Dark Mode |
|---|---|
.png) |
.png) |
- Next.js Documentation — learn about Next.js features and API.
- Learn Next.js — interactive Next.js tutorial.
- Next.js GitHub — feedback and contributions welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.