My React App Boilerplate
Prerequisites:
- Node.js LTS version
Start local dev environment
Install npm dependencies:
yarnThen you can use following command to start dev environment for frontend:
yarn startRepository Structure
frontendpublic: Contains html skeleton of the application, can edit meta tags, icons, titles, ...src: Contains source codepages: Contains app's main pagecomponents: Contains components used in the app, component folders are named after pagesstyles: Contains global.scsstypes: Contains TypeScript common custom typeutils: Contains common utility functionsconstants: Contants common const valuesredux: Contains Redux's store and Redux's hooks
index.tsx: App entryroutes.tsx: Contains app's url mapping (using React Router)- And a lot of config, including
ESLint,Prettier,TailwindCSS, ...
Tools used
TailwindCSS
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
React Redux
Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
ESLint
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
Prettier
An opinionated code formatter; Supports many languages; Integrates with most editors.
lint-staged
The concept of lint-staged is to run configured linter (or other) tasks on files that are staged in git.
Husky
Husky improves your commits and more 🐶 woof!
You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.
License
MIT
Contributing
Please follow below guideline when contributing to this project
- Conventional commit: https://www.conventionalcommits.org/en/v1.0.0/