React Clean Architecture Boilerplate

Table of Contents

• React Clean Architecture Boilerplate
• Overview
  • Technologies
• Architecture
• Getting Started
  • Development
  • Production
    • Simple Build
    • Build with Docker
• Naming Convetions

Overview

React Clean Architecture Boilerplate is a project for implementing clean architecture in react app as a green field for big projects

Technologies

• language: Typescript
• framework: React
• state management: Zustand
• testing tools: Vitest
• lintins: ESlint
• module bundler: Vite
• HTTP client: Axios
• component library: MUI
• css in js: Styled Components
• i18n: I18Next
• dependency injection: tsyringe
• functional programming: fp-ts
• reactive programming: rxjs

Architecture

src

├── app/
│   ├── core/
│   │   └── users/
│   │       ├── store
│   │       ├── model
│   │       ├── view/
│   │       │   ├── stories
│   │       │   ├── style
│   │       │   ├── component.tsx
│   │       │   └── i-vm
│   │       ├── model
│   │       └── page
│   ├── support
│   └── generic
├── feature/
│   ├── core/
│   │   └── users/
│   │       ├── data/
│   │       │   ├── datasource
│   │       │   ├── repository
│   │       │   └── dto
│   │       └── domain/
│   │           ├── failure
│   │           ├── i-repository
│   │           ├── entity
│   │           └── usecase
│   ├── support
│   └── generic
├── bootstrap/
│   ├── boundary
│   ├── config
│   ├── di
│   ├── endpoint
│   ├── global-types
│   ├── helper
│   └── i18n
└── test/
    ├── common
    ├── unit
    ├── e2e
    └── integration

This boilerplate uses clean architecture for developing that consists three layers:

• Features
  this layer represents business logics. all the core functionality of the app resides in this layer that consists data, entity and usecase sections

• Applicaiton
  this layer is responsible for main application behavior and controlls what to show in UI that consists model, viewmodel and view sections

• Bootstrap
  this layer is responsible for connecting layers to eachother, provides external libraries for them and wrap third-party libraries and base configuration of the framework and the app.

  note: for more information about the architecture you can take a look at the full-documentation of the project

Getting Started

Development

 yarn dev / npm run dev

Production

Simple Build

yarn build

for running the built project, localy you can use following commands after building.

npm i -g serve
serve dist

Build with Docker

1. at first you should define your environment variables.

Note: You can get needed variables from docker-compose file

for running with docker-compose, you can set these environment variable in docker-compose file in the args.

  docker-compose -f docker-compose.yml up [-d] [--build] [--foce-recreate]

naming convetions:

1. all folders follow the kebab-case convention for naming.
2. all files follow the kebab-case convention for naming.
3. all variables and functions follow the camelCase convention for naming.