Repository: kriasoft/react-starter-kit

Stars: 23560

CLAUDE.md

@AGENTS.md

Claude-Specific Guidance

- Use /plan for multi-file or architectural changes.
- Prefer slash commands from .claude/commands/ when available.

README.md

React Starter Kit

</div>

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

text

├── 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:

bash

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

2. Install Dependencies

bash

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

bash

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

Also check wrangler.jsonc for Worker configuration and bindings.

4. Start Development

bash

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:

bash

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:

bash

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

bash

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

Contributors

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:

- How do I add a new tRPC endpoint?
- Help me create a database table
- How does authentication work?
- Explain the project structure
- How do I deploy to Cloudflare?
- Add a new page with routing
- How do I send emails?

Contributing

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

License

---

<sup>Made with ♥ by Konstantin Tarkus (@koistya, blog)
and contributors.</sup>

Repository: kriasoft/react-starter-kit

Stars: 23560

CLAUDE.md Copy Chapter

Claude-Specific Guidance Copy Chapter

README.md Copy Chapter

React Starter Kit

Highlights Copy Chapter

Technology Stack Copy Chapter

Monorepo Architecture Copy Chapter

Prerequisites Copy Chapter

Quick Start Copy Chapter

1. Create Your Project Copy Section

2. Install Dependencies Copy Section

3. Configure Environment Copy Section

4. Start Development Copy Section

Launch all apps in development mode (web, api, and app)

Or, start specific apps individually

5. Initialize Database Copy Section

Production Deployment Copy Chapter

1. Environment Setup Copy Section

Required secrets

Stripe billing (optional — first 4 required to enable, annual is optional)

OAuth providers (as needed)

Email service

AI features (optional)

2. Build and Deploy Copy Section

Build packages that require compilation (order matters!)

Deploy all applications

Backers Copy Chapter

Contributors Copy Chapter

Need Help? Copy Chapter

Contributing Copy Chapter

License Copy Chapter

CLAUDE.md

Claude-Specific Guidance

README.md

Highlights

Technology Stack

Monorepo Architecture

Prerequisites

Quick Start

1. Create Your Project

2. Install Dependencies

3. Configure Environment

4. Start Development

5. Initialize Database

Production Deployment

1. Environment Setup

2. Build and Deploy

Backers

Contributors

Need Help?

Contributing

License