DemoBuy

Installation

Last updated on 2026-09-02

This guide walks you through setting up the Full-Stack CRM 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> crm-fullstack
cd crm-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 pipeline drag-and-drop
recharts Dashboard and reporting charts
date-fns Date formatting
zod Form validation

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_APP_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 19 tables (profiles, companies, contacts, tags, contact_tags, company_tags, deal_tags, pipelines, pipeline_stages, deals, deal_products, tasks, activities, emails, email_templates, email_sequences, email_sequence_steps, notifications, crm_settings)
  2. supabase/migrations/002_rls.sql -- Sets up row-level security policies with shared workspace model
  3. supabase/migrations/003_triggers.sql -- Adds triggers for profile auto-creation, updated_at timestamps, activity auto-logging on deal stage changes, and contact last_contacted updates
  4. supabase/migrations/004_storage.sql -- Creates the crm-assets storage bucket for avatars and company logos

Then run the seed data:

  1. supabase/seed.sql -- Inserts 6 team members, 10 companies, 20 contacts, 2 pipelines with stages, 16 deals, 12 tasks, 20 activities, 12 emails, 6 templates, 3 sequences, 10 notifications, and 1 CRM settings row

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 CRM dashboard.

Step 8 -- Verify the Setup

Navigate through key pages to confirm everything is connected:

  • / -- Dashboard with sales metrics from Supabase
  • /contacts -- Contact list with full-text search
  • /deals -- Kanban pipeline with drag-and-drop
  • /login -- Sign in with email or OAuth
  • /reports -- Sales analytics from aggregate queries
  • /settings/team -- Team management (login as admin@example.com / 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 four 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_SERVICE_ROLE_KEY is set in .env.local. The Server Action that updates deal stages uses the admin client.

TypeScript errors after installation:

npx tsc --noEmit

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

Previous

Getting Started

Next

Project Structure