Valle Web Client MVP

Scalable React APP architecture with Flux and PRPL pattern.

Features

• Custom webpack configs for production WPO.
• Single Page App.
• Client side .env file for all API path.
• Single Page App.
• Easy multiple shells with custom routers.
• Immutable data structure by Immutable.js.
• Auth validations.
• Fake RESTFull server for development.
• Complete HTTP error handler.
• Custom hooks for fetch data.
• Custom hook for input data.
• Custom hook for keyboard controls.
• Async loaders for fetch data.
• Flux architecture.
  • Redux for data management.
  • Redux Thunk for action creators.
  • Generic async actions for CRUD any data with any RESTFull API.
  • Generic reducers for for CRUD any data with any RESTFull API.
• Custom PRPL pattern.
  • Push critical dependencies.
  • Render a minimal bundle.
  • Pre-push with Service Workers.
  • Lazy loading all code splitted bundles.
• Offline session data with sessionStorage.
• Offline user data with localStorage.
• Offline complex data with indexdDB.
• Unit tests and coverage with Jest and Enzyme.
• Code style guide with ESLint for validate the style and code quality.
• Robust CSS architecture.
  • Modularized with CSS Loader.
  • CSS Lint for performance and cross borwser validations.
  • BEM methodology for naming conventions.
  • CSScomb for autoformat all CSS files.
• Webcomponents with webpack loader.
• SVG with webpack loader.
• Custom themes with CSS custom properties.
• Dynamic title with react helmet.
• All components docs with storybook.
• Custom 404 page.
• Custom ENV for DEBUG.

Concepts

Architecture

A Flux based architecture using Redux for data flow management, Redux Thunk for action creators and localstorage for client side database.

Custom PRPL pattern.

A custom PRPL pattern, using multiple App shells and code splitting.

Sources:

• Redux docs
• Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)
• Google Progressive Web Apps Training
• HTML5 Local storage vs. Session storage
• Effective Code Splitting in React: A Practical Guide
• Where and When to Fetch Data With Redux
• Immutable.js is intimidating. Here’s how to get started.

Development

Getting started

Clone this repository and install its dependencies:

$ git clone https://github.com/valleweb/valle-web-client-mvp.git
$ cd valle-web-client-mvp
$ yarn

Configure your environment following the .env.example file.

Build / Start App

Builds and start the App (with local server and livereload):

$ yarn start

Run fake RESTFull API with JWT

Go to ./server folder and install its dependencies:

$ cd server
$ yarn

Run fake server with auth:

$ yarn start

See all docs

Folders structure

All files and folders:

.
├── README.md
├── CONTRIBUTING.md
├── scripts/
├── .storybook/
├── .out/
├── .dist/
├── config/
├── docs/
├── server/
├── tests/
|   ├──setup/
|   └──components/
|       ├── atoms/
|       ├── molecules/
|       └── organisms/
├── stories/
|   ├── atoms/
|   ├── molecules/
|   ├── organisms/
|   ├── templates/
|   └── pages/
├── storybook/
├── src/
|   ├── assets/
|   |   ├── icons/
|   |   |── styles/
|   |   |   ├── components/
|   |   |   |   ├── atoms/
|   |   |   |   ├── molecules/
|   |   |   |   └── organisms/
|   |   |   ├── layouts/
|   |   |   ├── shell/
|   |   |   ├── views/
|   |   |   └── global.css
|   |   └── scripts/
|   |       ├── actionCreators/
|   |       |   ├── auth/
|   |       |   ├── theme/
|   |       |   └── generic/
|   |       ├── components/
|   |       |   ├── atoms/
|   |       |   ├── molecules/
|   |       |   └── organisms/
|   |       ├── config/
|   |       ├── db/
|   |       ├── helpers/
|   |       ├── hooks/
|   |       ├── shell/
|   |       |   ├── layouts/
|   |       |   |   ├── AppLayout.js
|   |       |   |   └── LoginLayout.js
|   |       |   ├── routes/
|   |       |   |   ├── AppRoute.js
|   |       |   |   └── LoginRoute.js
|   |       |   └── Shell.js
|   |       ├── store/
|   |       |   ├── reducers/
|   |       |   |   ├── auth.js
|   |       |   |   ├── notify.js
|   |       |   |   └── generic.js
|   |       |   └── store.js
|   |       ├── views/
|   |       └── index.js
|   ├── index.html
|   └── serviceWorkers.js
├── .babelrc
├── .csscomb.json
├── .csslintc
├── .env.example
├── .eslintrc
├── .editorconfig
├── .gitignore
├── commitlint.config.js
├── yarn.lock
├── jest.config.js
├── Dockerfile
└── package.json

API comunication data patterns

All app communication are based in json data. All json patterns are individual documented and follow the semantic version.

Login flow

• Login
• Escolha de Sistema
• Acessando Menu

Code Style

Follow the Valle Web code style guide.

All code style are automatic validate with ESLint and CSSLint

The CSS code are automatic formated by CSScomb

Tests

Run all unit tests:

$ yarn test

All automatic tasks

• yarn test - Run unit tests.
• test:watch - Watch files for run tests.
• test:cover - Generate test coverage results.
• test:snap - Generate new jest snapshots.
• lint:js - Run javascript / JSX ESLint.
• lint:css - Run CSS lint.
• lint:format - Autoformat CSS with CSScomb.
• lint - Run all lint rules.
• check - Check for outdated, incorrect, and unused dependencies.
• start-storybook - Start the storybook docs at local server.
• build-storybook - Build storybook files.
• deploy-storybook - SH for deploy the build files for a dev server using scp.
• start - Build and start a local server with livereload.
• build:docker - Build a local nginx/node with Docker.
• start:docker - Start a local nginx/node with Docker.
• server - Start local server.
• build - Build the App.
• analyze - Analyze the webpack bundle.
• clean - SH for clean the dev server using ssh.
• deploy - SH for deploy the build files for a dev server using scp.

Versioning

To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.

Commiting

Commit naming rules by @commitlint/config-conventional.

Contributing

Want to contribute? Follow these recommendations.

History

See Releases for detailed changelog.