Template React project in clean architecture

A clean and modern foundation for crafting robust and maintainable React applications, inspired by Clean Architecture.

🚀 Getting Started

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

⚔️ Features

🛡️ 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

🛠️ Tech Stack

React : https://react.dev/
TypeScript : https://www.typescriptlang.org/
Tailwind : https://tailwindcss.com/
Awilix : https://www.npmjs.com/package/awilix
Vite : https://vite.dev/

🗂️ Project Structure

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

🧠 Clean Architecture Overview

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

📄 License

MIT – feel free to use and modify!

Package detail

create-react-clean

readme