update repo readme

README.md

@@ -1,10 +1,12 @@
 # WhatColors
 
-## Tech-Stack 
+## Tech-Stack
+
 <div align="center">
 <table><tr><td valign="top" width="33%">
 
-### Frontend  
+### Frontend
+
 <div align="center">  
 <a href="https://reactjs.org/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/react-original-wordmark.svg" alt="React" height="50" /></a>  
 <a href="https://www.w3schools.com/css/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg" alt="CSS3" height="50" /></a>  
@@ -14,7 +16,8 @@
 
 </td><td valign="top" width="33%">
 
-### Backend  
+### Backend
+
 <div align="center">   
 <a href="https://www.mongodb.com/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/mongodb-original-wordmark.svg" alt="MongoDB" height="50" /></a>  
 <a href="https://nodejs.org/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/nodejs-original-wordmark.svg" alt="Node.js" height="50" /></a>  
@@ -23,7 +26,8 @@
 
 </td><td valign="top" width="33%">
 
-### DevOps  
+### DevOps
+
 <div align="center">  
 <a href="https://cloud.google.com/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/google_cloud-icon.svg" alt="GCP" height="50" /></a>  
 <a href="https://github.com/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/git-scm-icon.svg" alt="Git" height="50" /></a>  
@@ -34,4 +38,65 @@
 </td></tr></table>
 </div>
 
-<br/>  
+<br/>
+
+## Acknowledgements
+
+This project is using for simulating color blind test using Farnsworth-Munsell Method
+
+## Clone Project To Local
+
+Clone the project
+
+```bash
+  git clone https://github.com/Z4nR/WhatColors.git WhatColors
+```
+
+Go to the project directory
+
+```bash
+  cd WhatColors
+```
+
+## Run Locally
+
+Run locally server-side
+
+```bash
+  cd server
+  npm i
+  npm run server
+```
+
+Run locally client-side
+
+```bash
+  cd client
+  npm i
+  npm run dev
+```
+
+## Demo
+
+You can see the link for demo in About of Repository
+
+## Features
+
+- Three role user (admin, client, individual)
+- Code Verification
+- Download CSV File
+- Live Calculating Result
+- Live Reload Group Data every 1 minute
+- Fullscreen mode
+- Cross platform
+
+## Lessons Learned
+
+Learn to using ReactSortable to reshuffle an color to right place and Code Correction when Verificate the code
+
+## Related
+
+Here are some related projects
+
+[Farnsworth Munsell via Processing](https://github.com/rpigu-i/processing-farnsworth-munsell) and
+[Farnsworth Munsell Shuffling Step in HTML](https://github.com/chaturatbs/FM100)