# valle-web-client-mvp

> > Scalable React APP architecture with Flux and PRPL pattern.

Latest version **0.1.0** (published 2021-02-25) · 0 weekly downloads

## Install

```sh
npm install valle-web-client-mvp
pnpm add valle-web-client-mvp
yarn add valle-web-client-mvp
bun add valle-web-client-mvp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-02-25 |
| First published | 2021-02-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 22 |
| Unpacked size | 857.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | afonsopacifer |

## Links

- npm: https://www.npmjs.com/package/valle-web-client-mvp
- npm.io page: https://npm.io/package/valle-web-client-mvp

## Dependencies (22)

- [dexie](https://npm.io/package/dexie.md) ^3.0.2
- [react](https://npm.io/package/react.md) ^16.13.1
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [valleform](https://npm.io/package/valleform.md) ^1.16.5
- [apexcharts](https://npm.io/package/apexcharts.md) ^3.19.2
- [remark-gfm](https://npm.io/package/remark-gfm.md) ^1.0.0
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.1
- [react-router](https://npm.io/package/react-router.md) ^5.0.1
- [sql-formatter](https://npm.io/package/sql-formatter.md) ^2.3.3
- [react-loadable](https://npm.io/package/react-loadable.md) ^5.5.0
- [react-markdown](https://npm.io/package/react-markdown.md) ^5.0.1
- [react-apexcharts](https://npm.io/package/react-apexcharts.md) ^1.3.7
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.0.1
- [@valle/valle-card](https://npm.io/package/@valle/valle-card.md) ^1.0.0
- [@valle/valle-input](https://npm.io/package/@valle/valle-input.md) ^2.5.6
- [@valle/valle-table](https://npm.io/package/@valle/valle-table.md) ^1.0.1
- [@valle/valle-select](https://npm.io/package/@valle/valle-select.md) ^1.4.5
- [@valle/valle-speed-dial](https://npm.io/package/@valle/valle-speed-dial.md) ^1.0.3
- [react-minimal-pie-chart](https://npm.io/package/react-minimal-pie-chart.md) ^8.0.1

## Recent versions

- 0.1.0 (latest) — 2021-02-25

## README

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

![Data flow](docs/data-flow.png)

### Custom PRPL pattern.

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

![Fetch flow](docs/prpl-flow.png)

Sources:

- [Redux docs](https://redux.js.org/introduction/getting-started)
- [Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=_srJ7eHS3IM)
- [Google Progressive Web Apps Training](https://developers.google.com/web/ilt/pwa/)
- [HTML5 Local storage vs. Session storage](https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage)
- [Effective Code Splitting in React: A Practical Guide](https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49)
- [Where and When to Fetch Data With Redux](https://daveceddia.com/where-fetch-data-redux/)
- [Immutable.js is intimidating. Here’s how to get started.](https://medium.freecodecamp.org/immutable-js-is-intimidating-heres-how-to-get-started-2db1770466d6)

## Development

### Getting started

Clone this repository and install its dependencies:

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

Configure your environment following the [.env.example](.env.example) file.

### Build / Start App

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

```sh
$ yarn start
```

### Run fake RESTFull API with JWT

Go to `./server` folder and install its dependencies:

```sh
$ cd server
$ yarn
```

Run fake server with auth:

```sh
$ yarn start
```

[See all docs](./server/README.md)

### 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](https://github.com/valleweb/valle-data-structure-mvp/blob/master/CLIENT-TO-SERVER.md#login)
- [Escolha de Sistema](https://github.com/valleweb/valle-data-structure-mvp/blob/master/CLIENT-TO-SERVER.md#escolha-de-sistema)
- [Acessando Menu](https://github.com/valleweb/valle-data-structure-mvp/blob/master/CLIENT-TO-SERVER.md#acessando-menu)

## Code Style

Follow the [Valle Web code style guide](https://github.com/valleweb/valle-style-guide).

*All code style are automatic validate with [ESLint](http://eslint.org/) and [CSSLint](https://github.com/CSSLint/csslint)*

*The CSS code are automatic formated by [CSScomb](https://github.com/csscomb/csscomb.js/)*

## Tests

*Run all unit tests:*

```sh
$ 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.

<hr>

## Versioning

To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines.

## Commiting

Commit naming rules by [@commitlint/config-conventional](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-conventional#type-enum).

## Contributing

Want to contribute? [Follow these recommendations](https://github.com/valleweb/valle-web-client-mvp/blob/master/CONTRIBUTING.md).

## History

See [Releases](https://github.com/valleweb/valle-web-client-mvp/releases) for detailed changelog.

---
_Source: https://npm.io/package/valle-web-client-mvp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._