Modern Task Management SaaS Built with Next.js 15, TypeScript, and nmw-core design system
TaskFlow is a professional task management application that helps teams and individuals stay organized and productive. Built on the nmw-app-starter boilerplate to demonstrate a real-world SaaS dashboard application.
- ✅ Complete CRUD - Create, read, update, and delete tasks
- ✅ Task Priority - Low, Medium, High priority levels with color coding
- ✅ Task Status - Todo, In Progress, Completed workflow
- ✅ Due Dates - Set and track task deadlines
- ✅ Real-time Search - Instant search across titles and descriptions
- ✅ Advanced Filters - Filter by status and priority
- ✅ Smart Sorting - 5 sorting options (newest, oldest, priority, due date)
- ✅ TaskFlow Brand - Slate/Cyan/Emerald color palette (professional, modern)
- ✅ Gradient StatsCards - Beautiful stats with subtle gradients
- ✅ Dark Mode - SSR-safe theme switching with Slate backgrounds
- ✅ Responsive Design - Works seamlessly on mobile, tablet, and desktop
- ✅ Command Palette - Quick navigation with ⌘K / Ctrl+K
- ✅ TypeScript - Strict mode, full type safety
- ✅ State Management - Zustand with localStorage persistence
- ✅ Next.js 15 - App Router, React Server Components
- ✅ nmw-core - Professional design system
- ✅ Lucide Icons - Beautiful, consistent icons
- Node.js 18+ (LTS recommended)
- npm or yarn
# 1. Navigate to TaskFlow
cd demos/taskflow
# 2. Install dependencies
yarn install
# 3. Run development server
yarn dev
# 4. Open in browser
open http://localhost:3000/- Redirects to dashboard/dashboard- Main dashboard with stats and recent tasks/dashboard/tasks- Complete task management interface (CRUD)/dashboard/settings- Settings page/login- Login page (UI only)/signup- Signup page (UI only)
taskflow/
├── app/
│ ├── dashboard/
│ │ ├── page.tsx # Dashboard with stats
│ │ ├── tasks/
│ │ │ ├── page.tsx # Tasks CRUD interface
│ │ │ └── TaskModal.tsx # Create/Edit task modal
│ │ └── settings/ # Settings pages
│ ├── login/ # Auth pages (UI only)
│ └── signup/
│
├── components/
│ ├── layout/ # Sidebar, Header, ThemeToggle
│ └── dashboard/ # StatsCard, DataTable, CommandPalette
│
├── lib/stores/
│ └── taskStore.ts # Zustand store with Task CRUD
│
├── nmw-core/ # Shared design system
└── BRAND_IDENTITY.md # TaskFlow brand guidelines
| Color | Value | Usage |
|---|---|---|
| Primary | Slate 700 (#334155) |
Buttons, emphasis |
| Secondary | Cyan 500 (#06B6D4) |
Links, highlights, focus rings |
| Accent | Emerald 500 (#10B981) |
Success states, completed tasks |
- Font: Inter (sans-serif) - Modern, professional, excellent readability
- Weights: 400 (body), 500 (labels), 600 (headings), 700 (page titles)
- Clean & Minimal - Focus on content, not decoration
- Data-first - Stats and metrics are prominent
- Professional - Suitable for teams and productivity
- Modern - Contemporary design with subtle gradients
The dashboard provides a quick glance at your task management:
-
Stats Cards with gradient backgrounds
- Total Tasks
- Completed Tasks (with completion rate)
- In Progress Tasks
- To Do Tasks
-
Recent Tasks list with status and priority badges
-
Chart Placeholder ready for data visualization
Complete task management with:
Filters & Search:
- Real-time search across title and description
- Filter by Status: All, Todo, In Progress, Completed
- Filter by Priority: All, Low, Medium, High
- Sort by: Newest, Oldest, Priority (High→Low), Priority (Low→High), Due Date
Task Table:
- Title and description
- Status badge (color-coded)
- Priority badge (color-coded)
- Due date
- Actions: Edit and Delete
Task Modal:
- Create new tasks
- Edit existing tasks
- Set title, description, status, priority, due date
Press ⌘K (Mac) or Ctrl+K (Windows/Linux) to open:
- Quick navigation to Dashboard, Tasks, Settings
- Actions: New Task, Toggle Theme
- Search tasks by title or description
- Keyboard navigation with arrows + Enter
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.5.6 | React framework with App Router |
| React | 18.3.1 | UI library |
| TypeScript | 5 | Type safety |
| Tailwind CSS | 3.4.18 | Utility-first styling |
| Zustand | 5.0.8 | State management |
| next-themes | 0.4.6 | Dark mode (SSR-safe) |
| cmdk | 1.1.1 | Command palette |
| date-fns | 4.1.0 | Date formatting |
| lucide-react | 0.546.0 | Icons |
yarn dev # Development server (http://localhost:3000)
yarn build # Production build
yarn start # Production server
yarn typecheck # TypeScript validation
yarn lint # ESLintTaskFlow is perfect for:
- Personal Task Management - Track your daily todos and projects
- Team Collaboration - Shared task board (with auth/DB integration)
- Project Planning - Organize tasks by priority and deadline
- Productivity Tracking - Monitor completion rates and progress
TaskFlow includes auth UI pages (login/signup) but no backend. Integrate with:
Replace Zustand localStorage with a real database:
-
Prisma + PostgreSQL
yarn add prisma @prisma/client npx prisma init
-
Supabase
yarn add @supabase/supabase-js
Ideas to extend TaskFlow:
- Assignees - Assign tasks to team members
- Labels/Tags - Categorize tasks
- Subtasks - Break down complex tasks
- Comments - Collaborate on tasks
- File Attachments - Add documents to tasks
- Activity Log - Track task history
- Calendar View - Visualize tasks by due date
- Notifications - Email/push notifications for deadlines
- Reports - Analytics and productivity insights
Edit app/globals.css:
:root {
--color-primary: 51 65 85; /* Your primary color */
--color-secondary: 6 182 212; /* Your secondary color */
--color-accent: 16 185 129; /* Your accent color */
}- Update
BRAND_IDENTITY.mdwith your guidelines - Edit
app/globals.csstokens - Change logo in
components/layout/Sidebar.tsx - Update
package.jsonmetadata
- Brand Identity Guide - TaskFlow visual identity
- nmw-core Specs - Design system documentation
- Next.js Docs - Next.js framework
- Zustand Docs - State management
TaskFlow was built to demonstrate:
✅ Real-world SaaS dashboard application ✅ Complete CRUD operations with Zustand ✅ Advanced filtering, search, and sorting ✅ Professional UI with brand identity ✅ Dark mode implementation ✅ Responsive design patterns ✅ Command palette integration
This is a reference implementation showing how to use nmw-app-starter boilerplate for a production-ready task management app.
This project is part of the NMW Studios design system showcase.
Built with ❤️ by NMW Studios
🎯 TaskFlow - Stay organized, stay productive.