Local Development Setup

How to set up the Client Portal development environment on your local machine.

Prerequisites

• Node.js 18+ (or Bun as an alternative package manager)
• Git for version control
• Supabase CLI (npm install -g supabase) for edge function development and database migrations
• Access to the 1-Hour-Automation GitHub organization

Clone and Install

# Clone the repo
git clone https://github.com/1-Hour-Automation/client-hub.git
cd client-hub

# Install dependencies
npm install

Alternatively, use Bun:

bun install

Environment Variables

Copy the example environment file and fill in the values:

cp .env.example .env

Required Variables

Variable	Description	Where to Get It
VITE_SUPABASE_URL	Supabase project URL	Supabase Dashboard > Settings > API
VITE_SUPABASE_ANON_KEY	Supabase anonymous key (public, safe for client)	Supabase Dashboard > Settings > API
SUPABASE_SERVICE_ROLE_KEY	Service role key (bypasses RLS -- scripts only)	Supabase Dashboard > Settings > API
BLITZ_API_KEY	Blitz API key for attorney enrichment	Blitz API dashboard
ANTHROPIC_API_KEY	Anthropic API key for AI summarization	Anthropic console (also set as Supabase secret)

caution

SUPABASE_SERVICE_ROLE_KEY has full database access and bypasses all RLS policies. Never expose it in client-side code. It is only used by scripts in the scripts/ directory.

Optional Variables

Variable	Description
VITE_APP_ENV	Environment identifier (development, staging, production)

Start the Dev Server

npm run dev

The app runs at http://localhost:5173 (Vite default port).

Hot module replacement is active -- changes to React components update in the browser instantly without a full page reload.

Build for Production

# Build
npm run build

# Preview the production build locally
npm run preview

The build output goes to dist/. This is what Netlify deploys.

Lint

npm run lint

Project Structure

Key directories to know:

client-hub/
├── src/
│   ├── pages/              # Page components (route targets)
│   ├── components/         # Reusable UI components
│   │   ├── ui/             # shadcn/ui base components (51 files)
│   │   ├── layout/         # AppLayout, Sidebar, TopBar
│   │   ├── guards/         # ProtectedRoute, RoleGuard
│   │   ├── sales/          # Internal sales section components
│   │   └── shared/         # DataTable, StatCard, EmptyState
│   ├── hooks/              # Custom React hooks
│   ├── integrations/
│   │   └── supabase/
│   │       ├── client.ts   # Supabase client initialization
│   │       └── types.ts    # TypeScript types (manually maintained)
│   └── lib/
│       ├── utils.ts        # Utility functions
│       └── sales-types.ts  # Sales-specific TypeScript types
├── supabase/
│   ├── functions/          # Edge functions (Deno)
│   ├── migrations/         # SQL migration files
│   └── config.toml         # Supabase configuration
├── scripts/                # CLI scripts (enrichment, analysis, data)
├── public/                 # Static assets
└── .env                    # Environment variables (not committed)

Working with Edge Functions Locally

Edge functions run in Deno, not Node. To develop and test them locally:

# Start the Supabase local development stack
supabase start

# Serve a specific function locally
supabase functions serve <function-name> --env-file .env

# Test with curl
curl -X POST http://localhost:54321/functions/v1/<function-name> \
  -H "Authorization: Bearer <anon-key>" \
  -H "Content-Type: application/json" \
  -d '{"key": "value"}'

Edge function source files are in supabase/functions/*/index.ts. Each function has its own directory.

Working with the Database

# Apply pending migrations
supabase db push

# Create a new migration
supabase migration new <description>

# Reset local database (destructive)
supabase db reset

info

The attorneys table was created via the Supabase dashboard, not through migration files. It will not appear in auto-generated types. Types for this table are manually maintained in src/integrations/supabase/types.ts.

Common Development Tasks

Task	Command
Start dev server	npm run dev
Build for production	npm run build
Preview production build	npm run preview
Run lint	npm run lint
Run enrichment (test)	npx tsx scripts/enrich-attorneys.ts --test
Deploy edge function	supabase functions deploy <name>
Apply migrations	supabase db push