Clean architecture template for react and vite 🚀

React Clean Architecture Template 🏗️

Stars are welcome 😊 Report an error 🐛 Contact us 🤔

🚀 Getting started

⬇️ Template downloading

npx degit codescouts-academy/react-clean-architecture my-app

🏂 Install dependencies

npm i

🏁 Start

npm run dev

🥋 Dependencies

• 🧪 codescouts/test -> Jest & Vite mocking library easy to use
• 💉 codescouts/di -> agnostic ependency injection container
• ⚡️ codescouts/events -> agnostic library to create and handle domain events
• 🛟 codescouts/store -> reactive store to allow update ui from domain
• 👩‍💻 codescouts/ui -> components for events and di only for react

👩‍💻 Project explanation

📁 Recommended folder structure

public/
├── favicon.png --> CodeScouts's logo
│
src/
├── application/ Our use cases
│   ├── add-log-user-case.test --> add-log-use-case tests
│   └── add-log-use-case.ts --> Here we model the use cases
├── domain/ Our Business logic
│   ├── events --> Here we model the domain events
│   ├── model --> Here we model our business logic
│   └── services --> Here exists the domain services (only abstractions)
│
├── infrastructure/ Our external services implementations
│   └── services
│       └── LoggerService.ts
│
├── ui/ React things
│   ├── components/ --> stateless components
│   └── pages/
│       └── home/
│           ├── Home.tsx --> Page component (View)
│           └── useHomeViewModel.ts --> Home UI business logic (ViewModel)
│
├── App.tsx
├── di.ts --> Dependency injection configuration
└── main.tsx --> Main component loaded, referenced in index.html

🤔 Contributing

If you find any mistake, you think there are things to improve or simply want to contribute, you are welcome. Just make a fork and send us your PR 🙏.

LICENSE

Released under MIT by @codescouts-academy.