[Docs] Add layers description

docs/SUMMARY.md

@@ -5,7 +5,7 @@
 
 ## Layers
 
-* [App](layers/app.md)
+* [Overview](layers.md)
   * [Components](layers/components.md)
   * [API](layers/api.md)
   * [Actions](layers/actions.md)

docs/layers.md

@@ -0,0 +1,25 @@
+# Layers
+<img height="500" width="400" src="https://raw.githubusercontent.com/Qolzam/react-social-network/next/docs/app/layer.png">
+
+## Supporting multiple data platforms.
+    With dependency injection and new structure we have tried to support variety of data platforms such as Google Cloud Firebase, AWS, Azure or using backend such as ASP.NET, PHP, JAVA, etc. 
+<img height="500" width="400" src="https://raw.githubusercontent.com/Qolzam/react-social-network/next/docs/app/layer-1.png">
+
+## Easy and fast to scale in structure
+    Layers are organized in the way we have easy and less changes for adding/removing features. It could be integrated with server side too. As a result we are faster in developing in both side.
+  ### Core 
+    - The infrastructure, 
+    - Providing interfaces for services
+    - Domain
+  ### Data
+    - Firebase Data Client
+    - AWS Data Client
+    - Azure Data Client
+    - ASP.NET Data Client
+    - PHP Data Client
+  ### Components
+<img height="500" width="400" src="https://raw.githubusercontent.com/Qolzam/react-social-network/next/docs/app/layer-4.png">
+
+## Integrating and reusability in both mobile and web app
+    With new structure we are able to develop the mobile app in parallel with web app **only** with changing `Components` layer. It means we can keep `Core`, `Data` layers, `Actions`, `Reducers`, etc. What we have high reusability and fast in producing the products.
+<img height="500" width="400" src="https://raw.githubusercontent.com/Qolzam/react-social-network/next/docs/app/layer-5.png">

docs/layers/api.md

@@ -1,53 +1,3 @@
 # API
 
 Is a decoupled layer of interfaces to data and/or functionality of one or more components.
-
-## FileAPI
-
-A set of functions for working with files.
-
-```javascript
-getExtension = (fileName) => {}
-```
-
-Get file extension from file name. `fileName` is the name of file.
-
-```javascript
-convertImageToCanvas = (image) => {}
-```
-
-Conver image to canvas. `image` is the image file should be converted.
-
-```javascript
-constraintImage = (file,fileName, maxWidth, maxHeight) => {}
-```
-
-Resize an image with specific max-height and max-with. After resizing image, `onSendResizedImage` event will be fired and will send the image resized and file name as arguments . `file` is image file , `fileName` is the name of the image, `maxWidth` is the maximum width and `maxHeight` is the maximum width for the image.
-
-```javascript
-dataURLToBlob = (dataURL) => {}
-```
-
-Convert [data url file](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to [blob file](https://developer.mozilla.org/en/docs/Web/API/Blob). `dataURL` is the file with data url type.
-
-## PostAPI
-
-A set of functions for working with user posts.
-
-```javascript
-detectTags = (content,character) => {}
-```
-
-Detect and get word wich starts with specific `character` in the `content` of a text.
-
-```javascript
-getContentTags = (content) => {}
-```
-
-Get tag from the `content` of a text.
-
-```javascript
-sortObjectsDate = (objects) => {}
-```
-
-Sort an java script object based on key/value type.

docs/layers/app.md

@@ -1,7 +0,0 @@
-# App
-
-App layer is included whole main application libraries and components.
-
-## app
-
-The root component that is responsible for rendering the whole React DOM on the browser and connecting components to redux [store](http://redux.js.org/docs/api/Store.html).

docs/layers/components.md

@@ -1,60 +1,3 @@
 # Components
 
 This layer include [React components](https://facebook.github.io/react/docs/react-component.html) that let you split the UI into independent, reusable pieces, and think about each piece in isolation.
-
-## Add a new component
-
-To add a new page in Home (with side-bar and top-bar) :
-
-- In components/Home
-- Inside the [Switch] tag
-
-```jsx
-<SidebarMain>
-            <Switch>
-            {/* Add your <Route/> here! */}
-             </Switch>
-</SidebarMain>
-```
-
-- Add your component route between [Switch] tag to load in home page
-
-```javascript
-<Route path="/route-name" component={ComponentName} />
-```
-
-To add a new item for menu bar
-
-- In components/Home
-- Inside the [Menu] tag
-
-```javascript
-   <SidebarContent>
-      <Menu style={{ color: "rgb(117, 117, 117)", width: '210px' }}>
-       {/* Add you <NavLink /> here */}
-      </Menu>
-    </SidebarContent>
-```
-
-- Add your component NavLink between [Menu] tag
-
-```javascript
-<NavLink to='/route-name'>
-    <MenuItem primaryText="MenuItemName" style={{ color: "rgb(117, 117, 117)" }} leftIcon={<SvgIcon />} />
-    {/* Other menu itemes  */}
-</NavLink>
-```
-
-*Note: You can choose your icon for [SvgIcon] from [material-ui icons](http://www.material-ui.com/#/components/svg-icon)*
-
-To add your page in Master page (without side-bar menu and top-bar)
-
-- In components/Master/Master.tsx
-- Add your [Route] tag between [Switch] tag
-
-```javascript
-<Switch>
-         <Route path='/route-name' component={ComponentName} />
-         {/* Other routes  */}
-</Switch>
-```