DemoBuy

Getting Started with Full-Stack Kanban PM Kit

Last updated on 2026-09-07

The Full-Stack Kanban PM Kit is a production-ready Next.js project management application wired to a real Supabase backend. It includes 44 routes covering a complete PM workspace with Kanban boards, sprint cycles, modules, timelines, goals with OKRs, wiki pages, team workload tracking, and workspace analytics -- all reading from and writing to a Supabase database with 31 tables.

What's Included

  • 44 routes -- dashboard, projects (board, list, timeline, calendar, backlog), cycles, modules, pages, task detail, goals, analytics, activity, inbox, team, templates, views, roadmap, workload, search, settings, auth, and utility pages
  • 31 database tables -- with migrations, row-level security, triggers, and per-project task numbering
  • Supabase Auth -- email/password, Google OAuth, and GitHub OAuth
  • Single-workspace model -- all team members see all project data; Owner and Admin roles manage workspace settings
  • Kanban boards -- drag-and-drop task management with real database persistence via @hello-pangea/dnd
  • Sprint cycles -- time-boxed iterations with velocity tracking, burndown charts, and completion metrics
  • Modules -- feature-scoped groupings of tasks with lead assignment and date ranges
  • Goals / OKRs -- goal tracking with key results, progress calculation, and status indicators
  • Server Actions -- secure mutations for all CRUD operations across 16 action files
  • Seven chart types -- burndown, burnup, cumulative flow, velocity, cycle time, distribution donut, and workload bar
  • Light & dark mode -- oklch design tokens with automatic theme switching
  • WCAG AA -- accessible across every screen

How It's Different from the Frontend-Only Kit

Aspect Frontend-Only Kit Full-Stack Kit (this)
Routes 35+ 44
Data source data/seed.ts (hardcoded) Supabase database
Auth Mock login forms Supabase Auth with OAuth
Kanban board Client-side drag-and-drop only Drag-and-drop with DB writes via Server Actions
Tasks Static list Full CRUD with subtasks, comments, labels, and status tracking
Cycles / Sprints Mock data Real CRUD with velocity calculation and burndown data
Modules Static list CRUD with task assignment and lead tracking
Goals Mock OKRs Real CRUD with key results and auto-progress calculation
Analytics Static chart data Aggregate Supabase queries with daily metrics, burndown points, velocity, and cumulative flow
Team Mock avatars Real team management with role-based access (Owner, Admin, Member, Guest)
Pages / Wiki UI-only CRUD with nested page hierarchy

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • Supabase account -- free at supabase.com
  • A code editor -- VS Code recommended

No Stripe account is needed. This kit does not include payment processing.

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> kanban-fullstack
cd kanban-fullstack

# 2. Install dependencies
pnpm install

# 3. Copy environment variables
cp .env.example .env.local

# 4. Fill in your Supabase keys in .env.local

# 5. Run the Supabase migrations (see Installation guide)

# 6. Start the dev server
pnpm dev

Open http://localhost:3000 to see the PM dashboard.

Kit Overview

Area Routes Key Features
Dashboard 1 KPI stats cards, recent activity feed, project overview
Projects 16 Board, list, timeline, calendar, backlog, cycles, cycle detail, modules, module detail, pages, page detail, task detail, automations, analytics, settings, create project
My Work 1 Personal task queue filtered by assignee
Goals 1 OKR tracking with key results and progress rings
Activity 1 Workspace-wide activity feed with filters
Inbox 1 Notification inbox with read/unread management
Analytics 1 Workspace-level analytics with charts
Roadmap 1 Cross-project roadmap view
Workload 1 Team workload distribution visualization
Views 1 Saved custom views with filters
Templates 1 Project templates for quick setup
Search 1 Global search across tasks
Team 2 Team list and member detail
Settings 8 General, members, labels, notifications, integrations, API, import/export, appearance, billing
Auth 5 Login, register, forgot password, OAuth callback, email confirm
Utility 2 404 page, onboarding wizard

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Supabase Database, auth, and real-time
@supabase/ssr Server-side Supabase client with cookies
@hello-pangea/dnd Drag-and-drop for Kanban boards
Recharts Charts for analytics, burndown, velocity, and cumulative flow
date-fns Date formatting and utilities
Zod Schema validation for forms
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications
cmdk Command palette (Cmd+K)

Next Steps

Next

Installation