https://github.com/carlossalasamper/react-clean-architecture
🧅 A React scaffold with a clean architecture that is easy to understand.
https://github.com/carlossalasamper/react-clean-architecture
clean-architecture clean-code ddd ddd-architecture dependency-injection dependency-inversion inversify inversifyjs mobx mobx-react react scaffold web-development
Last synced: 8 months ago
JSON representation
🧅 A React scaffold with a clean architecture that is easy to understand.
- Host: GitHub
- URL: https://github.com/carlossalasamper/react-clean-architecture
- Owner: carlossalasamper
- License: mit
- Created: 2023-12-08T12:39:27.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-19T14:30:26.000Z (over 1 year ago)
- Last Synced: 2025-03-30T01:36:34.957Z (about 1 year ago)
- Topics: clean-architecture, clean-code, ddd, ddd-architecture, dependency-injection, dependency-inversion, inversify, inversifyjs, mobx, mobx-react, react, scaffold, web-development
- Language: TypeScript
- Homepage:
- Size: 663 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://vitejs.dev/)
- 🎨 Design System and UI: [Tailwind CSS](https://tailwindcss.com/) + [Headless UI](https://headlessui.com/)
- 🖌️ Code format: [ESLint](https://eslint.org/)
- 🐩 Git hooks: [Husky](https://www.npmjs.com/package/husky)
- 💉 Dependency injection: [Inversiland](https://github.com/inversiland/inversiland)
- 🌍 I18n: [i18next](https://www.i18next.com)
- 🚢 Navigation: [React Router](https://reactrouter.com/en/main)
- 🧰 State Manager: [Mobx](https://mobx.js.org/)
## 📁 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
```bash
yarn dev
```
Tailwind dev
```bash
yarn tailwindcss:dev
```
Build
```bash
yarn build
```
Tailwind build
```bash
yarn tailwindcss:build
```
## Support the project
☕️ Buy me a coffee so the open source party will never end.
YouTube |
Instagram |
Twitter |
Facebook