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.

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 Cloudflare D1 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.

    

---

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

Monorepo Architecture

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

├──app/ — React frontend with Vite, TanStack Router, and Tailwind CSS
├──api/ — tRPC API server powered by Hono framework
├──edge/ — Cloudflare Workers entry point and edge logic
├──core/ — Shared TypeScript types and utilities
├──db/ — Database schemas, migrations, and seed data
├──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.

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

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

Backend & API

• Hono — Ultrafast 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
• Cloudflare D1 — Serverless SQLite database

Development Tools

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

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

Open two terminals and run these commands:

Terminal 1 - Frontend:

bun --cwd app start

Terminal 2 - Backend:

bun --cwd edge build --watch
bun wrangler dev

5. Initialize Database

# Let Wrangler create the D1 database locally
bun wrangler d1 execute db --local --command "SELECT 1"
# Apply database schema and migrations
bun --cwd db migrate
bun --cwd db seed  # Optional: add sample data

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

Production Deployment

1. Environment Setup

Ensure your production environment variables are configured:

# Set secrets in Cloudflare Workers
bun wrangler secret put BETTER_AUTH_SECRET --env=production
bun wrangler secret put OPENAI_API_KEY --env=production

2. Build and Deploy

# Build all packages
bun --cwd app build
bun --cwd edge build

# Deploy to Cloudflare Workers
bun wrangler deploy --env=production

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

Contributors 👨‍💻

              

Backers 💰

              

Related Projects

• GraphQL API and Relay Starter Kit — monorepo template, pre-configured with GraphQL API, React, and Relay
• Cloudflare Workers Starter Kit — TypeScript project template for Cloudflare Workers
• Node.js API Starter Kit — project template, pre-configured with Node.js, GraphQL, and PostgreSQL

How to Contribute

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.

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