Skip to content

kriasoft/react-starter-kit

React Starter Kit

Image Image Image Image Image Image Image

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:

Image  Image  Image

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

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 http://localhost:5173
Marketing site http://localhost:4321
API server http://localhost:8787

Production Deployment

1. Environment Setup

Configure your production secrets in Cloudflare Workers:

# Required secrets
bun wrangler secret put BETTER_AUTH_SECRET

# Stripe billing (optional — first 4 required to enable, annual is optional)
bun wrangler secret put STRIPE_SECRET_KEY
bun wrangler secret put STRIPE_WEBHOOK_SECRET
bun wrangler secret put STRIPE_STARTER_PRICE_ID
bun wrangler secret put STRIPE_PRO_PRICE_ID
bun wrangler secret put STRIPE_PRO_ANNUAL_PRICE_ID  # optional

# OAuth providers (as needed)
bun wrangler secret put GOOGLE_CLIENT_ID
bun wrangler secret put GOOGLE_CLIENT_SECRET

# Email service
bun wrangler secret put RESEND_API_KEY

# AI features (optional)
bun wrangler secret put OPENAI_API_KEY

Run these commands from the target app directory or pass --config apps/<app>/wrangler.jsonc. Non-sensitive vars like RESEND_EMAIL_FROM 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

Backers

Image  Image  Image  Image  Image  Image  Image  Image

Contributors

Image  Image  Image  Image  Image  Image  Image  Image  Image  Image  Image  Image  Image

Need Help?

Documentation covers auth, database, billing, deployment, and more.

Our AI assistant is trained on this codebase — ask it anything on ChatGPT or Gemini. Try these questions:

Contributing

See the Contributing Guide to get started. Check good first issues or join Discord for discussion.

License

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.


Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.

About

Modern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-ready monorepo for building fast web apps.

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

  •  

Contributors