React Starter Kit

Overview

Duy’s React Starter Kit is a project based on Create React App that provides additional features and customizable options. It includes Webpack 5, Tailwind 2+, TypeScript 4, react-router-dom for router support, recoil + react-query for state management, i18n with i18next for internationalization, framer-motion for animations, and more. It also comes with pre-configured tools such as ESLint, Babel, Jest, Cypress, and Docker for development and deployment. Overall, it offers a flexible and opinionated setup for developing React applications.

Features

• Webpack 5 with dynamic import(), react-refresh, modern JSX, and build optimizations
• Tailwind 2+ with the option to opt-in or opt-out
• TypeScript 4 support
• Router support with react-router-dom
• State management with recoil + react-query
• Internationalization support with i18next
• Animation support with framer-motion
• SASS and CSS Module support with PostCSS and autoprefixer
• Babel in Stage 1 with tree-shaking support for ramda and date-fns

Installation

To install Duy’s React Starter Kit, you can follow these steps:

1. Clone the project using SSH: git clone [project SSH URL].
2. Create a new repository for the project.
3. Configure the environment by copying the example file: cp .env.example .env.
4. Edit the .env file to set the local environment variables.
5. Configure aliases in the tsconfig.json file under compilerOptions.paths.
6. Start the development environment:
   • With Docker: docker-compose up --build -d.
   • Without Docker: yarn start.

For other commands like running tests, debugging tests, linting code, fixing code, rebuilding the project, and running the production image, please refer to the documentation or package.json file.

Summary

Duy’s React Starter Kit is a customizable and feature-rich project based on Create React App. It offers enhancements such as Webpack 5, Tailwind 2+, TypeScript 4, and various other tools for development and deployment. The installation process is straightforward, and the kit provides a flexible setup for building React applications.