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...
A weather application that uses React-Typescript and favors a multi-layered architecture.

Getting Started with Create React App This project was bootstrapped with Create React App. Run with npm run start A simple weather widget that display

a simple implement of react redux, redux-thunk with hexagonal architecture
a simple implement of react redux, redux-thunk with hexagonal architecture

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture
Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch fea

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React
A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

A tiny example set up for using gRPC-Web with Go and React

Small Go/React/TypeScript gRPC-Web example

🦄 A modern web client for SFTP, S3, FTP, WebDAV, Git, Minio, LDAP, CalDAV, CardDAV, Mysql, Backblaze, ...
🦄 A modern web client for SFTP, S3, FTP, WebDAV, Git, Minio, LDAP, CalDAV, CardDAV, Mysql, Backblaze, ...

A Dropbox-like file manager that let you manage your data anywhere it is located: FTP • FTPS • SFTP • WebDAV • Git • S3 • LDAP • Mysql CardDAV • CalDA

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Welcome to Remix! Remix is a framework for building better websites using modern web standards and best practices. We are happy you're here! This repo

Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time
Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.

Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.

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
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 129 Sep 24, 2022
Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site"

cypress-local-https Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site" Read the blog post

Gleb Bahmutov 2 Dec 21, 2021
An hexagonal architecture approach for a Remix Todo List Manager app

Todo List Manager This project showcases an hexagonal architecture approach for front-end projects. This is a Remix application, you may want to check

Antoine Chalifour 61 Sep 25, 2022
A simple command line notebook for programmers

Dnote is a simple command line notebook for programmers. It keeps you focused by providing a way of effortlessly capturing and retrieving information

Dnote 2.4k Sep 28, 2022
Vercel 39.3k Sep 24, 2022
kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

Tim 3.2k Sep 29, 2022
⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.

ScoutBar ⌨️ Spolight for your app See Demo On Codesandbox See Documentation ⚡️ Overview Users enjoy hitting CMD + K to search and perform complex acti

Adenekan Wonderful 92 Sep 4, 2022
A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query ?? Tailwind CSS ?? Google Analytics

Luísa Ribeiro Bezerra 18 Apr 6, 2022
A portfolio built in React and NextJS. Simple, clean, and fast.

A portfolio built in React and NextJS. Simple, clean, and fast.

Vipul Jha 88 Sep 26, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Sijeesh Miziha 40 Sep 25, 2022