React + TypeScript + Vite (Rolldown) + React Compiler

A modern React application built with TypeScript, Vite (Rolldown bundler), and experimental React Compiler optimization. This project features comprehensive testing, automated quality checks, and production-ready error handling.

⚡ Tech Stack

• React 19 - Latest React with concurrent features
• TypeScript 5.9 - Strict type safety with project references
• Vite (Rolldown) - Next-generation bundler using Rolldown (experimental)
• React Compiler - Automatic optimization (experimental RC)
• Biome - Fast linting and formatting (ESLint/Prettier alternative)
• Vitest - Unit testing with React Testing Library
• Playwright - Cross-browser E2E testing
• pnpm - Fast, efficient package manager

🚀 Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Run E2E tests
pnpm test:e2e

# Build for production
pnpm build

📦 Available Scripts

Development

• pnpm dev - Start Vite dev server with HMR
• pnpm preview - Preview production build locally

Building

• pnpm build - Type-check and build for production
• pnpm clean - Remove all build artifacts

Code Quality

• pnpm lint - Run TypeScript + Biome linting
• pnpm lint:tsc - TypeScript type checking only
• pnpm lint:biome - Biome linting only
• pnpm format - Auto-format code with Biome

Testing

• pnpm test - Run unit tests once
• pnpm test:watch - Run unit tests in watch mode
• pnpm test:coverage - Generate coverage report
• pnpm test:e2e - Run E2E tests
• pnpm test:e2e:ui - Run E2E tests with Playwright UI
• pnpm validate - Full validation (lint + all tests)

🔧 Configuration

Path Aliases

The project uses path aliases for cleaner imports:

// Instead of: import { Button } from "../../components/Button"
import { Button } from "@/components/Button"

Configured in:

• tsconfig.app.json - TypeScript path resolution
• vite.config.ts - Vite module resolution

Code Style

• Indentation: 2 spaces
• Quotes: Single quotes (JS/TS), Double quotes (JSX attributes)
• Semicolons: AsNeeded (omitted where safe)
• Line width: 100 characters
• Formatter: Biome

Git Hooks

Pre-commit hooks automatically:

• Run Biome linting and formatting on staged files
• Type-check TypeScript files with tsc-files
• Prevent broken code from being committed

🧪 Testing

Unit Tests (Vitest)

# Run once
pnpm test

# Watch mode
pnpm test:watch

# With coverage
pnpm test:coverage

Tests use:

• Vitest as test runner
• React Testing Library for component testing
• Happy DOM for lightweight DOM implementation
• jest-dom matchers for better assertions

E2E Tests (Playwright)

# Headless mode
pnpm test:e2e

# Interactive UI
pnpm test:e2e:ui

Tests run across:

• Chromium (Chrome/Edge)
• Firefox
• WebKit (Safari)

🛡️ Error Handling

The app includes a production-ready ErrorBoundary component:

• Catches React component errors
• Shows user-friendly error message
• Displays detailed error info in development
• Provides reload functionality
• Ready for error logging service integration (Sentry, etc.)

🔬 Experimental Features

React Compiler (RC)

This project uses React Compiler 19.1.0-rc.3 for automatic optimization. The compiler:

• Automatically memoizes components and values
• Reduces need for useMemo and useCallback
• May impact build performance
• Currently in release candidate stage

See React Compiler docs for more information.

Rolldown Bundler

Using rolldown-vite@7.1.14 instead of standard Vite. Rolldown is:

• Next-generation bundler written in Rust
• Faster than traditional bundlers
• Currently experimental
• Drop-in Vite replacement

🏗️ Project Structure

├── src/
│   ├── components/      # Reusable React components
│   ├── test/           # Test setup and utilities
│   ├── assets/         # Images, fonts, etc.
│   ├── App.tsx         # Main application component
│   ├── main.tsx        # Application entry point
│   └── index.css       # Global styles
├── e2e/                # Playwright E2E tests
├── public/             # Static assets
├── types/              # TypeScript type definitions
├── .github/
│   └── workflows/      # CI/CD pipelines
├── .husky/             # Git hooks
├── biome.json          # Biome configuration
├── playwright.config.ts # E2E test configuration
├── tsconfig.*.json     # TypeScript configuration
├── vite.config.ts      # Vite/build configuration
├── AGENTS.md           # Development guidelines
└── TODO.md             # Project roadmap

📚 Development Guidelines

See AGENTS.md for comprehensive development guidelines including:

• Code style conventions
• Testing patterns
• Git workflow
• Error handling
• Component organization

🚦 CI/CD

GitHub Actions workflows automatically:

• Run linting and type checking
• Execute unit and E2E tests
• Build production bundles
• Generate coverage reports
• Upload test artifacts

📝 Migration Notes

From ESLint to Biome

This project uses Biome instead of ESLint for:

• 10-100x faster linting and formatting
• Unified tooling (no separate Prettier)
• Better TypeScript support out of the box
• Simpler configuration

To configure Biome rules, edit biome.json.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run pnpm validate to ensure all checks pass
5. Commit your changes (pre-commit hooks will run automatically)
6. Push and create a pull request

📄 License

MIT

🔗 Resources

• React Documentation
• TypeScript Documentation
• Vite Documentation
• Biome Documentation
• Vitest Documentation
• Playwright Documentation
• React Compiler