React Starter Kit

A full-stack monorepo template for building SaaS applications with React 19, tRPC, and Cloudflare Workers. Type-safe from database to UI, deployable to the edge in minutes.

Highlights

Type-safe full stack — TypeScript, tRPC, and Drizzle ORM create a single type contract from database to UI
Edge-native — Three Cloudflare Workers (web, app, api) connected via service bindings
Auth + billing included — Better Auth with email OTP, passkey, Google OAuth, organizations, and Stripe subscriptions
Modern React — React 19, TanStack Router (file-based), TanStack Query, Jotai, Tailwind CSS v4, shadcn/ui
Database ready — Drizzle ORM with Neon PostgreSQL, migrations, and seed data
Fast DX — Bun runtime, Vite, Vitest, ESLint, Prettier, and pre-configured VS Code settings

React Starter Kit is proudly supported by these amazing sponsors:

Technology Stack

| Layer | Technologies | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Runtime | Bun, Cloudflare Workers, TypeScript 5.9 | | Frontend | React 19, TanStack Router, Tailwind CSS v4, shadcn/ui, Jotai | | Marketing | Astro | | Backend | Hono, tRPC, Better Auth, Stripe | | Database | Drizzle ORM, Neon PostgreSQL | | Tooling | Vite, Vitest, ESLint, Prettier |

Monorepo Architecture

├── apps/
│   ├── web/          Astro marketing site (edge router, serves static + proxies to app/api)
│   ├── app/          React 19 SPA (TanStack Router, Jotai, Tailwind CSS v4)
│   ├── api/          Hono + tRPC API server (Better Auth, Cloudflare Workers)
│   └── email/        React Email templates
├── packages/
│   ├── ui/           shadcn/ui components (new-york style)
│   ├── core/         Shared types and utilities
│   └── ws-protocol/  WebSocket protocol with type-safe messaging
├── db/               Drizzle ORM schemas, migrations, and seed data
├── infra/            Terraform (Cloudflare Workers, DNS, Hyperdrive)
├── docs/             VitePress documentation
└── scripts/          Build automation and dev tools

Each app deploys independently to Cloudflare Workers. The web worker routes /api/* to the API worker and app routes to the app worker via service bindings.

Prerequisites

Bun v1.3+ (replaces Node.js and npm)
VS Code with our recommended extensions
React Developer Tools browser extension (recommended)
Cloudflare account for deployment

Quick Start

1. Create Your Project

Generate a new repository from this template, then clone it locally:

git clone https://github.com/your-username/your-project-name.git
cd your-project-name

2. Install Dependencies

bun install

3. Configure Environment

This project follows Vite env conventions:

.env is committed and contains shared defaults/placeholders only (no real secrets)
.env.local is git-ignored and should contain your real credentials
.env.local values override .env

cp .env .env.local  # then replace placeholder values with real ones

Also check wrangler.jsonc for Worker configuration and bindings.

4. Start Development

# Launch all apps in development mode (web, api, and app)
bun dev
Or, start specific apps individually
bun web:dev  # Marketing site
bun app:dev  # Main application
bun api:dev  # API server

5. Initialize Database

Ensure DATABASE_URL is configured in your .env.local file, then set up the schema:

bun db:push              # Push schema directly (quick dev setup)
bun db:seed              # Seed with sample data (optional)
bun db:studio            # Open database GUI

For production, use bun db:migrate to apply migrations instead of db:push.

| App | URL | | -------------- | ----------------------- | | React app | | | Marketing site | | | API server | |

Production Deployment

1. Environment Setup

Configure your production secrets in Cloudflare Workers:

# Required secrets
bun wrangler secret put BETTERAUTHSECRET
Stripe billing (optional — first 4 required to enable, annual is optional)
bun wrangler secret put STRIPESECRETKEY
bun wrangler secret put STRIPEWEBHOOKSECRET
bun wrangler secret put STRIPESTARTERPRICE_ID
bun wrangler secret put STRIPEPROPRICE_ID
bun wrangler secret put STRIPEPROANNUALPRICEID  # optional
OAuth providers (as needed)
bun wrangler secret put GOOGLECLIENTID
bun wrangler secret put GOOGLECLIENTSECRET
Email service
bun wrangler secret put RESENDAPIKEY
AI features (optional)
bun wrangler secret put OPENAIAPIKEY

Run these commands from the target app directory or pass --config apps/<app>/wrangler.jsonc. Non-sensitive vars like RESENDEMAILFROM go in wrangler.jsonc directly.

2. Build and Deploy

# Build packages that require compilation (order matters!)
bun email:build    # Build email templates first
bun web:build      # Build marketing site
bun app:build      # Build main React app
Deploy all applications
bun web:deploy     # Deploy marketing site
bun api:deploy     # Deploy API server
bun app:deploy     # Deploy main React app