Frontend Monorepo Boilerplate
Frontend monorepo boilerplate. TypeScript, vanilla CSS/Tailwind/MUI with focus on best practices and painless developer experience.
Overview
The Frontend Monorepo Boilerplate is a TypeScript-based development setup that focuses on best practices and provides a seamless developer experience. It allows for easy extension and comes with several key features such as Turborepo remote caching, Next.js apps, multiple styling solutions, component libraries, testing with Jest and React Testing Library, linting with ESLint, and git hooks with Husky. The monorepo can be set up with a single command and provides a local development environment for easy code building and testing.
Features
- Turborepo v1 remote cache build system: Enables blazingly fast execution of commands (build, lint, test, etc.) on your local machine and CI.
- TypeScript v5 codebase: The entire codebase is written in TypeScript with configurations for strict type checking and styling.
- Next.js v13 apps: The monorepo includes Next.js apps for building powerful web applications.
- Multiple styling solutions: Includes three styling solutions with a shared theme across all apps. Choose between Vanilla CSS, Tailwind components library built with Tailwind v3, and Material UI components library built with MUI v5.
- Easily import UI components package into apps: Allows for easy import of UI component packages into apps for seamless integration.
- Unit and integration tests with Jest and React Testing Library: Run tests for individual apps or packages instantly.
- Linting with ESLint: Ensures code quality and adherence to coding standards.
- Prettier code formatter: Provides consistent code formatting for improved readability.
- Git hooks with Husky and lint-staged: Automatically runs linting and formatting scripts before committing changes, ensuring code consistency.
- Conventional commits format: Enforces the use of conventional commit messages with instant feedback and prompts for required fields.
- Various commands: The monorepo includes several convenient npm commands for tasks like setting up git hooks, building apps, starting apps, linting, testing, and more.
Summary
The Frontend Monorepo Boilerplate provides a comprehensive development setup for building web applications. With its focus on best practices and developer experience, it offers features like remote caching, TypeScript codebase, Next.js apps, multiple styling solutions, component libraries, testing, linting, git hooks, and conventional commits. By following the installation guide, developers can quickly set up a local development environment and start building applications with ease.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Turborepo
Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.