A warm, production-ready TanStack Start (SSR) template: type-safe file routing, server functions, authentication, and a Postgres data layer — wired and demonstrated end to end, not just installed.
- TanStack Start (SSR) · React 19 + React Compiler
- TanStack Router (file-based) + TanStack Query (SSR-integrated)
- Better Auth (email/password) · Drizzle ORM + PostgreSQL
- Tailwind CSS v4 + shadcn/ui (base-luma) + Hugeicons
- Biome (via Ultracite) · Vitest + Testing Library · pnpm
- Node
>=22and pnpm (runcorepack enableto use the pinned version) - A Supabase project (free tier) for the Postgres database — create one at supabase.com
cp .env.example .env.local # set DATABASE_URL + BETTER_AUTH_SECRET (openssl rand -base64 32)
pnpm install
pnpm db:migrate # apply ./drizzle migrations (creates auth + todos tables)
pnpm dev # http://localhost:3000For DATABASE_URL, copy your project's Session pooler string from Supabase's
Connect dialog and append ?sslmode=no-verify — node-postgres rejects
Supabase's self-signed cert chain under require, so this connects encrypted but
skips CA verification (fine for dev; harden with the project CA cert in
production). See .env.example for the exact shape.
Open /signup to create an account → you land on the protected /dashboard;
/login signs an existing user back in.
- Auth — Better Auth + Drizzle adapter (
src/lib/auth.ts); session read via a server function (src/lib/auth.functions.ts); route guard + sign-out insrc/routes/dashboard.tsx. - Data path — server function → Drizzle → TanStack Query loader in
src/features/todos/. This is the canonical pattern to copy for new features. - Not-found — branded 404 wired on the router (
src/router.tsx).
AGENTS.md is the map of the codebase. Deeper references live in
docs/: architecture, naming conventions, feature-first layout, the
design system, deployment, a glossary, and feature specs (with their ADRs).
pnpm dev | build | preview | test | typecheck | check | fix
· pnpm db:generate | migrate | push | pull | studio