Frontend Monorepo Boilerplate
Frontend monorepo boilerplate. TypeScript, vanilla CSS/Tailwind/MUI with focus on best practices and painless developer experience.
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.
- 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
- 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.
- 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.
