[#316] Add deployments and bots docs

README.md

@@ -19,6 +19,9 @@ Use yarn to install dependencies.
 yarn
 ```
 
+## Config files
+A list of configs can be found at [Configs](/docs/configs.md).
+
 ## Development
 - To Dev using
 ```bash
@@ -54,19 +57,30 @@ Use `auto-changelog` to generate [CHANGELOG.md](/CHANGELOG.md).
 yarn release
 ```
 
+## Deployment
+Deployment was handled by [Vercel](https://vercel.com/dashboard) Deploy, Preview and Ship (DPS). 
+
+See detail at [Deployment](/docs/deployment.md)
 
 ## CircleCI
-CI is supported by **Circle.io**. See detail at [CircleCI Guide](/docs/circleci.md)
+CI is supported by **Circle.io**. 
+
+See detail at [CircleCI Guide](/docs/circleci.md).
 
 ## Scrutinizer
-Code Quality and assurance are supported by **Scrutinizer**. See detail at [Scrutinizer Guide](/docs/scrutinizer.md)
+Code Quality and assurance are supported by **Scrutinizer**. 
 
-## Config files
-A list of configs and setup files can be found at [Configs](/docs/configs.md).
+See detail at [Scrutinizer Guide](/docs/scrutinizer.md).
+
+## Supportive Bots
+Bots are used for maintaining dependencies, optimizing images and quality control PRs. 
+
+See detail at [Bots](/docs/bots.md).
 
 ## Lighthouse
 Running with Google Lighthouse for performance measuring.
-See detail at [Lighthouse](/docs/light-house.md)
+
+See detail at [Lighthouse](/docs/light-house.md).
 
 ## License
 [MIT](https://choosealicense.com/licenses/mit/)

docs/bots.md

@@ -0,0 +1,40 @@
+# Bots
+
+In this project we have 3 supported bots for: 
+- DangerJS (DeKalDangerBot)
+- Image Optimizer (ImgBot)
+- Dependencies (Renovate)
+
+## DangerJS
+[Danger bot](https://github.com/DeKalDangerBot) is an internal bot, which is created only for the purpose of commenting and reporting the status of the PR after running through dangerJS. The process is simple, just create a new user account, and make sure to include that account as a collaboration for the target project. After that follows the document at https://danger.systems/js/guides/getting_started.html, and we are good to go.
+
+### **Usage**
+<img src="/docs/res/bots-danger.png?raw=true" width="600px">
+
+We have set up multiple [rules](/dangerfile.js) for the bot:
+1) Please include a description of your PR changes.
+2) Please assign someone to merge this PR, and optionally include people who should review.
+3) Requires one of these labels: [tag: new feature, tag: breaking change, tag: bug fix, tag: enhancement, tag: documentation, tag: internal] to be referenced in CHANGELOG.md
+4) PR name should begin with a capital letter
+5) Commit messages should begin with a capital letter
+6) Commit message should be specific. Checkout [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)
+
+
+## Image Optimizer
+[ImgBot](https://github.com/marketplace/imgbot) is a friendly robot that optimizes your images and saves you time. Optimized images mean smaller file sizes without sacrificing quality. We are using this one is because we dont have the usage of CDN to optimize the image quality. Therefore for the project, we just try to use images with low quality but enough efficiency for users.
+
+### **Usage**
+<img src="/docs/res/bots-img.png?raw=true" width="600px">
+
+
+## Dependencies
+[Renovate](https://github.com/marketplace/renovate) is a bot managing and keeping our dependencies up-to-date. Basically, it will check for some interval if there are any new dependencies in our `package.json`. If there is any, it will automatically create a PR for us the evaluate and update the new dependency.
+
+### **Usage** 
+- PR to update new dependency
+
+<img src="/docs/res/bots-renovate.png?raw=true" width="600px">
+
+- With each PR, the CI/CD system will be triggered for us to check if is there any things broken in our new dependencies. Wola, no need for manual check if something is broken.
+
+<img src="/docs/res/pull-request-ci-cd.png?raw=true" width="600px">

docs/deployment.md

@@ -0,0 +1,13 @@
+# Deployments
+
+For the **Continuous Deployment** of the project, we are using [Vercel](https://vercel.com/dashboard). Vercel offers us many nice features.
+
+## Review app
+For each Pull Request (PR), Vercel builds and deploys for us a review app for that particular PR. This is one of the extremely strong point why we decided to go with Vercel. With the review app, we are easy to testing out new changes or having our QA engineers tested out the new feature on the fly. No need for complicated setup in our local env, no need for running the code to see if it's worked out.
+
+<img src="/docs/res/vercel-preview.png?raw=true" width="600px">
+
+## Production
+After everything is perfect, we can easily merge the PR and everything is deployed to the production page in the blink of the eye. Usually, it takes 1 or 2 seconds for vercel to do the deployment, which is crazily good.
+
+<img src="/docs/res/vercel-prod.png?raw=true" width="600px">