Best Practice Boilerplate React JS

This is a boilerplate for React JS projects that follows best practices, including a feature-based folder structure.

Folder Structure

boilerplate-reactjs-feature-based\
├───.gitignore
├───.prettierignore
├───.prettierrc
├───eslint.config.js
├───index.html
├───package-lock.json
├───package.json
├───README.md
├───tsconfig.app.json
├───tsconfig.json
├───tsconfig.node.json
├───vite.config.ts
├───node_modules\...
├───public\
│   └───assets\
│       ├───react.svg
│       └───vite.svg
└───src\
    ├───app\
    │   ├───App.css
    │   ├───App.tsx
    │   └───main.tsx
    ├───components\
    │   ├───atoms\
    │   │   ├───Button.tsx
    │   │   └───Text.tsx
    │   ├───layouts\
    │   │   └───LandingPage.tsx
    │   ├───molecules\
    │   │   ├───Avatar.tsx
    │   │   └───CounterDisplay.tsx
    │   ├───organisms\
    │   │   ├───Footer.tsx
    │   │   └───Navbar.tsx
    │   └───pages\
    │       ├───CounterPage.tsx
    │       └───HomePage.tsx
    ├───features\
    │   └───counter\
    │       ├───Counter.tsx
    │       └───counterSlice.ts
    ├───hooks\
    │   ├───useToggle.test.ts
    │   └───useToggle.ts
    ├───lib\
    │   └───utils.ts
    ├───store\
    │   ├───rootReducer.ts
    │   └───store.ts
    ├───styles\
    │   └───index.css
    ├───tests\
    │   └───setup.ts
    └───types\
        └───vite-env.d.ts

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd boilerplate-reactjs-feature-based

3. Install dependencies:

   npm install

Available Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the app for production.
• npm run lint: Lints the code.
• npm run preview: Previews the production build.
• npm run prettier: Formats the code with Prettier.
• npm test: Runs the tests.