Set up a modern web app with clean architecture by running one command.

Overview

Clean React App

PRs Welcome Open Source Node Version React Version

Logo

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.

Quick Overview

npx @rubemfsv/clean-react-app my-app
cd my-app
npm start or npm run dev


This boilerplate contains the following settings:

  • Local storage adapter;
  • Axios as HTTP Client;
  • Webpack configured for development and production environments;
  • Basic end-to-end test settings with Cypress;
  • Unit tests with Jest;
  • Husky with pre-push to run unit tests;
  • Authentication with validations;
  • Validation layer for reuse of validations;
  • Some hooks to help with API calls and form submissions;
  • Private route configured;
  • Three pages to help improve productivity:
    • Login page
    • Sign up page
    • Dashboard


👷 Installation

You must first have installed NodeJS in its 14.20.0 version (I recommend nvm to deal with versions), Yarn, and then:

git clone https://github.com/rubemfsv/clean-react-app.git

Step 1:

cd clean-react-app - access the project files

Step 2:

yarn (or npm install) - to install dependencies

Step 3:

Change your webpack.dev.js and webpack.prod.js env url to your real urls

Step 4:

yarn dev (or npm run dev) - to initialize the project under development

Observations:

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 node_modules/.bin/cypress open)

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



📂 Architecture

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.

Login page

🖥️ 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.

Sign up page

🖥️ 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.

Dashboard page



📑 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.



🐛 Issues

If something doesn’t work, please file an issue.


You might also like...

Fill the boring catsalud covid vaccine form with a console command

vacunacovid-catsalud-autofullfill form Fill the boring catsalud covid vaccine form with a console command Manual use, pasting in the script in the con

Jul 27, 2021

This command line helps you create components, pages and even redux implementation for your react project

This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Dec 10, 2022

shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java processes to load a Java/JVMTI agent regardless of whether or not the JVM has disabled the agent attach API.

shouganaiyo-loader: Forced Entry for Java Agents shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java process

Sep 19, 2022

Start developing LIFF application with a simple CLI command.

@line/create-liff-app Start developing LIFF application with a simple CLI command. About LIFF Templates Getting Started Create LIFF Channel Installati

Nov 10, 2022

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift 🏎 Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Dec 28, 2022

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Jan 2, 2023

A set of React components implementing Google's Material Design specification with the power of CSS Modules

A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

Dec 30, 2022

nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Dec 31, 2022

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

Dec 22, 2022
Comments
  • Erro de versões da biblioteca html-webpack-plugin

    Erro de versões da biblioteca html-webpack-plugin

    Tentei usar o projeto como boilerplate, porém dá conflito entre as versões do html-webpack-plugin. Vou tentar abrir um PR consertando, porém, se puder olhar isso também. Pode acontecer com outros que forem usar o projeto.

    image

    opened by tech3br 0
Owner
Rubem Vasconcelos
Senior Software Engineer at Pontomais
Rubem Vasconcelos
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Super St@r 10 Oct 16, 2022
Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Sonnat 2 Jan 31, 2022
The chat app built with microservice architecture, the app using: Lerna, pm2, GraphQL

Microservice Chat App A microservice app! Built With Lerna pm2 Graphql Sequelize Socket.io About The Project Here's why: I want learn socket.io and mi

A.Samet Palitci 26 Aug 27, 2022
You can use this CLI Tool to clean your iOS and Android projects and keep them updated.

Mobile App Cleaner You can use this CLI Tool to clean your iOS and Android projects and keep them updated. This tool automatizes these items below; Cl

automizer 21 Mar 19, 2022
A portfolio built in React and NextJS. Simple, clean, and fast.

Personal Portfolio A portfolio built in React and NextJS. Simple, clean and fast. Note: The logo and banner used in the project are my intellectual pr

Vipul Jha 98 Jan 2, 2023
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
Very simple app to decode your Vaccination Proof QR Code (such as the one provided by government of Quebec) - Compatible with SHC (Smart Health Card standard)

shc-covid19-decoder Visit simple hosted version on your phone (does NOT transmit any data, all remains in your browser) https://fproulx.github.io/shc-

François Proulx 148 Sep 23, 2022
This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler. The current features of the application include : Code Runner , Upcoming and Ongoing Contests.

ABHAY GUPTA 6 Dec 3, 2022
🌈 React for interactive command-line apps

React for CLIs. Build and test your CLI output using components. Ink provides the same component-based UI building experience that React offers in the

Vadim Demedes 19.7k Jan 3, 2023
Salesforce Commerce Cloud ODS Command Center

ODS Command center The On Demand Sandbox Command Center is a GUI tool which usessfcc-ci under the hood. It aims to provide a simple interface for runn

Sachin Upmanyu 18 Sep 20, 2022