A template for building modern frontend applications using the React framework and the Vite build tool, managed in a Turborepo monorepo, and written in TypeScript.
Licensed under the MIT license and is free for private or commercial projects.
This template provides a scalable, modular foundation for medium to large frontend projects. It’s built to support multiple applications and shared packages within a unified monorepo, promoting consistent tooling, efficient builds, and smooth collaboration across teams. Its modular architecture also makes it well-suited for micro frontend development, where multiple independently deployable apps can coexist in a single codebase. It provides a solid starting point to help you hit the ground running and save valuable time when starting a new project.
Before you begin, ensure you have met the following requirements:
- Node.js: Version 22.20 or higher is required (as specified in .nvmrc).
- pnpm: Dependency management tool for Node.js.
- Docker (optional): For containerizing the application.
The monorepo follows a clear structure with dedicated apps for frontend applications and packages for shared libraries and configurations.
repo/
├── apps/
│ ├── web/ # React application (Vite + TypeScript)
│ └── web-e2e/ # E2E testing suite (Playwright)
│
├── packages/
│ ├── eslint-config/ # Shared ESLint configurations
│ ├── shared/ # Shared React library (components + utilities)
│ └── typescript-config/ # Shared TypeScript configurations
│
├── package.json # Root workspace configuration
├── turbo.json # Turborepo configuration
└── pnpm-workspace.yaml # PNPM workspace definition
All applications and packages utilize shared ESLint and TypeScript configurations to ensure consistency across the monorepo, with each workspace designed for specific functionality and seamless integration:
⚛️ apps/web
A modern React application built with Vite and TypeScript, providing a fast development experience and optimized production builds. Key features include:
- SWC (Speedy Web Compiler) for faster builds and development.
- Vitest for unit and component testing, along with React Testing Library for testing React components, Vitest UI, and V8 coverage reports.
- lint-staged for pre-commit checks to maintain code quality.
- Docker support for containerizing the application.
A comprehensive end-to-end testing suite built with Playwright and TypeScript, ensuring reliable cross-browser testing for the web application. Key features include:
- Playwright for cross-browser end-to-end testing with automated CI/CD support.
- lint-staged for pre-commit checks to maintain code quality.
- Direct integration with the main web app for seamless testing workflows.
A shared React component library built with Vite and TypeScript, providing reusable components and utilities across the monorepo. Key features include:
- SWC (Speedy Web Compiler) for faster builds and development.
- vite-plugin-dts for automatic TypeScript declaration generation.
- Vitest for unit testing, along with React Testing Library for testing React components, Vitest UI, jsdom environment, and coverage reports.
- lint-staged for pre-commit checks to maintain code quality.
Essential development tools configured at the root for consistency and automation across all workspaces, including:
- Turborepo for managing builds, caching, and running tasks in parallel across the monorepo.
- Husky for Git hooks to enforce pre-commit checks and automate quality controls.
- Prettier for maintaining consistent code formatting across the entire codebase.
- GitHub Actions CI (Continuous Integration) workflow that runs on pushes to main and pull requests, executing builds, unit tests, and end-to-end tests with Playwright across all workspaces.
Together, these tools create a fast, reliable, and maintainable developer experience across every workspace.
If you like what you've seen so far and think this setup fits your needs, you can quickly get started by clicking the Use this template button at the top of the repository on GitHub.