DemoBuy

Installation

Last updated on 2026-09-07

This guide walks you through setting up the Full-Stack Kanban PM Kit from scratch, including Supabase database configuration and optional OAuth setup.

System Requirements

  • Node.js 18.17 or later
  • pnpm (recommended), npm, or yarn
  • Git for cloning the repository

Step 1 -- Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> kanban-fullstack
cd kanban-fullstack

Step 2 -- Install Dependencies

pnpm install

Key Dependencies

Package Purpose
next 16.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework with oklch tokens
@supabase/supabase-js Supabase client
@supabase/ssr Server-side Supabase with cookies
@hello-pangea/dnd Kanban board drag-and-drop
recharts Analytics and burndown charts
date-fns Date formatting
zod Form validation
cmdk Command palette (Cmd+K)

Step 3 -- Create a Supabase Project

  1. Go to supabase.com and create a new project
  2. Wait for the project to finish provisioning
  3. Go to Settings > API and copy:
    • Project URL (e.g., https://xxxxxxxxxxx.supabase.co)
    • anon public key (safe for client-side)
    • service_role key (server-side only, never expose to client)

Step 4 -- Configure Environment Variables

Copy the example file:

cp .env.example .env.local

Fill in your keys:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# App
NEXT_PUBLIC_SITE_URL=http://localhost:3000

No Stripe keys are needed. This kit does not include payment processing.

Step 5 -- Run Database Migrations

Go to your Supabase project's SQL Editor and run these migration files in order:

  1. supabase/migrations/001_schema.sql -- Creates all 31 tables (profiles, workspaces, projects, project_members, labels, cycles, modules, tasks, task_labels, cycle_tasks, module_tasks, subtasks, task_comments, goals, key_results, pages, activities, notifications, saved_views, automation_rules, milestones, api_keys, webhooks, integration_configs, project_templates, notification_preferences, daily_metrics, burndown_points, velocity_points, cumulative_flow_points, contribution_data), plus 14 enum types, indexes, constraints, the set_updated_at() trigger function, and enables RLS on all tables
  2. supabase/migrations/002_rls.sql -- Sets up row-level security policies with the single-workspace model, including helper functions is_workspace_member() and is_workspace_admin()
  3. supabase/migrations/003_triggers.sql -- Adds triggers for profile auto-creation on signup, updated_at auto-update on tasks/projects/profiles/pages, auto-incrementing task numbers per project (with advisory lock), and automatic recalculation of projects.issue_count and projects.completed_count

Then run the seed data:

  1. supabase/seed.sql -- Inserts 10 team members, 1 workspace, 6 projects, project memberships, 15 labels, 64 tasks with subtasks and comments, 8 cycles, 8 modules, 5 goals with 13 key results, 12 pages, 6 saved views, 25 activities, 27 notifications, 6 milestones, 8 automation rules, 3 API keys, 3 webhooks, 4 integration configs, 6 project templates, notification preferences, and analytics data (daily metrics, burndown points, velocity points, cumulative flow, contribution data)

Tip: You can also use the Supabase CLI: supabase db push if you have it set up locally.

Step 6 -- Configure OAuth Providers (Optional)

For Google and GitHub social login:

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth 2.0 credentials
  3. Set redirect URI: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > Google

GitHub OAuth

  1. Go to GitHub Developer Settings
  2. Create a new OAuth App
  3. Set callback URL: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > GitHub

Step 7 -- Start the Dev Server

pnpm dev

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

Step 8 -- Verify the Setup

Navigate through key pages to confirm everything is connected:

  • / -- Dashboard with KPI stats from Supabase
  • /projects -- Project list with status indicators
  • /projects/[id]/board -- Kanban board with drag-and-drop
  • /projects/[id]/cycles -- Sprint cycles with velocity tracking
  • /goals -- OKR tracking with key results
  • /analytics -- Workspace analytics with charts
  • /login -- Sign in with email or OAuth
  • /settings/members -- Team management (login as sarah@acme.io / password123)

Available Scripts

Command Description
pnpm dev Start dev server
pnpm build Create production build
pnpm start Run production server
pnpm lint Run ESLint checks

Troubleshooting

Supabase connection errors:

Verify your .env.local has the correct NEXT_PUBLIC_SUPABASE_URL and keys. The anon key is safe for client-side use.

Empty dashboard or missing data:

Make sure you ran all three migration files and seed.sql in order. The seed data depends on the schema, RLS, and triggers being in place.

OAuth redirect errors:

Check that your OAuth callback URL in the provider settings matches your Supabase project URL exactly: https://your-project.supabase.co/auth/v1/callback.

Kanban drag-and-drop not persisting:

Confirm the Supabase environment variables are set in .env.local. The Server Action that updates task status uses the server client with RLS.

Task numbers not auto-incrementing:

Ensure 003_triggers.sql was run after the schema. The assign_task_number trigger uses an advisory lock to safely assign the next number per project.

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.

Previous

Getting Started

Next

Project Structure