Repository files navigation

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:

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

• 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 withReact Starter Kit.Be sure to join ourDiscord channel for assistance.

Core Runtime & Platform

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

• 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

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

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

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

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.

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

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

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

bun install

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

# Launch all apps in development mode (web, api, and app)bun dev# Or, start specific apps individuallybun --filter @repo/web dev# Marketing sitebun --filter @repo/app dev# Main applicationbun --filter @repo/api dev# API server

Set up your database connection and schema:

# Apply migrations to databasebun --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 inspectionbun --filter @repo/db studio

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

Openhttp://localhost:5173 to see your React app running. The marketing website runs onhttp://localhost:4321. The backend API will be available at the port shown bywrangler dev (typically 8787).

Configure your production secrets in Cloudflare Workers:

# Required secretsbun wrangler secret put BETTER_AUTH_SECRET# OAuth providers (as needed)bun wrangler secret put GOOGLE_CLIENT_IDbun wrangler secret put GOOGLE_CLIENT_SECRET# Email servicebun wrangler secret put RESEND_API_KEY# AI features (optional)bun wrangler secret put OPENAI_API_KEY

Note: TheRESEND_EMAIL_FROM is configured inwrangler.jsonc as it's not sensitive.

# Build packages that require compilation (order matters!)bun email:build# Build email templates firstbun web:build# Build marketing sitebun app:build# Build main React app# Deploy all applicationsbun web:deploy# Deploy marketing sitebun api:deploy# Deploy API serverbun 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.

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

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

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

^{Made with ♥ by Konstantin Tarkus (@koistya,blog)andcontributors.}