react-starter-kit

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

23,021

4,170

23,021

View on GitHub View on NPM

Top Related Projects

create-react-app

103,751

Set up a modern web app by running one command.

gatsby

55,935

The best React-based framework with performance, scalability and security built in.

vite

75,572

Next generation frontend tooling. It's fast!

Quick Overview

React Starter Kit is a comprehensive boilerplate for building web applications using React, Node.js, and GraphQL. It provides a solid foundation for developing isomorphic (universal) web apps with server-side rendering, code splitting, and a well-organized project structure.

Pros

Includes a robust set of tools and best practices for modern web development
Supports server-side rendering for improved performance and SEO
Implements code splitting for optimized loading times
Provides a well-structured project setup with clear separation of concerns

Cons

Steep learning curve for developers new to React or GraphQL
May be overkill for smaller projects or simple websites
Requires regular maintenance to keep up with rapidly evolving dependencies
Some users report issues with TypeScript integration

Getting Started

Clone the repository:

git clone https://github.com/kriasoft/react-starter-kit.git MyApp
cd MyApp

Install dependencies:
```
npm install
```
Start the development server:
```
npm start
```
Open your browser and navigate to http://localhost:3000

For more detailed instructions and configuration options, refer to the project's README and documentation.

Competitor Comparisons

create-react-app

103,751

Set up a modern web app by running one command.

Pros of Create React App

Simpler setup and configuration, ideal for beginners
Official Facebook support and regular updates
Extensive documentation and community resources

Cons of Create React App

Less flexibility for advanced configurations
Limited built-in features compared to React Starter Kit
Potential for "ejecting" to gain more control, which can be complex

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const title = 'React Starter Kit';
const component = () => (
  <Layout>
    <Home title={title} />
  </Layout>
);

Create React App:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Edit <code>src/App.js</code> and save to reload.</p>
      </header>
    </div>
  );
}

Summary

Create React App offers a streamlined setup process and is well-supported, making it ideal for beginners and quick prototyping. React Starter Kit provides more advanced features and flexibility out of the box, catering to developers who need more control over their project structure and configuration. The choice between the two depends on the project requirements and the developer's experience level.

next.js

133,617

The React Framework

Pros of Next.js

Built-in server-side rendering and static site generation
Automatic code splitting for faster page loads
Simpler routing system with file-based routing

Cons of Next.js

Less flexibility in project structure compared to React Starter Kit
Steeper learning curve for developers new to server-side rendering
More opinionated, which may not suit all project requirements

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const HomePage = () => (
  <Layout>
    <Home />
  </Layout>
);

export default HomePage;

Next.js:

import Head from 'next/head';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Home Page</title>
      </Head>
      <h1>Welcome to Next.js!</h1>
    </Layout>
  );
}

The code comparison shows that Next.js has a more streamlined approach to creating pages, with built-in features like the Head component for managing metadata. React Starter Kit, on the other hand, provides more flexibility in how components are structured and composed.

gatsby

55,935

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

Built-in performance optimizations like code splitting and prefetching
Large ecosystem of plugins for easy integration of various features
Static site generation capabilities for improved SEO and load times

Cons of Gatsby

Steeper learning curve due to GraphQL integration
Potentially slower build times for large sites
Less flexibility for complex, dynamic web applications

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from './Layout';
import Home from './Home';

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

Gatsby:

import React from 'react';
import { Link } from 'gatsby';
import Layout from '../components/layout';

export default function Home() {
  return (
    <Layout>
      <h1>Welcome to Gatsby</h1>
      <Link to="/about/">About</Link>
    </Layout>
  );
}

The main difference in the code examples is Gatsby's use of its own Link component for internal navigation, which enables performance optimizations. React Starter Kit uses standard React components and routing.

Gatsby is more suited for static sites and content-heavy applications, while React Starter Kit offers more flexibility for complex, dynamic web applications. The choice between them depends on the specific project requirements and developer preferences.

vercel

13,910

Develop. Preview. Ship.

Pros of Vercel

Comprehensive deployment platform with serverless functions and edge network
Seamless integration with popular frameworks like Next.js and Nuxt.js
Automatic HTTPS and custom domain support

Cons of Vercel

Less flexibility for custom server-side configurations
Potential vendor lock-in for certain features
Limited control over infrastructure compared to self-hosted solutions

Code Comparison

React Starter Kit:

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

render(<App />, document.getElementById('root'));

Vercel:

module.exports = (req, res) => {
  res.json({
    message: 'Hello from Vercel Serverless Function!'
  });
};

Key Differences

React Starter Kit is a boilerplate for building isomorphic web applications with React, while Vercel is a cloud platform for static and serverless deployment. React Starter Kit focuses on providing a foundation for React-based projects, whereas Vercel offers a complete deployment and hosting solution for various frameworks and static sites.

React Starter Kit gives developers more control over the project structure and server-side rendering, making it suitable for complex applications. Vercel, on the other hand, simplifies deployment and scaling, making it ideal for projects that prioritize quick deployment and serverless architecture.

graphql

17,661

RedwoodGraphQL

Pros of GraphQL

Full-stack framework with integrated GraphQL support
Built-in CLI for scaffolding and code generation
Opinionated structure promoting best practices

Cons of GraphQL

Steeper learning curve for developers new to GraphQL
Less flexibility in project structure compared to React Starter Kit
Potentially overkill for smaller projects

Code Comparison

React Starter Kit:

import { graphql } from 'react-relay';

const query = graphql`
  query HomeQuery {
    me {
      id
      name
    }
  }
`;

GraphQL:

export const QUERY = gql`
  query FindUserById($id: Int!) {
    user: user(id: $id) {
      id
      name
    }
  }
`

Both repositories utilize GraphQL, but GraphQL provides a more integrated approach with its full-stack framework. React Starter Kit offers more flexibility but requires additional setup for GraphQL integration.

GraphQL's opinionated structure and built-in tools can accelerate development for larger projects, while React Starter Kit's flexibility may be preferable for customized setups or smaller applications.

The code snippets demonstrate similar GraphQL query structures, with GraphQL using a more standardized approach through its framework conventions.

vite

75,572

Next generation frontend tooling. It's fast!

Pros of Vite

Faster development server and build times due to native ES modules
Simpler configuration and setup out of the box
Supports multiple frameworks beyond React (Vue, Svelte, etc.)

Cons of Vite

Less opinionated structure, which may require more setup for larger projects
Smaller ecosystem of plugins compared to webpack-based solutions
May require additional configuration for some advanced use cases

Code Comparison

React Starter Kit (webpack-based):

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};

Vite:

export default {
  plugins: [react()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: './src/main.jsx'
    }
  }
};

The Vite configuration is generally more concise and requires less boilerplate compared to webpack-based setups like React Starter Kit. Vite's approach leverages native ES modules, resulting in a simpler configuration file. However, React Starter Kit's webpack configuration offers more granular control over the build process, which can be beneficial for complex projects with specific requirements.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.