Top 12+ React Boilerplates and Starter Kits for 2024

Recently, React has become one of the most beloved interface frameworks of all time. According to a 2023 survey, React.js is used by 40.58% of developers worldwide, making it one of the most popular web frameworks. Developed by Facebook, React.js is also relied upon by other tech giants such as PayPal, Uber, Instagram, and Airbnb for their user interfaces. Undoubtedly, its widespread adoption and strong community support have been facilitated by React's combination of productivity, component-based architecture, and declarative syntax. This means developers are building projects on React more than ever before. The React library is non-opinionated by design, meaning that "out of the box", it doesn't include practically any additional features beyond the core functionality of defining and managing components. Therefore, it's easy to mess up without knowing best practices for prop passing, decomposing, structuring React application files, scaling the application as a whole, and other nuances. These pitfalls can be avoided by using a boilerplate that contains built-in functions and configurations, providing a comprehensive foundation with core tools and libraries, optimizing the development process, and allowing developers to focus on building their application logic rather than dealing with initial setup and configuration. In other words, it serves as a standardized starting point for initiating application development. Searching for 'react-boilerplate' on GitHub yields 44.8k repositories at the moment. The question arises regarding which template to choose for development, one that fits your application and is good for scalability and future maintenance. Types of React boilerplates In the past, the most commonly used way for starting React projects was create-react-app (CRA) - a popular and officially supported boilerplate by Facebook. However, the new React documentation, published on March 16, 2023, no longer recommends CRA as the best solution for creating React programs. Let's consider the alternatives, compare them, and decide on the best way to start a project. By delving into the various aspects of React boilerplates, let's consider the criteria by which they can be divided: Libs and Configs: Minimalistic Boilerplates: provide basic configurations for a React project, including basic setups (such as Webpack, Babel, and ESLint). They assume that developers will add certain libraries and features as needed. The majority of boilerplates fall into this category. Feature-Rich Boilerplates: come with pre-configured additional libraries and tools. These may include state management (e.g., Redux), routing (React Router), and testing, also may include basic UI components and pages, further speeding up development by providing common UI elements and layouts. Authentication and Registration: Boilerplates with Auth and Registration: include components for login, signup, and user sessions. Boilerplates without Auth: leave authentication implementation to developers. Full-Stack vs. Frontend-Only: Full-Stack Boilerplates: provide a comprehensive solution for building web applications, covering both the frontend (React) and backend. Frontend-Only Boilerplates: focus solely on the React interface. Developers need to integrate them with the desired server. UI Components Libraries: Boilerplates with UI Components: include a full set of UI components that adhere to consistent design patterns (e.g., buttons, forms, modals). Boilerplates without UI Components: leave the development of components entirely to the developer using the boilerplate. Paid vs. Free: Free/Open-Source Boilerplates: freely available, community-supported, and often well-maintained. Paid Boilerplates: some commercial templates offer additional features, premium support, or extended functionality. Based on the above classification, it can be said that the most popular React boilerplates, such as Vite, Create React App (CRA), Create Next App, Razzle, include only the basic libraries and configurations necessary to start developing with React (Minimalistic Boilerplates). React template selection criteria Deciding which boilerplate to use during development can be quite challenging because it's not just about creating an application but also about scaling and maintaining it afterward. So, how do you choose the appropriate solution from the given variety of existing boilerplates, and how do you choose them in general? Here are the key points we suggest paying attention to when choosing a boilerplate to start your project: Support and Maintenance Options: Is the project regularly updated? Performance Scores Code Quality (structure cleanliness, scalability, code organization) Production Readiness: Is the project ready for production use right now? Availability of features such as authentication, routing, internationalization, form handling, testing, basic pages, and UI components - the list could go on, you just need to determine which ones are needed for your project implementation and look for them in the boilerplate. React Project Scaffolding Tools The initial step in developing React applications typically involves choosing among Vite, Create React App, Create Next App, or Razzle as the foundation. They provide framework-like functionality, particularly regarding setting up the initial project structure, configuring build tools, and providing development servers. Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time. Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development. Next.js is a React framework for building server-rendered and statically generated web applications. It configures Next.js projects with sensible defaults, including features like server-side rendering (SSR), file-based routing, and API routes. Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering. The above-mentioned build tools are often referred to as React boilerplates. Since they only abstract the complexities of setup away, provide basic configurations, and optimize build workflows, they are not very functional and do not contain additional features themselves. Therefore, according to the classification provided above, we classify them as Minimal Boilerplates. Essentially, they often serve as boilerplate templates, that is, they are great tools for creating more feature-rich React boilerplates. Table of selected Boilerplates Next, we will consider React boilerplates that do not charge a license fee and/or offer their features for money and also take into account the date of the last update (not more than six months ago). Based on this, we have taken into consideration 12 boilerplates*: Stars Contributors Last Commit Date Open Issues About extensive-react-boilerplate 146 5 contributors, supported and used by Brocoders 31-03-2024 2 Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Formsdemo React Starter Kit 22.5k 5 contributors 15-02-2024 2 The web's popular Jamstack front-end template for building web applications with Reactdemo react-redux-saga-boilerplate 606 6 contributors 06-02-2024 - Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsdemo Next-js-Boilerplate 7k 24 contributors 05-04-2024 1 Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScriptdemo landy-react-template 1.1k 1 contributor 06-04-2024 4 Landy is an open-source React landing page template designed for developers and startupsdemo core 307 6 contributors 27-03-2024 6 Boilerplate for React/Typescript, built based on Vite nextjs-boilerplate 127 1 contributor 18-03-2024 - Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plopdemo react-pwa 501 6 contributors 09-01-2024 8 Starter kit for modern web applicationsdemo Vitamin 485 5 contributors 06-04-2024 1 Opinionated Vite starter template__demo__ next-saas-stripe-starter 733 1 contributor 02-04-2024 - An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actionsdemo gatsby-starter-apple 132 3 contributors 01-04-2024 - Gatsby blog starter kit with beautiful responsive designdemo fullstack-typescript 359 7 contributors 28-03-2024 3 FullStack React with TypeScript starter kit * as of April 2024 Comparison of boilerplates by features Now let's take a closer look at the features developers can get from using boilerplates and what else needs to be taken into account: API Integration: Some templates may contain configurations for integrating with specific APIs or server services. State Management Solutions: Options like Redux, MobX, Recoil, or built-in React state management. Also, it's hard to ignore asynchronous React Query. Testing Configuration: Predefined testing setups or none of them at all. Authentication and Authorization: Whether user authentication and authorization are prescribed and how they are handled, in particular, whether there is integration with certain authentication libraries; Internationalization (i18n) and Localization: Providing the ability to support multiple languages using libraries like react-i18next or react-intl. ESLint Rules Compliance: Allows not only to detect or fix problems during code formatting but also to identify potential bugs. Styling Solutions: The solution for using CSS modules, styled-components, or UI libs, which will ensure easy and effective reuse of styled components. Type Safety in the Project: Using TypeScript to provide static typing during development, utilizing classes or modules to create more scalable and reliable applications. App Theme Selection: Allowing users to switch between light and dark themes based on their preferences or automatic settings. Ready-made Form Components: Providing components intended for reuse across forms, reducing code duplication, and promoting standardization. They may also include built-in validation and error handling, making development more reliable. UI Component Libraries: Offering ready-made and customizable components, such as buttons and modal windows, that developers can easily integrate into their applications, saving time and effort on designing and coding these elements from scratch. We analyzed each boilerplate and obtained the following table: extensive-react-boilerplate React Starter Kit react-redux-saga-boilerplate Next-js-Boilerplate landy-react-template core nextjs-boilerplate react-pwa Vitamin next-saas-stripe-starter gatsby-starter-apple fullstack-typescript Documentation + - - + - + + + - + +- - Authentication features + + - + - - - - - + - - Social sign in + + - + - - - - - + - - Internationalization + - - + + - - - - - - - User profile + - - - - - - - - + - - Forms + - - + + - - - - + - - Statement management + + + - - - - + - + - - Tests + - + + - - - + + - - - UI components + + + - + - - + - + - - Eslint + + + + - + - + + + + + Paid - - - + - - - - - - - - Styled- components + - + - + - - + + - + + TypeScript + + + + + + + + + + + + Themes + + + + - - - + + + + - UI Component Material ui Material ui @gilbarbara/ components - antd - Tailwind CSS Material ui Tailwind CSS @radix-ui - Material ui Description of boilerplates from the table Extensive-react-boilerplate. This React boilerplate is designed for all types of projects. It's not only fully compatible with the backend boilerplate nestjs-boilerplate but also stands as an independent solution, which is one of its main advantages. This template offers a wide range of functionalities, such as: User authentication and authorization, including the possibility of using Google or Facebook accounts. Page private or public access settings. ESLint setup with custom rules to enhance code efficiency and cleanliness. Type safety to ensure the reliability of the written code. Project localization using a custom useLanguage hook. E2E testing support. Light or Dark Mode at the discretion of the user. A library of controlled components based on MUI, integrated with react-hook-form by default. So, no longer a need to spend extra time connecting input fields to controllers. State management using React Query for handling asynchronous operations. User management functionalities (CRUD). Avatar selection and upload feature with dropzone capability. Support for Next.js framework (SSR) for improved application performance and SEO optimization. As you can see, from the above mentioned features, this boilerplate significantly reduces the startup time for your project (approximately 193 hours), making it a worthwhile consideration. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only (and has a fully compatible backend boilerplate, thus can be used as Full-Stack Boilerplates), Free. React-starter-kit. A template for creating web applications based on React. It comes with pre-configured setups such as CSS-in-JS, Vitest, VSCode settings, Cloudflare support, and SSR. A connection to Firestore is used as a database. It includes implementations of some UI components like a toolbar or sidebar based on Joy UI. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free. React-redux-saga-boilerplate. A starter project for creating a React application that uses Redux for state management. It provides support for Unit and End 2 End Testing, react-helmet, and uses the Emotion library for styling, simplifying CSS styling with JavaScript. It includes custom components like a header or footer implemented using styled functionality. Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Next-js-Boilerplate. This boilerplate has a flexible code structure where you only need to select and save the necessary functionality. It supports integration with Tailwind CSS and authentication with Clerk and is compatible with SQLite, PostgreSQL, and MySQL databases. Unit testing is done using Jest, and the Zod library is used for describing validation schemas. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free. Landy-react-template. This boilerplate comes with multilingual support and smooth animations, and all content is stored in JSON files, allowing users to manage texts without prior knowledge of React.js. Contains a set of its own components (button, input, textarea, etc.) created based on styling HTML elements using styled-components. Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Core. A modern template was developed based on the fast project creation tool — Vite. It supports TypeScript for type safety and includes good configurations for ESLint, Prettier, CommitLint, Husky, and Lint-Staged. Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Nextjs-boilerplate. This React boilerplate uses Next.js for static page generation. It supports git message convention, component generation using Plop, and Tailwind CSS for styling organization. Has its Storybook for component documentation. Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. React-pwa. A ready-made set to start your project from scratch. It consists of a minimalistic combination of core libraries, components, and utilities typically needed by developers when creating React applications. It contains its own HOC for error handling on the page and is developed based on Vite. Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Vitamin. A starter project containing Tailwind CSS with a basic style reset and a Prettier plugin that automatically organizes your classes. For testing, tools such as Vitest, Testing Library, and Cypress are used, but it does not include React UI Component Libraries. Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Next-saas-stripe-starter. By using this boilerplate, you can extend the capabilities of your project with features like Next.js, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe. It includes a library of components built using Radix UI and Tailwind CSS. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Full-Stack Boilerplates, Free. Gatsby-starter-apple. A template for creating applications with a nice responsive design and contains animations for a mobile menu. The basis for styling the used components is styled-components. The boilerplate supports search engine optimization well and has RSS feed capabilities. Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Fullstack-typescript. This boilerplate is a full-stack application for quickly launching your project. It has a library of custom components based on Material UI, and Axios is used for client-server communication. It does not support certain state management technologies like Redux, MobX, etc. Categories: Minimalistic Boilerplates, Boilerplates without Auth, Full-Stack Boilerplates, Free. Peculiarities of implementation of some features In general, React templates offer various implementation features aimed at speeding up and standardizing the development process. They include UI Component Libraries and encompass a general approach to styling, state management, and basic ESLint configurations. React UI Component Libraries The implementation of functionalities in React boilerplates often revolves around modular development, where components are designed to be reusable and composable. Analyzing current libraries and according to this article, the following can be considered the most popular ones: We can say for sure that Material UI is currently the most popular library, with 91.2k GitHub stars and more than 3 million weekly downloads. Thanks to its responsive web design (RWD) feature, you can be confident that your application will automatically adapt to various screens and devices. Styling Solutions Styling solutions such as CSS modules, styled-components, or Sass are usually included in React boilerplates. They offer different approaches to styling components, providing flexibility and scalability while maintaining component encapsulation. Advantages of using styled-components as a styling solution: The library automatically tracks components rendered on the page and applies only their styles. Automatically generates a unique class name for styles, ensuring no errors in class names. Styles are attached to specific components, simplifying the removal of CSS itself. Effortless dynamic styling (code examples below belong to bc-boilerplates). const AvatarInputContainer = styled(Box)(({ theme }) => ({ display: "flex", position: "relative", flexDirection: "column", alignItems: "center", padding: theme.spacing(2), marginTop: theme.spacing(2), border: "1px dashed", borderColor: theme.palette.divider, borderRadius: theme.shape.borderRadius, cursor: "pointer", "&:hover": { borderColor: theme.palette.text.primary, }, })); Using dynamic props of a component during styling. This ensures that the style is updated based on the value of the variable. const StyledCollapseBtn = styled("button") (({ isOpen, theme }) => ({ justifySelf: "flex-end", color: COLOURS.black, backgroundColor: "transparent", border: "none", cursor: "pointer", paddingLeft: theme.spacing(2.5), position: "absolute", bottom:theme.spacing(3), left: isOpen ? "150px" : "unset", })); This allows for the reuse of styles from one component to another or for influencing one component over another (parent-child relationship). const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: #BF4F74; `; const Icon = styled.svg` flex: none; transition: fill 0.25s; width: 48px; height: 48px; ${Link}:hover & { fill: rebeccapurple; } `; State Management State management is another important aspect that simplifies application state handling, providing scalability and maintainability, especially in complex applications. Usually, Redux, MobX, and Zustand come to mind when choosing a state management tool. However, they are client-side libraries, and compared to a tool like React Query, their application for storing asynchronous data may not be as efficient. React Query is a server-state library. It is responsible not only for managing asynchronous operations between the server and the client but also provides ready-to-use functionality for searching, caching, and updating data in React and Next.js applications. With just a few lines of code, React Query replaces the boilerplate code used to manage cached data in your client state. ESLint Rules in Boilerplates The efficiency of using ESLint rules during the development of your project is also manifested in writing custom rules. Since ESLint has extensive functionality and flexibility, you can create not only formatting and rules but also consider internal project decisions. For example, when working with forms, it is possible to control and warn developers about possible unnecessary renders, incorrect solutions when working with objects, or simply point out unused imports. For example, extensive-react-boilerplate addresses such issues as follows: warn about rules regarding incorrect usage of patterns { "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]", "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\"" }, { "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]", "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\"" }, { "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])", "message": "Use theme.spacing() instead of literal." }, { "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))", "message": "Use key created via createQueryKeys function instead of your solution" }, { "selector": "CallExpression[callee.name=refresh]", "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey." }, { "selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]", "message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead." } inform about the possibility of uncontrolled renders { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]", "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]", "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]", "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]", "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component." }, { "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))", "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main" } Conclusion The choice of an effective React template is crucial for the success of your project. Instead of reinventing the wheel, leveraging the power of a well-chosen boilerplate can significantly speed up your development process and create a solid foundation. When selecting a boilerplate, we recommend familiarizing yourself with its directory structure and configuration files to understand its underlying foundation, ease of integration, modularity, and maximum alignment with technical requirements. Consider whether the available features can provide the functions you need. This can save development time and potentially offer well-maintained and tested code and, ultimately, streamline development and ensure project success. Recently, React has become one of the most beloved interface frameworks of all time. According to a 2023 survey, React.js is used by 40.58% of developers worldwide, making it one of the most popular web frameworks . Developed by Facebook , React.js is also relied upon by other tech giants such as PayPal, Uber , Instagram , and Airbnb for their user interfaces. Undoubtedly, its widespread adoption and strong community support have been facilitated by React's combination of productivity, component-based architecture, and declarative syntax. This means developers are building projects on React more than ever before. React one of the most popular web frameworks Facebook Uber Instagram Airbnb The React library is non-opinionated by design, meaning that "out of the box", it doesn't include practically any additional features beyond the core functionality of defining and managing components. Therefore, it's easy to mess up without knowing best practices for prop passing, decomposing, structuring React application files, scaling the application as a whole, and other nuances. These pitfalls can be avoided by using a boilerplate that contains built-in functions and configurations, providing a comprehensive foundation with core tools and libraries, optimizing the development process, and allowing developers to focus on building their application logic rather than dealing with initial setup and configuration. In other words, it serves as a standardized starting point for initiating application development. Searching for 'react-boilerplate' on GitHub yields 44.8k repositories at the moment. The question arises regarding which template to choose for development, one that fits your application and is good for scalability and future maintenance. Types of React boilerplates In the past, the most commonly used way for starting React projects was create-react-app (CRA) - a popular and officially supported boilerplate by Facebook. However, the new React documentation, published on March 16, 2023, no longer recommends CRA as the best solution for creating React programs. Let's consider the alternatives, compare them, and decide on the best way to start a project. By delving into the various aspects of React boilerplates, let's consider the criteria by which they can be divided: Libs and Configs: Libs and Configs: Minimalistic Boilerplates: provide basic configurations for a React project, including basic setups (such as Webpack, Babel, and ESLint). They assume that developers will add certain libraries and features as needed. The majority of boilerplates fall into this category. Feature-Rich Boilerplates: come with pre-configured additional libraries and tools. These may include state management (e.g., Redux), routing (React Router), and testing, also may include basic UI components and pages, further speeding up development by providing common UI elements and layouts. Minimalistic Boilerplates: provide basic configurations for a React project, including basic setups (such as Webpack, Babel, and ESLint). They assume that developers will add certain libraries and features as needed. The majority of boilerplates fall into this category. Minimalistic Boilerplates: provide basic configurations for a React project, including basic setups (such as Webpack, Babel, and ESLint). They assume that developers will add certain libraries and features as needed. The majority of boilerplates fall into this category. Minimalistic Boilerplates: Feature-Rich Boilerplates: come with pre-configured additional libraries and tools. These may include state management (e.g., Redux), routing (React Router), and testing, also may include basic UI components and pages, further speeding up development by providing common UI elements and layouts. Feature-Rich Boilerplates: come with pre-configured additional libraries and tools. These may include state management (e.g., Redux), routing (React Router), and testing, also may include basic UI components and pages, further speeding up development by providing common UI elements and layouts. Feature-Rich Boilerplates: Authentication and Registration: Authentication and Registration: Boilerplates with Auth and Registration: include components for login, signup, and user sessions. Boilerplates without Auth: leave authentication implementation to developers. Boilerplates with Auth and Registration: include components for login, signup, and user sessions. Boilerplates with Auth and Registration: Boilerplates without Auth: leave authentication implementation to developers. Boilerplates without Auth: Full-Stack vs. Frontend-Only: Full-Stack vs. Frontend-Only: Full-Stack Boilerplates: provide a comprehensive solution for building web applications, covering both the frontend (React) and backend. Frontend-Only Boilerplates: focus solely on the React interface. Developers need to integrate them with the desired server. Full-Stack Boilerplates: provide a comprehensive solution for building web applications, covering both the frontend (React) and backend. Full-Stack Boilerplates: Frontend-Only Boilerplates: focus solely on the React interface. Developers need to integrate them with the desired server. Frontend-Only Boilerplates: UI Components Libraries: UI Components Libraries: Boilerplates with UI Components: include a full set of UI components that adhere to consistent design patterns (e.g., buttons, forms, modals). Boilerplates without UI Components: leave the development of components entirely to the developer using the boilerplate. Boilerplates with UI Components: include a full set of UI components that adhere to consistent design patterns (e.g., buttons, forms, modals). Boilerplates with UI Components: Boilerplates without UI Components: leave the development of components entirely to the developer using the boilerplate. Boilerplates without UI Components: Paid vs. Free: Paid vs. Free: Free/Open-Source Boilerplates: freely available, community-supported, and often well-maintained. Paid Boilerplates: some commercial templates offer additional features, premium support, or extended functionality. Free/Open-Source Boilerplates: freely available, community-supported, and often well-maintained. Free/Open-Source Boilerplates: Paid Boilerplates: some commercial templates offer additional features, premium support, or extended functionality. Paid Boilerplates: Based on the above classification, it can be said that the most popular React boilerplates, such as Vite, Create React App (CRA), Create Next App, Razzle, include only the basic libraries and configurations necessary to start developing with React (Minimalistic Boilerplates). React template selection criteria Deciding which boilerplate to use during development can be quite challenging because it's not just about creating an application but also about scaling and maintaining it afterward. So, how do you choose the appropriate solution from the given variety of existing boilerplates, and how do you choose them in general? Here are the key points we suggest paying attention to when choosing a boilerplate to start your project: Support and Maintenance Options: Is the project regularly updated? Performance Scores Code Quality (structure cleanliness, scalability, code organization) Production Readiness: Is the project ready for production use right now? Availability of features such as authentication, routing, internationalization, form handling, testing, basic pages, and UI components - the list could go on, you just need to determine which ones are needed for your project implementation and look for them in the boilerplate. Support and Maintenance Options: Is the project regularly updated? Support and Maintenance Options: Performance Scores Performance Scores Code Quality (structure cleanliness, scalability, code organization) Code Quality Production Readiness: Is the project ready for production use right now? Production Readiness: Availability of features such as authentication, routing, internationalization, form handling, testing, basic pages, and UI components - the list could go on, you just need to determine which ones are needed for your project implementation and look for them in the boilerplate. Availability of features React Project Scaffolding Tools The initial step in developing React applications typically involves choosing among Vite, Create React App, Create Next App, or Razzle as the foundation. They provide framework-like functionality, particularly regarding setting up the initial project structure, configuring build tools, and providing development servers. Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time. Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development. Next.js is a React framework for building server-rendered and statically generated web applications. It configures Next.js projects with sensible defaults, including features like server-side rendering (SSR), file-based routing, and API routes. Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering. Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time. Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time. Vite Vite Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development. Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development. Create React App (CRA) Create React App (CRA) Next.js is a React framework for building server-rendered and statically generated web applications. It configures Next.js projects with sensible defaults, including features like server-side rendering (SSR), file-based routing, and API routes. Next.js is a React framework for building server-rendered and statically generated web applications. It configures Next.js projects with sensible defaults, including features like server-side rendering (SSR), file-based routing, and API routes. Next.js Next.js Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering. Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering. Razzle Razzle The above-mentioned build tools are often referred to as React boilerplates. Since they only abstract the complexities of setup away, provide basic configurations, and optimize build workflows, they are not very functional and do not contain additional features themselves. Therefore, according to the classification provided above, we classify them as Minimal Boilerplates . Essentially, they often serve as boilerplate templates, that is, they are great tools for creating more feature-rich React boilerplates. Minimal Boilerplates Table of selected Boilerplates Next, we will consider React boilerplates that do not charge a license fee and/or offer their features for money and also take into account the date of the last update (not more than six months ago). Based on this, we have taken into consideration 12 boilerplates*: Stars Contributors Last Commit Date Open Issues About extensive-react-boilerplate 146 5 contributors, supported and used by Brocoders 31-03-2024 2 Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Formsdemo React Starter Kit 22.5k 5 contributors 15-02-2024 2 The web's popular Jamstack front-end template for building web applications with Reactdemo react-redux-saga-boilerplate 606 6 contributors 06-02-2024 - Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsdemo Next-js-Boilerplate 7k 24 contributors 05-04-2024 1 Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScriptdemo landy-react-template 1.1k 1 contributor 06-04-2024 4 Landy is an open-source React landing page template designed for developers and startupsdemo core 307 6 contributors 27-03-2024 6 Boilerplate for React/Typescript, built based on Vite nextjs-boilerplate 127 1 contributor 18-03-2024 - Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plopdemo react-pwa 501 6 contributors 09-01-2024 8 Starter kit for modern web applicationsdemo Vitamin 485 5 contributors 06-04-2024 1 Opinionated Vite starter template__demo__ next-saas-stripe-starter 733 1 contributor 02-04-2024 - An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actionsdemo gatsby-starter-apple 132 3 contributors 01-04-2024 - Gatsby blog starter kit with beautiful responsive designdemo fullstack-typescript 359 7 contributors 28-03-2024 3 FullStack React with TypeScript starter kit Stars Contributors Last Commit Date Open Issues About extensive-react-boilerplate 146 5 contributors, supported and used by Brocoders 31-03-2024 2 Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Formsdemo React Starter Kit 22.5k 5 contributors 15-02-2024 2 The web's popular Jamstack front-end template for building web applications with Reactdemo react-redux-saga-boilerplate 606 6 contributors 06-02-2024 - Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsdemo Next-js-Boilerplate 7k 24 contributors 05-04-2024 1 Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScriptdemo landy-react-template 1.1k 1 contributor 06-04-2024 4 Landy is an open-source React landing page template designed for developers and startupsdemo core 307 6 contributors 27-03-2024 6 Boilerplate for React/Typescript, built based on Vite nextjs-boilerplate 127 1 contributor 18-03-2024 - Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plopdemo react-pwa 501 6 contributors 09-01-2024 8 Starter kit for modern web applicationsdemo Vitamin 485 5 contributors 06-04-2024 1 Opinionated Vite starter template__demo__ next-saas-stripe-starter 733 1 contributor 02-04-2024 - An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actionsdemo gatsby-starter-apple 132 3 contributors 01-04-2024 - Gatsby blog starter kit with beautiful responsive designdemo fullstack-typescript 359 7 contributors 28-03-2024 3 FullStack React with TypeScript starter kit Stars Contributors Last Commit Date Open Issues About Stars Stars Stars Contributors Contributors Contributors Last Commit Date Last Commit Date Last Commit Date Open Issues Open Issues Open Issues About About About extensive-react-boilerplate 146 5 contributors, supported and used by Brocoders 31-03-2024 2 Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Formsdemo extensive-react-boilerplate extensive-react-boilerplate extensive-react-boilerplate extensive-react-boilerplate 146 146 5 contributors, supported and used by Brocoders 5 contributors, supported and used by Brocoders 31-03-2024 31-03-2024 2 2 Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Formsdemo Extensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Forms demo demo demo React Starter Kit 22.5k 5 contributors 15-02-2024 2 The web's popular Jamstack front-end template for building web applications with Reactdemo React Starter Kit React Starter Kit React Starter Kit React Starter Kit 22.5k 22.5k 5 contributors 5 contributors 15-02-2024 15-02-2024 2 2 The web's popular Jamstack front-end template for building web applications with Reactdemo The web's popular Jamstack front-end template for building web applications with React demo demo demo react-redux-saga-boilerplate 606 6 contributors 06-02-2024 - Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsdemo react-redux-saga-boilerplate react-redux-saga-boilerplate react-redux-saga-boilerplate react-redux-saga-boilerplate 606 606 6 contributors 6 contributors 06-02-2024 06-02-2024 - - Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsdemo Starter kit with react-router, react-helmet, redux, redux-saga and styled-components demo demo demo Next-js-Boilerplate 7k 24 contributors 05-04-2024 1 Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScriptdemo Next-js-Boilerplate Next-js-Boilerplate Next-js-Boilerplate Next-js-Boilerplate 7k 7k 24 contributors 24 contributors 05-04-2024 05-04-2024 1 1 Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScriptdemo Boilerplate and Starter for Next.js 14+ with App Router/Page Router, Tailwind CSS 3.4, TypeScript demo demo demo landy-react-template 1.1k 1 contributor 06-04-2024 4 Landy is an open-source React landing page template designed for developers and startupsdemo landy-react-template landy-react-template landy-react-template landy-react-template 1.1k 1.1k 1 contributor 1 contributor 06-04-2024 06-04-2024 4 4 Landy is an open-source React landing page template designed for developers and startupsdemo Landy is an open-source React landing page template designed for developers and startups demo demo demo core 307 6 contributors 27-03-2024 6 Boilerplate for React/Typescript, built based on Vite core core core core 307 307 6 contributors 6 contributors 27-03-2024 27-03-2024 6 6 Boilerplate for React/Typescript, built based on Vite Boilerplate for React/Typescript, built based on Vite nextjs-boilerplate 127 1 contributor 18-03-2024 - Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plopdemo nextjs-boilerplate nextjs-boilerplate nextjs-boilerplate nextjs-boilerplate 127 127 1 contributor 1 contributor 18-03-2024 18-03-2024 - - Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plopdemo Next.js 14+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plop demo demo demo react-pwa 501 6 contributors 09-01-2024 8 Starter kit for modern web applicationsdemo react-pwa react-pwa react-pwa react-pwa 501 501 6 contributors 6 contributors 09-01-2024 09-01-2024 8 8 Starter kit for modern web applicationsdemo Starter kit for modern web applications demo demo demo Vitamin 485 5 contributors 06-04-2024 1 Opinionated Vite starter template__demo__ Vitamin Vitamin Vitamin Vitamin 485 485 5 contributors 5 contributors 06-04-2024 06-04-2024 1 1 Opinionated Vite starter template__demo__ Opinionated Vite starter template__ demo __ demo next-saas-stripe-starter 733 1 contributor 02-04-2024 - An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actionsdemo next-saas-stripe-starter next-saas-stripe-starter next-saas-stripe-starter next-saas-stripe-starter 733 733 1 contributor 1 contributor 02-04-2024 02-04-2024 - - An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actionsdemo An open-source SaaS Starter built using Next.js 14, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe and Server Actions demo demo demo gatsby-starter-apple 132 3 contributors 01-04-2024 - Gatsby blog starter kit with beautiful responsive designdemo gatsby-starter-apple gatsby-starter-apple gatsby-starter-apple gatsby-starter-apple 132 132 3 contributors 3 contributors 01-04-2024 01-04-2024 - - Gatsby blog starter kit with beautiful responsive designdemo Gatsby blog starter kit with beautiful responsive design demo demo demo fullstack-typescript 359 7 contributors 28-03-2024 3 FullStack React with TypeScript starter kit fullstack-typescript fullstack-typescript fullstack-typescript fullstack-typescript 359 359 7 contributors 7 contributors 28-03-2024 28-03-2024 3 3 FullStack React with TypeScript starter kit FullStack React with TypeScript starter kit * as of April 2024 Comparison of boilerplates by features Now let's take a closer look at the features developers can get from using boilerplates and what else needs to be taken into account: API Integration: Some templates may contain configurations for integrating with specific APIs or server services. State Management Solutions: Options like Redux, MobX, Recoil, or built-in React state management. Also, it's hard to ignore asynchronous React Query. Testing Configuration: Predefined testing setups or none of them at all. Authentication and Authorization: Whether user authentication and authorization are prescribed and how they are handled, in particular, whether there is integration with certain authentication libraries; Internationalization (i18n) and Localization: Providing the ability to support multiple languages using libraries like react-i18next or react-intl. ESLint Rules Compliance: Allows not only to detect or fix problems during code formatting but also to identify potential bugs. Styling Solutions: The solution for using CSS modules, styled-components, or UI libs, which will ensure easy and effective reuse of styled components. Type Safety in the Project: Using TypeScript to provide static typing during development, utilizing classes or modules to create more scalable and reliable applications. App Theme Selection: Allowing users to switch between light and dark themes based on their preferences or automatic settings. Ready-made Form Components: Providing components intended for reuse across forms, reducing code duplication, and promoting standardization. They may also include built-in validation and error handling, making development more reliable. UI Component Libraries: Offering ready-made and customizable components, such as buttons and modal windows, that developers can easily integrate into their applications, saving time and effort on designing and coding these elements from scratch. API Integration: Some templates may contain configurations for integrating with specific APIs or server services. API Integration: Some templates may contain configurations for integrating with specific APIs or server services. API Integration: State Management Solutions: Options like Redux, MobX, Recoil, or built-in React state management. Also, it's hard to ignore asynchronous React Query. State Management Solutions: Options like Redux, MobX, Recoil, or built-in React state management. Also, it's hard to ignore asynchronous React Query. State Management Solutions: Testing Configuration: Predefined testing setups or none of them at all. Testing Configuration: Predefined testing setups or none of them at all. Testing Configuration: Authentication and Authorization: Whether user authentication and authorization are prescribed and how they are handled, in particular, whether there is integration with certain authentication libraries; Authentication and Authorization: Whether user authentication and authorization are prescribed and how they are handled, in particular, whether there is integration with certain authentication libraries; Authentication and Authorization: Internationalization (i18n) and Localization: Providing the ability to support multiple languages using libraries like react-i18next or react-intl. Internationalization (i18n) and Localization: Providing the ability to support multiple languages using libraries like react-i18next or react-intl. Internationalization (i18n) and Localization: ESLint Rules Compliance: Allows not only to detect or fix problems during code formatting but also to identify potential bugs. ESLint Rules Compliance: Allows not only to detect or fix problems during code formatting but also to identify potential bugs. ESLint Rules Compliance: Styling Solutions: The solution for using CSS modules, styled-components, or UI libs, which will ensure easy and effective reuse of styled components. Styling Solutions: The solution for using CSS modules, styled-components, or UI libs, which will ensure easy and effective reuse of styled components. Styling Solutions: Type Safety in the Project: Using TypeScript to provide static typing during development, utilizing classes or modules to create more scalable and reliable applications. Type Safety in the Project: Using TypeScript to provide static typing during development, utilizing classes or modules to create more scalable and reliable applications. Type Safety in the Project: App Theme Selection: Allowing users to switch between light and dark themes based on their preferences or automatic settings. App Theme Selection: Allowing users to switch between light and dark themes based on their preferences or automatic settings. App Theme Selection: Ready-made Form Components: Providing components intended for reuse across forms, reducing code duplication, and promoting standardization. They may also include built-in validation and error handling, making development more reliable. Ready-made Form Components: Providing components intended for reuse across forms, reducing code duplication, and promoting standardization. They may also include built-in validation and error handling, making development more reliable. Ready-made Form Components: UI Component Libraries: Offering ready-made and customizable components, such as buttons and modal windows, that developers can easily integrate into their applications, saving time and effort on designing and coding these elements from scratch. UI Component Libraries: Offering ready-made and customizable components, such as buttons and modal windows, that developers can easily integrate into their applications, saving time and effort on designing and coding these elements from scratch. UI Component Libraries: We analyzed each boilerplate and obtained the following table: extensive-react-boilerplate React Starter Kit react-redux-saga-boilerplate Next-js-Boilerplate landy-react-template core nextjs-boilerplate react-pwa Vitamin next-saas-stripe-starter gatsby-starter-apple fullstack-typescript Documentation + - - + - + + + - + +- - Authentication features + + - + - - - - - + - - Social sign in + + - + - - - - - + - - Internationalization + - - + + - - - - - - - User profile + - - - - - - - - + - - Forms + - - + + - - - - + - - Statement management + + + - - - - + - + - - Tests + - + + - - - + + - - - UI components + + + - + - - + - + - - Eslint + + + + - + - + + + + + Paid - - - + - - - - - - - - Styled- components + - + - + - - + + - + + TypeScript + + + + + + + + + + + + Themes + + + + - - - + + + + - UI Component Material ui Material ui @gilbarbara/ components - antd - Tailwind CSS Material ui Tailwind CSS @radix-ui - Material ui extensive-react-boilerplate React Starter Kit react-redux-saga-boilerplate Next-js-Boilerplate landy-react-template core nextjs-boilerplate react-pwa Vitamin next-saas-stripe-starter gatsby-starter-apple fullstack-typescript Documentation + - - + - + + + - + +- - Authentication features + + - + - - - - - + - - Social sign in + + - + - - - - - + - - Internationalization + - - + + - - - - - - - User profile + - - - - - - - - + - - Forms + - - + + - - - - + - - Statement management + + + - - - - + - + - - Tests + - + + - - - + + - - - UI components + + + - + - - + - + - - Eslint + + + + - + - + + + + + Paid - - - + - - - - - - - - Styled- components + - + - + - - + + - + + TypeScript + + + + + + + + + + + + Themes + + + + - - - + + + + - UI Component Material ui Material ui @gilbarbara/ components - antd - Tailwind CSS Material ui Tailwind CSS @radix-ui - Material ui extensive-react-boilerplate React Starter Kit react-redux-saga-boilerplate Next-js-Boilerplate landy-react-template core nextjs-boilerplate react-pwa Vitamin next-saas-stripe-starter gatsby-starter-apple fullstack-typescript extensive-react-boilerplate extensive-react-boilerplate extensive-react-boilerplate extensive-react-boilerplate extensive-react-boilerplate React Starter Kit React Starter Kit React Starter Kit React Starter Kit React Starter Kit react-redux-saga-boilerplate react-redux-saga-boilerplate react-redux-saga-boilerplate react-redux-saga-boilerplate react-redux-saga-boilerplate Next-js-Boilerplate Next-js-Boilerplate Next-js-Boilerplate Next-js-Boilerplate Next-js-Boilerplate landy-react-template landy-react-template landy-react-template landy-react-template landy-react-template core core core core core nextjs-boilerplate nextjs-boilerplate nextjs-boilerplate nextjs-boilerplate nextjs-boilerplate react-pwa react-pwa react-pwa react-pwa react-pwa Vitamin Vitamin Vitamin Vitamin Vitamin next-saas-stripe-starter next-saas-stripe-starter next-saas-stripe-starter next-saas-stripe-starter next-saas-stripe-starter gatsby-starter-apple gatsby-starter-apple gatsby-starter-apple gatsby-starter-apple gatsby-starter-apple fullstack-typescript fullstack-typescript fullstack-typescript fullstack-typescript fullstack-typescript Documentation + - - + - + + + - + +- - Documentation Documentation Documentation + + - - - - + + - - + + + + + + - - + + +- +- - - Authentication features + + - + - - - - - + - - Authentication features Authentication features Authentication features + + + + - - + + - - - - - - - - - - + + - - - - Social sign in + + - + - - - - - + - - Social sign in Social sign in Social sign in + + + + - - + + - - - - - - - - - - + + - - - - Internationalization + - - + + - - - - - - - Internationalization Internationalization Internationalization + + - - - - + + + + - - - - - - - - - - - - - - User profile + - - - - - - - - + - - User profile User profile User profile + + - - - - - - - - - - - - - - - - + + - - - - Forms + - - + + - - - - + - - Forms Forms Forms + + - - - - + + + + - - - - - - - - + + - - - - Statement management + + + - - - - + - + - - Statement management Statement management Statement management + + + + + + - - - - - - - - + + - - + + - - - - Tests + - + + - - - + + - - - Tests Tests Tests + + - - + + + + - - - - - - + + + + - - - - - - UI components + + + - + - - + - + - - UI components UI components UI components + + + + + + - - + + - - - - + + - - + + - - - - Eslint + + + + - + - + + + + + Eslint Eslint Eslint + + + + + + + + - - + + - - + + + + + + + + + + Paid - - - + - - - - - - - - Paid Paid Paid - - - - - - + + - - - - - - - - - - - - - - - - Styled- components + - + - + - - + + - + + Styled- components Styled- components Styled- components + + - - + + - - + + - - - - + + + + - - + + + + TypeScript + + + + + + + + + + + + TypeScript TypeScript TypeScript + + + + + + + + + + + + + + + + + + + + + + + + Themes + + + + - - - + + + + - Themes Themes Themes + + + + + + + + - - - - - - + + + + + + + + - - UI Component Material ui Material ui @gilbarbara/ components - antd - Tailwind CSS Material ui Tailwind CSS @radix-ui - Material ui UI Component UI Component UI Component Material ui Material ui Material ui Material ui @gilbarbara/ components @gilbarbara/ components - - antd antd - - Tailwind CSS Tailwind CSS Material ui Material ui Tailwind CSS Tailwind CSS @radix-ui @radix-ui - - Material ui Material ui Description of boilerplates from the table Extensive-react-boilerplate . This React boilerplate is designed for all types of projects. It's not only fully compatible with the backend boilerplate nestjs-boilerplate but also stands as an independent solution, which is one of its main advantages. This template offers a wide range of functionalities, such as: Extensive-react-boilerplate Extensive-react-boilerplate nestjs-boilerplate User authentication and authorization, including the possibility of using Google or Facebook accounts. Page private or public access settings. ESLint setup with custom rules to enhance code efficiency and cleanliness. Type safety to ensure the reliability of the written code. Project localization using a custom useLanguage hook. E2E testing support. Light or Dark Mode at the discretion of the user. A library of controlled components based on MUI, integrated with react-hook-form by default. So, no longer a need to spend extra time connecting input fields to controllers. State management using React Query for handling asynchronous operations. User management functionalities (CRUD). Avatar selection and upload feature with dropzone capability. Support for Next.js framework (SSR) for improved application performance and SEO optimization. User authentication and authorization, including the possibility of using Google or Facebook accounts. User authentication and authorization, including the possibility of using Google or Facebook accounts. Page private or public access settings. Page private or public access settings. ESLint setup with custom rules to enhance code efficiency and cleanliness. ESLint setup with custom rules to enhance code efficiency and cleanliness. Type safety to ensure the reliability of the written code. Type safety to ensure the reliability of the written code. Project localization using a custom useLanguage hook. Project localization using a custom useLanguage hook. E2E testing support. E2E testing support. Light or Dark Mode at the discretion of the user. Light or Dark Mode at the discretion of the user. A library of controlled components based on MUI, integrated with react-hook-form by default. So, no longer a need to spend extra time connecting input fields to controllers. A library of controlled components based on MUI, integrated with react-hook-form by default. So, no longer a need to spend extra time connecting input fields to controllers. State management using React Query for handling asynchronous operations. State management using React Query for handling asynchronous operations. User management functionalities (CRUD). User management functionalities (CRUD). Avatar selection and upload feature with dropzone capability. Avatar selection and upload feature with dropzone capability. Support for Next.js framework (SSR) for improved application performance and SEO optimization. Support for Next.js framework (SSR) for improved application performance and SEO optimization. As you can see, from the above mentioned features, this boilerplate significantly reduces the startup time for your project (approximately 193 hours), making it a worthwhile consideration. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only (and has a fully compatible backend boilerplate , thus can be used as Full-Stack Boilerplates), Free. backend boilerplate React-starter-kit . A template for creating web applications based on React. It comes with pre-configured setups such as CSS-in-JS, Vitest, VSCode settings, Cloudflare support, and SSR. A connection to Firestore is used as a database. It includes implementations of some UI components like a toolbar or sidebar based on Joy UI. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free. React-starter-kit React-starter-kit React-redux-saga-boilerplate . A starter project for creating a React application that uses Redux for state management. It provides support for Unit and End 2 End Testing, react-helmet, and uses the Emotion library for styling, simplifying CSS styling with JavaScript. It includes custom components like a header or footer implemented using styled functionality. React-redux-saga-boilerplate React-redux-saga-boilerplate Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Next-js-Boilerplate . This boilerplate has a flexible code structure where you only need to select and save the necessary functionality. It supports integration with Tailwind CSS and authentication with Clerk and is compatible with SQLite, PostgreSQL, and MySQL databases. Unit testing is done using Jest, and the Zod library is used for describing validation schemas. Next-js-Boilerplate Next-js-Boilerplate Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free. Landy-react-template . This boilerplate comes with multilingual support and smooth animations, and all content is stored in JSON files, allowing users to manage texts without prior knowledge of React.js. Contains a set of its own components (button, input, textarea, etc.) created based on styling HTML elements using styled-components. Landy-react-template Landy-react-template Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Core . A modern template was developed based on the fast project creation tool — Vite. It supports TypeScript for type safety and includes good configurations for ESLint, Prettier, CommitLint, Husky, and Lint-Staged. Core Core Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Nextjs-boilerplate . This React boilerplate uses Next.js for static page generation. It supports git message convention, component generation using Plop, and Tailwind CSS for styling organization. Has its Storybook for component documentation. Nextjs-boilerplate Nextjs-boilerplate Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. React-pwa . A ready-made set to start your project from scratch. It consists of a minimalistic combination of core libraries, components, and utilities typically needed by developers when creating React applications. It contains its own HOC for error handling on the page and is developed based on Vite. React-pwa React-pwa Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Vitamin . A starter project containing Tailwind CSS with a basic style reset and a Prettier plugin that automatically organizes your classes. For testing, tools such as Vitest, Testing Library, and Cypress are used, but it does not include React UI Component Libraries. Vitamin Vitamin Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Next-saas-stripe-starter . By using this boilerplate, you can extend the capabilities of your project with features like Next.js, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe. It includes a library of components built using Radix UI and Tailwind CSS. Next-saas-stripe-starter Next-saas-stripe-starter Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Full-Stack Boilerplates, Free. Gatsby-starter-apple . A template for creating applications with a nice responsive design and contains animations for a mobile menu. The basis for styling the used components is styled-components. The boilerplate supports search engine optimization well and has RSS feed capabilities. Gatsby-starter-apple Gatsby-starter-apple Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free. Fullstack-typescript . This boilerplate is a full-stack application for quickly launching your project. It has a library of custom components based on Material UI, and Axios is used for client-server communication. It does not support certain state management technologies like Redux, MobX, etc. Fullstack-typescript Fullstack-typescript Categories: Minimalistic Boilerplates, Boilerplates without Auth, Full-Stack Boilerplates, Free. Peculiarities of implementation of some features In general, React templates offer various implementation features aimed at speeding up and standardizing the development process. They include UI Component Libraries and encompass a general approach to styling, state management, and basic ESLint configurations. React UI Component Libraries The implementation of functionalities in React boilerplates often revolves around modular development, where components are designed to be reusable and composable. Analyzing current libraries and according to this article, the following can be considered the most popular ones: We can say for sure that Material UI is currently the most popular library, with 91.2k GitHub stars and more than 3 million weekly downloads. Thanks to its responsive web design (RWD) feature, you can be confident that your application will automatically adapt to various screens and devices. Styling Solutions Styling solutions such as CSS modules, styled-components, or Sass are usually included in React boilerplates. They offer different approaches to styling components, providing flexibility and scalability while maintaining component encapsulation. Advantages of using styled-components as a styling solution: The library automatically tracks components rendered on the page and applies only their styles. Automatically generates a unique class name for styles, ensuring no errors in class names. Styles are attached to specific components, simplifying the removal of CSS itself. Effortless dynamic styling (code examples below belong to bc-boilerplates). The library automatically tracks components rendered on the page and applies only their styles. Automatically generates a unique class name for styles, ensuring no errors in class names. Styles are attached to specific components, simplifying the removal of CSS itself. Effortless dynamic styling (code examples below belong to bc-boilerplates ). bc-boilerplates const AvatarInputContainer = styled(Box)(({ theme }) => ({ display: "flex", position: "relative", flexDirection: "column", alignItems: "center", padding: theme.spacing(2), marginTop: theme.spacing(2), border: "1px dashed", borderColor: theme.palette.divider, borderRadius: theme.shape.borderRadius, cursor: "pointer", "&:hover": { borderColor: theme.palette.text.primary, }, })); const AvatarInputContainer = styled(Box)(({ theme }) => ({ display: "flex", position: "relative", flexDirection: "column", alignItems: "center", padding: theme.spacing(2), marginTop: theme.spacing(2), border: "1px dashed", borderColor: theme.palette.divider, borderRadius: theme.shape.borderRadius, cursor: "pointer", "&:hover": { borderColor: theme.palette.text.primary, }, })); Using dynamic props of a component during styling. This ensures that the style is updated based on the value of the variable. Using dynamic props of a component during styling. This ensures that the style is updated based on the value of the variable. const StyledCollapseBtn = styled("button") (({ isOpen, theme }) => ({ justifySelf: "flex-end", color: COLOURS.black, backgroundColor: "transparent", border: "none", cursor: "pointer", paddingLeft: theme.spacing(2.5), position: "absolute", bottom:theme.spacing(3), left: isOpen ? "150px" : "unset", })); const StyledCollapseBtn = styled("button") (({ isOpen, theme }) => ({ justifySelf: "flex-end", color: COLOURS.black, backgroundColor: "transparent", border: "none", cursor: "pointer", paddingLeft: theme.spacing(2.5), position: "absolute", bottom:theme.spacing(3), left: isOpen ? "150px" : "unset", })); This allows for the reuse of styles from one component to another or for influencing one component over another (parent-child relationship). This allows for the reuse of styles from one component to another or for influencing one component over another (parent-child relationship). const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: #BF4F74; `; const Icon = styled.svg` flex: none; transition: fill 0.25s; width: 48px; height: 48px; ${Link}:hover & { fill: rebeccapurple; } `; const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: #BF4F74; `; const Icon = styled.svg` flex: none; transition: fill 0.25s; width: 48px; height: 48px; ${Link}:hover & { fill: rebeccapurple; } `; State Management State management is another important aspect that simplifies application state handling, providing scalability and maintainability, especially in complex applications. Usually, Redux, MobX, and Zustand come to mind when choosing a state management tool. However, they are client-side libraries, and compared to a tool like React Query, their application for storing asynchronous data may not be as efficient. React Query is a server-state library. It is responsible not only for managing asynchronous operations between the server and the client but also provides ready-to-use functionality for searching, caching, and updating data in React and Next.js applications. With just a few lines of code, React Query replaces the boilerplate code used to manage cached data in your client state. ESLint Rules in Boilerplates The efficiency of using ESLint rules during the development of your project is also manifested in writing custom rules. Since ESLint has extensive functionality and flexibility, you can create not only formatting and rules but also consider internal project decisions. For example, when working with forms, it is possible to control and warn developers about possible unnecessary renders, incorrect solutions when working with objects, or simply point out unused imports. For example, extensive-react-boilerplate addresses such issues as follows: extensive-react-boilerplate extensive-react-boilerplate warn about rules regarding incorrect usage of patterns warn about rules regarding incorrect usage of patterns { "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]", "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\"" }, { "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]", "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\"" }, { "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])", "message": "Use theme.spacing() instead of literal." }, { "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))", "message": "Use key created via createQueryKeys function instead of your solution" }, { "selector": "CallExpression[callee.name=refresh]", "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey." }, { "selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]", "message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead." } { "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]", "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\"" }, { "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]", "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\"" }, { "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])", "message": "Use theme.spacing() instead of literal." }, { "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))", "message": "Use key created via createQueryKeys function instead of your solution" }, { "selector": "CallExpression[callee.name=refresh]", "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey." }, { "selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]", "message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead." } inform about the possibility of uncontrolled renders inform about the possibility of uncontrolled renders { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]", "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]", "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]", "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]", "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component." }, { "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))", "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main" } { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]", "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]", "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]", "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component." }, { "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]", "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component." }, { "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))", "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main" } Conclusion The choice of an effective React template is crucial for the success of your project. Instead of reinventing the wheel, leveraging the power of a well-chosen boilerplate can significantly speed up your development process and create a solid foundation. When selecting a boilerplate, we recommend familiarizing yourself with its directory structure and configuration files to understand its underlying foundation, ease of integration, modularity, and maximum alignment with technical requirements. Consider whether the available features can provide the functions you need. This can save development time and potentially offer well-maintained and tested code and, ultimately, streamline development and ensure project success.