Clean React App

screenshot of Clean React App
express
react
scss

Clean React App

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

Overview:

Clean React App is an open-source project that allows developers to create React applications using Clean Architecture without the need for complex build configurations. The app is compatible with macOS, Windows, and Linux and includes several features such as local storage, HTTP client, webpack configuration, testing settings, authentication, and more. The project is open to contributions and encourages users to raise any issues they encounter.

Features:

  • Clean Architecture implementation for React applications
  • Local storage adapter for data persistence
  • Axios as the HTTP client for making API requests
  • Webpack configured for both development and production environments
  • End-to-end testing settings with Cypress
  • Unit testing support with Jest
  • Husky with pre-push to automatically run unit tests
  • Authentication system with validation
  • Reusable validation layer
  • Hooks for simplified API calls and form submissions
  • Private route configuration to control access
  • Login page with form and error handling
  • Registration page with form and reusable components
  • Dashboard page as a starting point for development

Installation:

  1. Ensure NodeJS version 14.20.0 is installed (recommend using nvm for easier version management).
  2. Install Yarn.
  3. Open the terminal and clone the project repository using the following command:
    git clone https://github.com/rubemfsv/clean-react-app.git
    
  4. Change directory to the cloned project:
    cd clean-react-app
    
  5. Install project dependencies:
    yarn
    
  6. Update the URLs in the webpack.dev.js and webpack.prod.js files to match your real URLs.
  7. Start the development server:
    yarn dev
    

Additional commands available:

  • To run Jest unit tests: yarn test
  • To run Cypress end-to-end tests: yarn test:e2e (command may be different for Linux or Windows users, but can be adjusted)
  • To start the project in production webpack mode: yarn start

Note: The package.json file contains additional scripts that can be run using node and yarn.

Summary:

Clean React App is an open-source project that provides a boilerplate for creating React applications following Clean Architecture principles. It offers various features such as local storage, HTTP client, testing settings, authentication, and more. Developers can easily install the app by cloning the repository, installing dependencies, and starting the development server. The project encourages contributions and issue reporting to continually improve the app's functionality.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.