React Clean Architecture

A React scaffold with a clean architecture that is easy to understand.

Features

• 📁 Clean architecture. Layered file structure
• 🛡️ TypeScript bulletproof typing
• ⚡ Development environment: Vite
• 🎨 Design System and UI: Tailwind CSS + Headless UI
• 🖌️ Code format: ESLint
• 🐩 Git hooks: Husky
• 💉 Dependency injection: InversifySugar
• 🌍 I18n: i18next
• 🚢 Navigation: React Router
• 🧰 State Manager: Mobx

📁 Project File Structure

⚠️ What makes the implementation of the clean architecture concept more difficult in my opinion is that since it is defined theoretically, each person implements it using different terminology or omitting/adding some layers or pieces to simplify it or continue to make it more complex.

For this reason, I think it is important to emphasize the documentation that accompanies the architecture to avoid obstacles with the rest of the people who are going to work with this system.

I briefly explain each of the four layers that make up clean architecture within the /src folder:

└── /src
    ├── AppModule.ts               # Dependency injection root module
    ├── /core                      # Core bounded context
    │   └── /presentation
    └── /post                      # Post bounded context
        ├── /domain
        ├── /application
        ├── /infrastructure
        └── /presentation

Domain

This layer contains all the enterprise business rules: entities, specifications...

Application

This layer contains the use cases of the bounded context.

Infrastructure

This layer contains the technical details (implementation) of the domain layer and third parties integrations.

Presentation

This layer contains the React source code: views and controllers (Mobx controllers).

Referencesw

• https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
• https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/

Run

Dev

yarn dev

Tailwind dev

yarn tailwindcss:dev

Build

yarn build

Tailwind build

yarn tailwindcss:build

Support the project

☕️ Buy me a coffee so the open source party never ends.

YouTube | Instagram | Twitter | Facebook

godofprogramming.com