System Overview
Client Portal is a legal recruitment intelligence platform built on a serverless architecture. The frontend is a React single-page application served from Netlify's CDN. All backend logic runs on Supabase Cloud -- PostgreSQL for data, Supabase Auth for identity, Edge Functions (Deno) for integrations, and Storage for call recordings.
Architecture Diagram
Tech Stack
Frontend
| Technology | Version | Purpose |
|---|---|---|
| React | 18 | UI framework |
| TypeScript | 5.x | Type safety |
| Vite | 7.3 | Build tool and dev server |
| shadcn/ui | -- | Component library (49 components, built on Radix) |
| Tailwind CSS | 3.4 | Utility-first styling |
| TanStack React Query | 5 | Server state management and caching |
| React Router | v6 | Client-side routing |
| React Hook Form | -- | Form handling |
| Zod | -- | Runtime validation |
Backend (Supabase Cloud)
| Service | Purpose |
|---|---|
| PostgreSQL 14.1 | Primary database with RLS |
| Supabase Auth | Email/password authentication, JWT tokens |
| Supabase Real-time | Live data subscriptions via WebSocket |
| Supabase Storage | File storage for call recordings (call-recordings bucket) |
| Edge Functions | 39 Deno functions for external integrations |
External Services
| Service | Purpose |
|---|---|
| GoHighLevel (GHL) | Outbound calling execution, contact management |
| Blitz API v2 | Attorney enrichment (email, phone, LinkedIn data) |
| Google Calendar | OAuth calendar integration for scheduling |
| Microsoft Outlook | OAuth calendar integration for scheduling |
| Anthropic Claude | AI call transcript summarization |
| Resend | Transactional email (booking confirmations, reminders) |
| Close CRM | Lead management for sales pipeline |
| Apollo | Company and sales prospect enrichment |
Deployment
| Layer | Platform |
|---|---|
| Frontend | Netlify (static site, auto-deploy on push to main) |
| Backend | Supabase Cloud (managed PostgreSQL + Edge Functions) |
| DNS | Custom domain: app.1hourrecruitment.com |
Key Architectural Decisions
No API Layer
The React client talks directly to Supabase. There is no Express, Next.js API routes, or custom REST/GraphQL layer. This means:
- Authorization is enforced by RLS -- PostgreSQL Row Level Security policies check the user's JWT on every query.
- Data fetching uses the Supabase client --
supabase.from('table').select()directly from React components. - Edge functions are only for external integrations -- They handle webhook ingestion, OAuth callbacks, API calls to third-party services, and AI processing.
Edge Functions for Side Effects
Edge functions are invoked for operations that cannot be performed client-side:
- Webhook endpoints -- GHL call webhooks, Fathom meeting webhooks, Close CRM webhooks
- OAuth flows -- Google/Outlook calendar token exchange
- External API calls -- Blitz enrichment, GHL sync, Close lead creation, Apollo search
- AI processing -- Claude transcript summarization
- Email sending -- Resend API for booking notifications and reminders
React Query as State Manager
All server state is managed through TanStack React Query. There is no Redux, Zustand, or other client-side state management library. React Query provides:
- Automatic caching and cache invalidation
- Background refetching
- Optimistic updates for mutations
- Loading and error states