Agentic PM — Mini Project Management Board

A realistic Trello/Jira-style project management app built as the sample codebase for The Agentic PM course.

Throughout the course, you'll use this codebase to practice AI-assisted product management workflows — including MCP integrations, codebase diagramming, AI-driven exploration, and more. The scenario: you work for a PM tool startup, and this is your product's codebase.

Tech Stack

• Next.js 16 (App Router, TypeScript)
• Tailwind CSS 4 + shadcn/ui components
• @dnd-kit — drag-and-drop Kanban board
• Recharts — dashboard analytics charts
• Local JSON storage (data/db.json) — no database setup needed

Getting Started

# Install dependencies
pnpm install

# Generate seed data (1 project, 5 team members, 18 tasks)
pnpm seed

# Start the dev server
pnpm dev

Open http://localhost:3000 — you'll land on the Projects page.

Features

Page	What it does
Projects (/projects)	Browse project cards, create new projects
Board (/projects/[id]/board)	Kanban board with 4 columns — drag tasks between statuses
Backlog (/projects/[id]/backlog)	Table view with filtering by status, priority, and assignee
Dashboard (/projects/[id]/dashboard)	Stats cards + bar charts for status, priority, and workload
Team (/team)	Team member cards showing task counts and story points

REST API

All data is exposed via REST endpoints — useful for MCP integrations and API exploration exercises.

Endpoint	Methods
/api/projects	GET, POST
/api/projects/[id]	GET, PATCH, DELETE
/api/tasks	GET (?projectId, ?status, ?priority), POST
/api/tasks/[id]	GET, PATCH, DELETE
/api/tasks/reorder	PATCH
/api/team	GET
/api/labels	GET
/api/dashboard/[projectId]	GET

Project Structure

app/                  → Pages and API routes (Next.js App Router)
components/
  ├── ui/             → shadcn/ui primitives (button, dialog, card, etc.)
  ├── layout/         → Sidebar, Header, ProjectTabs
  ├── board/          → KanbanBoard, KanbanColumn, TaskCard
  ├── tasks/          → TaskModal, BacklogTable, BacklogFilters
  ├── dashboard/      → StatsCards, StatusChart, PriorityChart, WorkloadChart
  ├── projects/       → ProjectCard, CreateProjectModal
  └── team/           → MemberCard
lib/                  → Database layer, constants, utilities
types/                → TypeScript interfaces
scripts/seed.ts       → Seed data generator
data/db.json          → Local JSON database (gitignored, generated by seed)

Seed Data

Running pnpm seed creates sample data with:

• 1 project — "Agentic PM App" (key: PM)
• 5 team members — Sarah Chen (PM), Marcus Johnson (FE), Aisha Patel (BE), Tom Wilson (Design), Elena Rodriguez (Full-Stack)
• 6 labels — Bug, Feature, Enhancement, Documentation, Design, Tech Debt
• 18 tasks — spread across all statuses with varied priorities, assignees, and due dates