chore(project): update readme

add diagrams and update readme

README.md

@@ -1,21 +1,94 @@
-# vuex-feature-scoped-structure
+# vuex-feature-scoped-structure by <a href="https://github.com/igeligel">igeligel</a>
 
-> A Vue.js project
+> A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in cooperation with [3yourmind](https://github.com/3YOURMIND).
 
-## Build Setup
+<a href="./License.md"><img src="https://img.shields.io/github/license/igeligel/vuex-feature-scoped-structure.svg" alt="badge of license" /></a>
+<a href="https://github.com/igeligel/vuex-feature-scoped-structure/pulls"><img src="https://img.shields.io/badge/PR-welcome-green.svg" alt="badge of pull request welcome" /></a>
+<a href="https://www.3yourmind.com/career"><img src="https://img.shields.io/badge/3YOURMIND-Hiring-brightgreen.svg" alt="badge of hiring advertisement of 3yourmind" /></a>
+<a href="https://github.com/igeligel/vuex-feature-scoped-structure/stargazers"><img src="https://img.shields.io/github/stars/igeligel/vuex-feature-scoped-structure.svg?style=social&label=Stars" alt="badge of github star" /></a>
 
-``` bash
-# install dependencies
-npm install
+## Showcase/Architecture
 
-# serve with hot reload at localhost:8080
-npm run dev
+A feature scoped, but still namespaced store structure. `index.vue` is the container of the module.
 
-# build for production with minification
-npm run build
+<p><details>
+  <summary><b>diagram</b></summary>
+  <p><img src="./docs/structure.png" alt="structure of the store system" /></p>
+</details></p>
 
-# build for production and view the bundle analyzer report
-npm run build --report
-```
+<p><details>
+  <summary><b>file structure</b></summary>
+  <img src="./docs/vs-code-folder-structure.png" alt="structure of the store system in visual studio code" />
+</details></p>
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+## Dependencies
+
+<p><details>
+  <summary><b>npm dependencies</b></summary>
+
+  | Dependency | Version |
+  | ---------- | ------- |
+  | vue        | ^2.5.2  |
+  | vue-router | ^3.0.1  |
+  | vuex       | ^3.0.0  |
+</details></p>
+
+## Installation
+
+The installation process is split into two sections for [development](#development) and [production](#production) use. You can find a production version of this site live at [vuex-simple-structure.netlify.com](https://vuex-simple-structure.netlify.com/).
+
+### Development
+
+<p><details>
+  <summary><b>instructions</b></summary>
+
+  #### Using npm
+
+  ```shell
+  npm install
+  npm run dev
+  ```
+
+  #### Using yarn
+
+  ```shell
+  yarn install
+  yarn run dev
+  ```
+</details></p>
+
+### Production
+
+<p><details>
+  <summary><b>instructions</b></summary>
+
+  #### Using npm
+
+  ```shell
+  npm install
+  npm run build
+  ```
+
+  #### Using yarn
+
+  ```shell
+  yarn install
+  yarn run build
+  ```
+</details></p>
+
+## Examples
+
+- [igeligel/vuex-feature-scoped-structure](https://github.com/igeligel/vuex-feature-scoped-structure)
+
+## Contact
+
+<a href="https://twitter.com/kevinpeters_"><img src="https://img.shields.io/badge/Contact-Twitter-1da1f2.svg" alt="Twitter of Kevin Peters"></a>
+
+## Contributors
+
+<table><thead><tr><th align="center"><a href="https://github.com/igeligel"><img src="https://avatars2.githubusercontent.com/u/12736734?v=3" width="100px;" style="max-width:100%;"><br><sub>igeligel</sub></a><br><p>Contributions: 7</p></th></tbody></table>
+
+## License
+
+*vuex-feature-scoped-structure* is realeased under the [MIT License](/License.md).