> For the complete documentation index, see [llms.txt](https://fredericheem.gitbook.io/starhackit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fredericheem.gitbook.io/starhackit/frontend/client.md).

# The Frontend

A functional React based frontend starter kit:

* `react` for pure view layer, 100% stateless compoment.  
* `mobx` for state management.
* `emotion` for real-time styling.
* `universal-router` for the routing solution: code split, data fetching. 
* Internationalization with `i18next`
* Find bugs, enforce coding standards with `eslint` and its plugins: `react`, `promise`, `mocha`.
* Copy and paste detector with `jscpd`
* Display lint warnings and build errors to directly to the browser with `webpack-hud`
* Unit tests with `karma` and `mocha`
* Code coverage with `nyc`
* End to end tests with `nightwatch`
* Concatenation, minification, obfuscation and compression of javascript and css file
* Bundle size and dependencies size under control
* Configuration depending of the environment: dev, uat, prod etc ...
* *Hot reloading\**: Webpack detects any change in the code, it rebuilds automatically and pushes the new change the browser, no manual browser refresh required.
* 100% results in [Lighthouse test](https://developers.google.com/web/tools/lighthouse/)

## TOC

* [Npm scripts](/starhackit/frontend/client/npmscripts.md)    
* [Unit testing](/starhackit/frontend/unittesting.md)    
* [End 2 End Testing](/starhackit/frontend/end2endtest.md)    
* [Multi Application](/starhackit/frontend/multiapp.md)    
* [Production Build](/starhackit/frontend/productionbuild.md)
* [Internationalization](/starhackit/frontend/internationalization.md)    
* [Cut and Paste detector](/starhackit/frontend/cutandpastedetector.md)   
* [Configuration](/starhackit/frontend/configuration.md)   
* [Webpack](/starhackit/frontend/webpack.md)    

### TL;DR

```
$ cd client
$ npm install
$ npm start
```