React boilerplate

Things that are configured:

Tailwind CSS
Husky pre commit hook
Eslint (Airbnb)
Prettier
Redux included Store and base configs and authentication slice

Getting started

git clone https://github.com/mh-jsx/react-boilerplate-with-tailwind

npm i -g yarn

yarn # install the dependencies

yarn start

Husky Pre-Commit:

Husky pre-commit hook will test linting and prettier rules. If you got an error on commit, try running fix scripts.

yarn run fix:prettier
# and
yarn run fix:lint

# or
yarn run fix

## If yous still got an Linting error on Commit, You have to manually fix the linting errors.

Run Tests:

To run test cases run the following script.

yarn run test:app

Scripts explained

    start: "react-scripts start", # run the app in dev mode
    build: "react-scripts build", # create a optimze build
    eject: "react-scripts eject", # gives you full control over the React app configuration
    prepare: "husky install", # add husky script config in package.json file
    test:app: "react-scripts test", # top run test scripts
    test: "npm run test:prettier && npm run test:lint", # run prettier and lint test scripts
    test:lint: "eslint . --ext .js,.jsx,.ts,.tsx", # testing eslint rules for all fiven file extensions
    test:prettier: "prettier --check .", # test prettier rules
    fix: "npm run fix:lint && npm run fix:prettier", # run prettier and eslint fix scripts
    fix:lint: "eslint . --ext .js,.jsx,.ts,.tsx --fix", # fix lint warnings. Note: you have manually fix errors
    fix:prettier: "prettier --write ." # apply prettier rules (.prettierrc) on all files

Folder Structure

📦src
┣ 📂assets - should contain assets, make sure to create separate folder for each asset type, i.e videos, images, icons.
┣ 📂components - should contain components reusable as well as component for individual page.
┣ 📂components
┃ ┗ 📂common - should contain reusable components.
┣ 📂constants - should contain constants, i.e enums, validation rules, or any global constant.
┣ 📂data - should contain fake/constant json data.
┣ 📂hooks - hooks.
┣ 📂layout - layout components, i.e Header, Footer, Aside.
┣ 📂pages - pages that map to a route.
┃ ┣ 📂auth - each page consist of folder which contains jsx file and a redux slice file.
┃ ┃ ┗ 📜authSlice.js
┃ ┃ ┗ 📜Index.jsx
┃ ┗ 📜Home.jsx
┣ 📂routes - each page consist of folder which contains jsx file and a redux slice file.
┣ 📂services - should contain services, it might be a firebase service or api's, etc.
┃ ┗ 📂api
┣ 📂store - should contain store configs, i.e redux-store, zustand-store.
┣ 📂styles - contains css styles.
┣ 📂utils contains js utilities.

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!