A clean and modern foundation for crafting robust and maintainable React applications, inspired by Clean Architecture.
To create a new project based on this template, run:
# Recommended method
npx create-react-clean
# Alternative with npm 6+
npm init react-clean
# Alternative with npm 7+
npm create react-clean
- 🛡️ Modular and Clean Folder Structure for a clear and scalable organization.
- 🧭 Separation of Concerns to have a separation between Domain, Application , Infrastructure and Presenter.
- ⚙️ Dependency Injection Ready to add flexibility with Awilix
- 🧱 Minimal and Simple Dependencies just to start your application
- React : https://react.dev/
- TypeScript : https://www.typescriptlang.org/
- Tailwind : https://tailwindcss.com/
- Awilix : https://www.npmjs.com/package/awilix
- Vite : https://vite.dev/
- Application : Business logic layer who specified each rules by useCase
- Di : configuration layer for dependencies inversion
- Domain : Business logic layer which is totaly independant from other layer
- Infrastructure : Business logic layer which is totaly independant from other layer
- Awilix : https://www.npmjs.com/package/awilix
- Vite : https://vite.dev/
src/
├── application/
│ └── useCases/
│ └── /todo/
│ └── /get-todos.usecase.ts
│ └── /create-todo.usecase.ts
│ └── /get-todo-by-user.usecase.ts
│ └── /auth/
│ └── /signin.usecase.ts
│ └── /signup.usecase.ts
├── assets/
├── di/
│ └── ioc.ts
├── domain/
│ ├── entities/
│ ├── repositories/
├── infrastructure/
│ ├── http/
│ └── repositories/
│ └── store/
│ └── test/
├── presenter
├── pages/
├── Todo/
├── TodoList.page.tsx
├── TodoList.viewmodel.tsx
This template is inspired by Robert C. Martin (Uncle Bob)'s Clean Architecture principles.
The goal is to:
Isolate business logic (domain + use cases) Keep infrastructure replaceable (DB, HTTP, etc.) Promote testability and scalability
MIT – feel free to use and modify!