Turbo Setup: React 19.2.3 + React Compiler, TypeScript & TailwindCSS v4 Boilerplate

Launch your next React project with a robust, production-ready starter powered by React 19.2.3, TypeScript, and TailwindCSS v4. Enjoy rapid UI development, type safety, and a suite of modern tools for code quality, state management, and productivity. Build smarter, ship faster, and scale with confidence.

🚀 Features

• ⚛️ React 19.2.3 + TypeScript - Modern React with full TypeScript support.
• ⚛️ React Compiler - Automatic optimization via Babel plugin for better performance.
• 🎨 Tailwind CSS v4 - Utility-first CSS for rapid UI development.
• ⚡ Vite 7.2.7 - Next-generation frontend tooling for fast builds.
• 🔍 ESLint - Code linting for consistent code quality.
• 🧹 Prettier - Automated code formatting for style consistency.
• 🪝 Husky & lint-staged - Pre-commit hooks for linting and formatting your code.
• 🏷️ Commitlint - Enforces conventional commit messages.
• 📦 Zustand - Simple and fast state management.
• 🗺️ React Router - Declarative routing for React apps.
• 📅 Day.js - Lightweight date manipulation library.
• 🌐 Axios - Promise-based HTTP client for the browser.
• 🔄 Custom useFetch Hook - Lightweight data fetching with loading and error states (replaces SWR).
• 🔗 nuqs - Type-safe URL state management with React hooks.
• 🌍 i18next - Internationalization support (English & Korean).

🛠️ Prerequisites

• Node.js (v18 or higher)
• Bun (latest version)

📦 Installation

Install command

npx turbo-setup react-tailwind

Install dependencies

bun install

🚀 Development

Start development server

bun run dev

# The application will be available at http://localhost:8000

Build command

bun run build

# Preview production build
bun run preview

📁 Development

src/
├── assets/           # Static assets (images, fonts, icons)
├── components/       # Reusable UI components
├── configs/          # Configuration files (env, http, app urls)
├── constants/        # Application constants and shared values
├── hooks/            # Custom React hooks (useFetch, useMutation, useKeyPress)
├── layouts/          # Layout components and templates
├── pages/            # Page components
├── providers/        # React context providers
├── router/           # Routing configuration
├── services/         # Browser services (cookies, localStorage)
├── store/            # State management with Zustand
├── styles/           # Global styles and Tailwind imports
├── types/            # TypeScript type definitions
├── utils/            # Utility functions
└── views/            # View components

🔧 Configuration

Environment Variables

Create .env files for different environments:

VITE_ENV=development
VITE_API_URL=your_api_url

TypeScript

The project includes two TypeScript configurations:

• tsconfig.app.json - Application configuration
• tsconfig.node.json - Node.js configuration

ESLint & Prettier

• ESLint is configured with TypeScript and React rules
• Prettier is set up with custom formatting rules
• Pre-commit hooks ensure code quality

React Compiler

The project uses React Compiler via babel-plugin-react-compiler for automatic optimization of React components. The compiler is configured in vite.config.ts using @vitejs/plugin-react (Babel-based) to support Babel plugins.

The compiler automatically optimizes your React code during the build process, analyzing components and hooks to determine when memoization is beneficial, eliminating the need for manual useMemo, useCallback, and React.memo in most cases.

🌍 Internationalization (i18n)

This project uses i18next with react-i18next for internationalization support. The translations are stored in JSON files located in the src/i18n/translations directory.

Adding a New Language

1. Create a new JSON file in the src/i18n/translations directory with the language code as the filename (e.g., fr.json for French).

2. Add your translations in the new JSON file. For example:

{
  "translation": {
    "welcome": "Bienvenue à React, tailwindcss et plus"
  }
}

Switching Languages

The SwitchLanguage component allows users to switch between available languages. It uses the useTranslation hook from react-i18next to change the language dynamically.

Example usage in a component:

import { useTranslation } from 'react-i18next'
import SwitchLanguage from '@/components/SwitchLanguage/SwitchLanguage'

const HomeView = () => {
  const { t } = useTranslation()
  return (
    <div>
      <p>{t('welcome')}</p>
      <SwitchLanguage />
    </div>
  )
}