DemoBuy

Getting Started with Full-Stack CRM Kit

Last updated on 2026-09-02

The Full-Stack CRM Kit is a production-ready Next.js customer relationship management application wired to a real Supabase backend. It includes 45 routes covering a complete CRM dashboard with contacts, companies, deals, pipeline management, tasks, email, and reporting -- all reading from and writing to a Supabase database.

What's Included

  • 45 routes -- dashboard, contacts, companies, deals, tasks, email, reports, settings, auth, and utility pages
  • 19 database tables -- with migrations, row-level security, triggers, and full-text search
  • Supabase Auth -- email/password, Google OAuth, and GitHub OAuth
  • Shared workspace model -- all team members see all CRM data; admins manage team and settings
  • Kanban pipeline -- drag-and-drop deal management with real database persistence
  • Server Actions -- secure mutations for all CRUD operations across 15 action files
  • Full-text search -- tsvector-powered search on contacts and companies
  • 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+ 45
Data source data/seed.ts (hardcoded) Supabase database
Auth Mock login forms Supabase Auth with OAuth
Pipeline Client-side drag-and-drop only Drag-and-drop with DB writes via Server Actions
Contacts Static list Full CRUD with full-text search and activity auto-logging
Deals Mock data Real CRUD with pipeline stage tracking and triggers
Email UI-only inbox Templates and sequences stored in Supabase
Reports Static chart data Aggregate Supabase queries
Team Mock avatars Real team management with role-based access
Search Client-side filter Full-text search via tsvector

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> crm-fullstack
cd crm-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 CRM dashboard.

Kit Overview

Area Routes Key Features
Dashboard 3 Sales dashboard, activity feed, notifications
Contacts 4 List, detail, create/edit, CSV import wizard
Companies 3 List, detail, create/edit
Deals 5 Kanban pipeline, detail, create/edit, pipeline settings, forecasting
Tasks 4 Task list, calendar, activity log, email templates
Reports 4 Sales overview, pipeline analytics, team performance, revenue breakdown
Email 3 Inbox, compose, sequences
Settings 4 General, team, integrations, billing
Auth 5 Login, register, forgot password, OAuth callback, email confirm
Utility 2 404, 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, storage, and real-time
@supabase/ssr Server-side Supabase client with cookies
@hello-pangea/dnd Drag-and-drop for Kanban pipeline
Recharts Dashboard and reporting charts
date-fns Date formatting and utilities
Zod Schema validation for forms
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications

Next Steps

Next

Installation