React Starter Kit

Building modern web applications shouldn't require weeks of configuration hell. This React Starter Kit eliminates the tedious setup work so you can focus on what matters: shipping great products.

Designed for developers who value both speed and quality, this template provides a complete foundation for full-stack applications. From solo projects to team collaborations, it scales with your ambitions while maintaining the developer experience you deserve.

React Starter Kit is proudly supported by these amazing sponsors:

    

What You Get

• Performance by Default: Bun runtime delivers exceptional speed across development and production. Your build times will thank you.
• Type Safety Throughout: TypeScript and tRPC create an unbreakable contract between frontend and backend. Catch errors at compile time, not in production.
• Modern React Stack: React 19 with TanStack Router provides type-safe navigation and powerful data fetching patterns. Tailwind CSS v4 handles styling with zero configuration.
• Edge-Native Deployment: Cloudflare Workers ensure your app runs close to users worldwide. Experience sub-100ms response times globally.
• Database Ready: Drizzle ORM with Neon PostgreSQL provides a complete data layer. Multi-tenant support included out of the box.
• Developer Experience: ESLint, Prettier, and VSCode configurations eliminate bikeshedding. Focus on features, not formatting.

Perfect For

• SaaS Applications: Multi-tenant architecture with user management built-in
• API-First Products: tRPC provides excellent developer experience for API development
• Global Applications: Edge deployment ensures fast loading times worldwide
• Team Projects: Monorepo structure scales well with multiple developers
• Rapid Prototyping: Skip configuration and start building features immediately

---

This project was bootstrapped with React Starter Kit. Be sure to join our Discord channel for assistance.

Technology Stack

Core Runtime & Platform

• Bun — Lightning-fast JavaScript runtime and package manager
• Cloudflare Workers — Edge computing platform

Frontend & UI

• React 19 — Latest React with concurrent features
• TanStack Router — Type-safe routing with data loading
• Tailwind CSS v4 — Utility-first CSS framework
• shadcn/ui — Beautiful, accessible components
• Jotai — Atomic state management
• Astro — Static site generator for marketing pages

Backend & API

• Hono — Ultra-fast web framework for the edge
• tRPC — End-to-end type safety for APIs
• Better Auth — Modern authentication solution

Database & ORM

• Drizzle ORM — TypeScript ORM with excellent DX
• Neon PostgreSQL — Serverless PostgreSQL database

Development Tools

• Vite — Next-generation frontend tooling
• Vitest — Blazing fast unit testing
• TypeScript — Static type checking
• ESLint & Prettier — Code quality and formatting

Monorepo Architecture

This starter kit uses a thoughtfully organized monorepo structure that promotes code reuse and maintainability:

• apps/app/ — React 19 application with TanStack Router, Jotai, and Tailwind CSS v4
• apps/web/ — Astro marketing website for static site generation
• apps/api/ — tRPC API server powered by Hono framework for Cloudflare Workers
• apps/email/ — React Email templates for authentication and transactional emails
• packages/core/ — Shared TypeScript types and utilities
• packages/ui/ — Shared UI components with shadcn/ui management utilities
• packages/ws-protocol/ — WebSocket protocol template with type-safe messaging
• db/ — Database schemas, migrations, and seed data
• docs/ — VitePress documentation site
• infra/ — Terraform infrastructure configurations for multi-environment deployment
• scripts/ — Build automation and development tools

Why Monorepo? This structure enables seamless code sharing between frontend and backend, ensures type consistency across your entire stack, and simplifies dependency management. When you update a type definition, both client and server stay in sync automatically.

Deployment Flexibility: Each app can be deployed independently to Cloudflare Workers for global edge computing, ensuring optimal performance worldwide.

Prerequisites

• Bun v1.2+ (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

Update environment variables in .env and .env.local files as well as Wrangler configuration in wrangler.jsonc.

4. Start Development

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

# Or, start specific apps individually
bun --filter @repo/web dev  # Marketing site
bun --filter @repo/app dev  # Main application
bun --filter @repo/api dev  # API server

5. Initialize Database

Set up your database connection and schema:

# Apply migrations to database
bun --filter @repo/db migrate

# Quick development setup (pushes schema directly, skips migrations)
bun --filter @repo/db push

# Seed with sample data (optional)
bun --filter @repo/db seed

# Open database GUI for inspection
bun --filter @repo/db studio

Note: Ensure DATABASE_URL is configured in your .env.local file before running these commands.

Open http://localhost:5173 to see your React app running. The marketing website runs on http://localhost:4321. The backend API will be available at the port shown by wrangler dev (typically 8787).

Production Deployment

1. Environment Setup

Configure your production secrets in Cloudflare Workers:

# Required secrets
bun wrangler secret put BETTER_AUTH_SECRET

# 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

Note: The RESEND_EMAIL_FROM is configured in wrangler.jsonc as it's not sensitive.

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

Your application will be live on your Cloudflare Workers domain within seconds. The edge-first architecture ensures optimal performance regardless of user location.

Backers 💰

              

Contributors 👨‍💻

                        

Contributing

We welcome contributions! Whether you're fixing bugs, improving docs, or proposing new features, check out our Contributing Guide to get started.

• Good first issues for beginners
• Discord community for help and discussions
• Open issues needing attention

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.}