Merge branch 'development' into master

README.md

@@ -2,6 +2,12 @@
 
 A simple chat application that uses react.js, redux and socket.io.
 
+- [Prerequisites](#prerequisites)
+- [Recommended](#recommended)
+- [Commands](#commands)
+  - [After cloned from the github repository](#after-cloned-from-the-github-repository)
+  - [Available commands](#available-commands)
+- [Documentation](#documentation)
 
 ## Prerequisites
 

docs/README.md

@@ -1,5 +1,9 @@
 # React Socket Simple Chat - Documentation
 
+- [Versioning system](#versioning-system)
+- [Application requirements](#application-requirements)
+- [About the project](#about-the-project)
+
 ## Versioning system
 
 * This project follows the [Semantic Versioning](https://semver.org/) pattern

docs/project/README.md

@@ -1,27 +1,34 @@
 # Project
 
+- [Architecture](#architecture)
+  - [Frontend](#frontend)
+  - [Backend - socket.io server](#backend---socketio-server)
+  - [Tools](#tools)
+- [Folders](#folders)
+- [Code](#code)
+- [Dependencies](#dependencies)
 
 ## Architecture
 
 ### Frontend
 
-* It uses React to build the UI, React Router to handle its pages, Redux to manage its data/states, Redux Thunk to have a middleware where is possible to inject the socket.io client to send the messages and the function to switch between languages. ([useful references](useful-references.md#react-and-redux-middleware-thunk---) about them)
+* It uses React to build the UI, React Router to handle its pages, Redux to manage its data/states, Redux Thunk to have a middleware where is possible to inject the socket.io client to send the messages and the function to switch between languages. ( [useful references](useful-references.md#react-and-redux-middleware-thunk---) )
 
-* It follows the redux re-ducks pattern and try to follow some react + redux code style guide ([useful references](useful-references.md#code-style-guide) about it)
+* It follows the redux re-ducks pattern and try to follow some react + redux code style guide ( [useful references](useful-references.md#code-style-guide) )
 
-* It uses SASS to handle the styles, follows the BEM pattern and uses the flexbox to handle the layout ([useful references](useful-references.md#styles-css-and-sass))
+* It uses SASS to handle the styles, follows the BEM pattern and uses the flexbox to handle the layout ( [useful references](useful-references.md#styles-css-and-sass) )
 
 
 ### Backend - socket.io server
 
-* It has it own socket.io server and also has a deployed version of it over the now.sh ([read more about](../../server/README.md))
+* It has it own socket.io server and also has a deployed version of it over the now.sh ( [read more about it](../../server/README.md) )
 
 
 ### Tools
 
 * It uses the [node.js](https://nodejs.org/) LTS (v8)
 
-* It uses the [Webpack](https://webpack.js.org/) v4 with the HMR support and is tunned to enable a multi devices development ([useful references](useful-references.md#webpack))
+* It uses the [Webpack](https://webpack.js.org/) v4 with the HMR support and is tunned to enable a multi devices development ( [useful references](useful-references.md#webpack) )
 
   * It is also has a configuration to make it possible to do imports where the `./src/` is the root folder, so we can do imports like `import constants from 'chat/constants';` from anywhere in the project code
 
@@ -31,19 +38,36 @@
 
   * [load](/webpack.config.js#L45-L85) the file following the search order
 
-```
-1. .env.(production|development)
-2. .env.local
-3. .env
-4. .env.example
-```
+    ```
+    1. .env.(production|development)
+    2. .env.local
+    3. .env
+    4. .env.example
+    ```
 
 ## Folders
 
+* overview map
+
+  ```
+  ./
+    dist/
+    docs/
+    server/
+    src/
+      chat/
+        components/
+        container/
+        services/
+        states/
+      styles/ 
+  ```
+
 * main folders
 
   ```
   ./
+    dist/
     docs/
     server/
     src/
@@ -55,20 +79,53 @@
 
   * `src/` - project code
 
-* build folder
+  * `dist/` production build
 
-  * when executes a command `yarn build` or `npm run build` the build content will be placed at the `./dist` folder
+    * created by the command `yarn build` or `npm run build` 
 
 
 ## Code
 
-* on the root `./`
+* overview map
+
+  ```
+  ./
+    package.json
+    .env
+    .babelrc
+    .browserlistrc
+    webpack.config.js
+    src/
+      chat/
+        components/
+        containers/
+        services/
+        states/
+        _styles.scss
+        constants.js
+        Routes.js
+        Chat.js
+        index.js
+      styles/
+      app.js
+      index.scss
+      index.html
+      index.js
+  ```
+
+* `./` - root
 
-  * It uses the ES6+ through Webpack + Babel ([.babelrc](/.babelrc) file)
+  * `package.json` - defines the project dependencies
 
-  * It defines the web browsers support on the [.browserslistrc](/.browserslistrc) file, that is loaded and used by the Webpack to generate the production build
+  * `.env` ( `.env.examples` available on the repository ) - define some set of environments to be used following the target build
 
-* on the `./src/`
+  * `[.babelrc](/.babelrc)` - it defines the support to the ES6 syntax through the Webpack + Babel
+
+  * `[.browserslistrc](/.browserslistrc)` - it defines the web browser supported by the application and is used by the Webpack on the production build flow
+
+  * `webpack.config.js` - defines the configuration to the webpack development and production flows
+
+* `./src/`
 
   * `index.html` - html template, where is define the injection point to be used by the `ReactDOM.render`
 
@@ -80,7 +137,7 @@
 
 * sass styles
 
-  * global definitions `./src/styles/`
+  * `./src/styles/` - global definitions
 
     * main file `_all.scss` - has the imports of all `.scss` files on the folder
 
@@ -90,38 +147,75 @@
 
     * `./src/chat/_styles.scss` imports `./src/chat/(components/containers)/_styles.scss`
 
-    * and so one, where each `_style.scss` will import the `_styles.scss` from it's inner folders
+    * and so one, where each `_style.scss` will import the `_styles.scss` files from its inner folders
 
-* dumb/presentation components: `./src/chat/components/`
+* `./src/chat/components/` - dumb/presentation components
 
   * only used to presentation, where most of them are stateless/functional components
 
-* container components: `./src/chat/container`
+* `./src/chat/container` - container components
 
   * components that will receive data through injection, following the HOC ([Hight-Order Components](https://reactjs.org/docs/higher-order-components.html)): Redux > React Router > i18next (internationalization)
 
-* services: `./src/chat/services`
+* `./src/chat/services` - services
+
+  * `hash/` - used to generate a random id to the initial user name, following the pattern `Guest_{random}`
 
-  * hash - used to generate a random id to the initial user name, following the pattern `Guest_{random}`
+    * uses [hashids.js](https://hashids.org/javascript/)
 
-  * i18n - internationalization config and resources
+  * `i18n/` - internationalization config and resources
 
-  * is-mobile - check if the application was loaded over a device mobile/tablet
+    * uses [i18next](https://www.i18next.com/) and [react-i18next](https://react.i18next.com/)
 
-  * localstorage - handle and manages the web browser localstorage to persist the application data/states
+  * `is-mobile/` - check if the application was loaded over a device mobile/tablet
 
-  * socketclient - uses socket.io client to connect or uses a mock client that emulates the socket.io client expected behaviors
+    * uses regex over the web browser [navigator.userAgent](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent)
 
-* states - redux re-ducks modules ([useful references](useful-references.md#code-style-guide) about it): `./src/chat/states`
+  * `localstorage/` - handle and manages the web browser localstorage to persist the application data/states
+
+    * uses the web browser [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) support
+
+  * `socketclient/` - uses socket.io client to connect or uses a mock client that emulates the socket.io client expected behaviors
+
+    * uses [socket.io-client](https://socket.io/docs/client-api/)
+
+* `./src/chat/states` - redux re-ducks modules ([useful references](useful-references.md#code-style-guide) about it): `./src/chat/states`
 
   * each redux module should expose its reducer by default
 
-  * those modules are imported on the `./src/chat/states/store.js`
+  * `store.js` - import re-ducks modules (its reducers) from the `ducks/` folder
+
+  * it manages 3 datasets/states of the application: connection, messages, settings (this last one has all of its inner reducers assigned at the redux root state)
 
-  * it manage 3 datasets/states of the application: connection, messages, settings (this last one has all of its inner reducers assigned at the redux root state)
 
 ## Dependencies
 
-* defined on the [package.json](/package.json#L27-L74) file
+* [classnames](https://www.npmjs.com/package/classnames)
+
+* [dayjs](https://www.npmjs.com/package/dayjs)
+
+* [hashids](https://www.npmjs.com/package/hashids)
+
+* [lodash](https://www.npmjs.com/package/lodash)
+
+* [prop-types](https://www.npmjs.com/package/prop-types)
+
+* [i18next](https://www.npmjs.com/package/i18next)
+
+* [react-i18next](https://www.npmjs.com/package/react-i18next)
+
+* [react](https://www.npmjs.com/package/react)
+
+* [react-dom](https://www.npmjs.com/package/react-dom)
+
+* [react-router-dom](https://www.npmjs.com/package/react-router-dom)
+
+* [react-redux](https://www.npmjs.com/package/react-redux)
+
+* [redux](https://www.npmjs.com/packageredux)
+
+* [redux-thunk](https://www.npmjs.com/package/redux-thunk)
+
+* [socket.io-client](https://www.npmjs.com/package/socket.io-client)
 
-**TODO:** list them and its links
+* [uuid](https://www.npmjs.com/package/uuid)

docs/project/features.md

@@ -1,5 +1,9 @@
 # Project features by versions
 
+- [1.0.0](#100)
+  - [UI mockups](#ui-mockups)
+- [next](#next)
+
 ## 1.0.0
 
 * Simple chat application which uses a socket.io server to handle and deliver its messages
@@ -30,6 +34,17 @@
 
 * It has an unread counter displayed over the chat tab when the user is on the settings page
 
+
+### UI mockups
+
+* Mobile
+
+![mobile ui mockups](../assets/mobile-ui-mockups-af.png)
+
+* Desktop
+
+![desktop ui mockups](../assets/desktop-ui-mockups-af.png)
+
 ## next
 
 * Improve the documentation

docs/project/useful-references.md

@@ -1,5 +1,11 @@
 # Useful references
 
+- [Versioning](#versioning)
+- [Styles (CSS and SASS)](#styles-css-and-sass)
+- [Webpack](#webpack)
+- [React and Redux( middleware( thunk ) )](#react-and-redux-middleware-thunk--)
+  - [Code Style Guide](#code-style-guide)
+
 ## Versioning
 
 * [Semantic Versioning](https://semver.org/)

docs/requirements/features.md

@@ -1,5 +1,9 @@
 # Features requirements by versions
 
+- [1.0.0](#100)
+  - [UI mockups](#ui-mockups)
+- [next](#next)
+
 ## 1.0.0
 
 * The application should have a navigation bar and two pages
@@ -42,9 +46,16 @@
 
     * When the user selected the settings page, the application should display the number of the unread messages over the chat link/tab and then, when the user returns to the chat page that number should disappear
 
-* Mobile UI mockups
 
-![mobile ui mockups](../assets/mobile-ui-mockups.png)
+### UI mockups
+
+* Mobile
+
+![mobile ui mockups](../assets/mobile-ui-mockups-rf.png)
+
+* Desktop
+
+![desktop ui mockups](../assets/desktop-ui-mockups-rf.png)
 
 
 ## next
@@ -65,6 +76,6 @@
 
 * Settings page
 
-  * Add a dropdown to defines the lenght of the cached messages [1000, 500, 300, 100]
+  * Add a dropdown to defines the length of the cached messages [1000, 500, 300, 100]
 
 

docs/requirements/technical.md

@@ -1,5 +1,8 @@
 # Technical requirements by versions
 
+- [1.0.0](#100)
+- [next](#next)
+
 ## 1.0.0
 
 * Single page application that must be mobile first
@@ -8,7 +11,7 @@
 
   * CSS Flexbox to handle the layout
 
-  * Use a popular CSS preprocessor (for example: SASS)
+  * Use a popular CSS preprocessor ( for example: SASS )
 
 * Should be writed using the JavaScript ( [ES6](http://es6-features.org/)+ ), "compiled" to the actual web browsers javascript using the [BabelJS](https://babeljs.io/)