Tech Stack

A breakdown of every technology used in the foundation and why it was chosen.

Core

• Next.js 15 (App Router) — full-stack React framework
• React 19 — UI library
• TypeScript 5 — type safety across the entire codebase

Styling

• Tailwind CSS — utility-first CSS
• shadcn/ui — pre-built accessible components
• Radix UI — headless UI primitives
• class-variance-authority — variant-based component styling
• tailwind-merge — smart class merging

State & Data

• @tanstack/react-query — server state management (data fetching, caching, sync)
• Zustand — lightweight client state (UI state only)
• react-hook-form + Zod — forms with schema validation

Database

• PostgreSQL (hosted on Supabase) — relational database
• Drizzle ORM — type-safe SQL queries
• pg driver — Node.js PostgreSQL client

Authentication

• Supabase Auth — authentication provider
• @supabase/ssr — server-side auth helpers for Next.js

UI Libraries

• lucide-react — icon library
• framer-motion — animations
• @dnd-kit — drag & drop
• cmdk — command menu (⌘K)
• react-day-picker — date picker

Key Patterns

Server Components First

All pages use Server Components by default. Client Components are added only when interactivity is required (forms, state, event handlers).

Database Access

Every database query follows a strict pattern:

requireUser() → withAuthDb(jwt) → Drizzle Query → PostgreSQL + RLS

State Management

Multi-tenancy

• Shared-schema model — all tenants live in the same database
• Every business table has a tenant_id column
• PostgreSQL Row Level Security (RLS) enforces data isolation