Overview

This product is a frontend monorepo boilerplate that provides a setup for developing web applications with TypeScript, Tailwind CSS, Material UI, and Next.js. It aims to offer a painless developer experience and follows best practices for frontend development. The monorepo setup allows for easy extension and comes with several features such as Turborepo for fast builds, lints, and tests, support for multiple styling solutions, and integration with popular tools like ESLint, Prettier, Jest, and React Testing Library.

Features

• Turborepo v1 remote cache build system: Fast execution of commands (build, lint, test) on your local machine and CI.
• TypeScript v5 codebase: Strict type-checking and stylistic configuration using typescript-eslint.
• Next.js v13 apps: Provides a framework for building React applications with server-side rendering and routing capabilities.
• 3 styling solutions: Monorepo supports three styling options with a shared theme across all apps: Vanilla CSS package, Tailwind components library (built with Tailwind v3), and Material UI components library (built with MUI v5).
• Easily import UI components: UI components packages can be easily imported into apps for convenient development.
• Unit and integration tests: Comes with Jest and React Testing Library for running tests in any monorepo app/package.
• Linting with ESLint: Ensures code quality and follows best practices by running ESLint on all apps and packages.
• Prettier code formatter: Includes Prettier for consistent code formatting.
• Git hooks with Husky: Sets up git hooks to automatically run linting and formatting on staged files.
• Conventional commits format: Enforces conventional commit messages and provides feedback on commit message formatting.
• Various npm commands: Includes commands for building, starting, linting, testing, and cleaning the monorepo.

Installation

To set up the monorepo, follow these steps:

1. Make sure you have Node.js v18+ installed.
2. Run the command npm install to install the required dependencies.
3. Build the apps and packages by running npm run build.
4. Start all apps using the command npm run dev.
5. Access one of the monorepo apps at localhost:3100.

Summary

The frontend monorepo boilerplate provides an efficient and convenient setup for frontend development. With its focus on best practices, it offers a painless developer experience. The monorepo structure allows for easy extension, and the inclusion of tools like Turborepo, TypeScript, Next.js, and various styling solutions enhances the productivity and code quality of the development process. With support for linting, testing, formatting, and conventional commits, this boilerplate promotes code consistency and collaboration among developers.