README

react-auto-template

Create react template with clean architecture. Included with react routing, redux, redux-thunk, Bootstrap. Just install and start your coding.

Feedback

https://forms.gle/wAmoScfKzdsTEXEHA

Quick Overview

npx react-auto-clean-template@latest my-app
cd my-app
npm start

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

Philosophy

high-level-diagram

The nomenclature may vary, but the concept behind this architectural pattern is: the domain dictates how tools should be organized and not the other way around. What I mean by that is that we should organize our codebase around the business rules and not around the frameworks we use to achieve business rules. The diagram above shows how the dependency rule works, the inner circles must not know about the outer circles. That is, there cannot be an import of a use case within an entity, or import of a framework within a use case. Another important rule is: entities and use cases should not rely on external libraries. The explanation is simple, the core of our application must be robust enough and malleable enough to meet the demands of the business without needing any external intervention. If by chance, an essential part of the application core MUST BE an external dependency. Dependency needs to be modeled following dependency inversion principle.

Communication flow

communication-flow-diagram

A brief explanation of each responsibility

Entity: Application independent business rules
Interactor: Application-specific business rules
Adapter: Glue code from/to Interactors and Presenter, most of the time implementing a framework-specific behaviour. e. g.: We have to connect Interactor with react container, to do so, we have to connect Interactor with redux (framework) and then connect redux to container components.
Presenter: Maps data from/to Adapter to/from Components.
Components: Simplest possible unit of presentation. Any mapping, conversion, MUST be done by the Presenter.

A typical top-level directory layout

.
├── public
└── src
    ├── Components      # All common components
    ├── Containers      # All pages
    ├── Core            # Base redux, base redux store, base layouts, routes setup
    ├── Layouts         # Public, private layouts
    ├── Routes          # Public, private route configurations
    ├── constants       # All constants
    ├── reducers        # All reducers
    ├── styles          # Styles. SCSS
    └── test            # Test

Usage no npm install needed!