Clean React App
Create React apps using Clean Architecture with no build configuration.
- User Guide – How to develop apps bootstrapped with Clean React App.
Clean React App works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.
npx @rubemfsv/clean-react-app my-app cd my-app npm start or npm run dev
git clone https://github.com/rubemfsv/clean-react-app.git
cd clean-react-app – access the project files
npm install) – to install dependencies
webpack.prod.js env url to your real urls
yarn dev (or
npm run dev) – to initialize the project under development
yarn test (or
npm run test) – to run jest unit testing
yarn test:e2e (or
npm run test:e2e) – to run cypress e2e testing (if you use linux or windows, the command may change because of the , but you can change the script or run it by
yarn start (or
npm start) – to initialize the project under production webpack;
In the package.json file, there are scripts that you can run with node and yarn
The architecture used in this project was the Clean Architecture, using the concepts proposed by Roberto Martin. To know how to implement this architecture, there is an article applying this Architecture with React that describes very well the thought line.
cypress/ src/ data/ protocols/ test/ usecases/ domain/ errors/ models/ test/ usecases/ infra/ cache/ http/ test/ main/ adapters/ config/ decorators/ factories/ cache/ decorators/ http/ pages/ usecases/ routes/ scripts/ index.tsx presentation/ assets/ fonts/ images/ components/ hooks/ pages/ protocols/ routes/ styles/ test/ validation/ errors/ protocols/ test/ validators/
🖥️ Login page
It’s a simple login page with a form and error handling. It already has input, button, field and loader components.
🖥️ Sign up page
It is a registration page with a form that receives the username, email, password and password confirmation. It already has error handling and reused components.
🖥️ Dashboard page
It is an empty page that is redirected after successful login. It’s there to help with development, saving time by being the starting point.
📑 Branches and contributions
As this project is intended to be open source and free for everyone to use, feel free to contribute improvements.
If something can be improved, just create a branch from
main and make a Pull Request with the suggestions.
If something doesn’t work, please file an issue.