feat: More update to readme

Author: atapas

README.md

@@ -1,7 +1,7 @@
 
 
 <p align="center">
-    <a href="https://tryshape.vercel.app/ target="_blank">
+    <a href="https://tryshape.vercel.app/" target="_blank">
         <img src="./public/readme/TryShape-GitHub-icon-only.png" alt="logo" width="125"/>
     </a>
 
@@ -25,7 +25,7 @@
 <a href="https://github.com/TryShape/tryshape/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/TryShape/tryshape?style=flat-square" alt="tryshape pull-requests"/>
 </a>
-<a href="https://twitter.com/intent/tweet?text=Check%20this%20amazing%20app%20https://tryshape.vercel.app/,%20created%20by%20@tapasadhikary%20and%20friends%0A%0A%23DEVCommunity%20%23100DaysOfCode%20%23tryshape"><img src="https://img.shields.io/twitter/url?label=Share%20on%20Twitter&style=social&url=https%3A%2F%2Fgithub.com%2FTryShape%2Ftryshape"></a>
+<a href="https://twitter.com/intent/tweet?text=👋%20Check%20this%20amazing%20app%20https://tryshape.vercel.app/,%20created%20by%20@tapasadhikary%20and%20friends%0A%0A%23DEVCommunity%20%23100DaysOfCode%20%23tryshape"><img src="https://img.shields.io/twitter/url?label=Share%20on%20Twitter&style=social&url=https%3A%2F%2Fgithub.com%2FTryShape%2Ftryshape"></a>
 
 </p>
 
@@ -39,7 +39,7 @@
 
 ## 👋 Introducing `TryShape`
 <p align="center">
-    <a href="https://tryshape.vercel.app/ target="_blank">
+    <a href="https://tryshape.vercel.app" target="blank"/>
         <img src="./public/readme/landing.png" alt="landing" />
     </a>
 </p>
@@ -51,6 +51,9 @@ TBA
 
 ## 🔥 Features
 `TryShape` comes with a bundle of features to give your creativity a shape. You can do the followings with TryShape,
+
+### ✅ Listing Shapes
+- List out shapes for you to pick and use.
 ### ✅ Create Shapes
 - Create any shapes using an intuitive editor.
 - Create Polygonal, Circular, Elliptical shapes without knowing the underlying complexities like CSS clip-path.
@@ -79,7 +82,69 @@ TBA
 - Features like export, like, create, edit shapes need you to autheticate with the app. You can use your Gmail or GitHub credntials to authenticate to the app. It is secured and powered by `Google Firebase`.
 
 ## 🏗️ How to Set up `TryShape` for Development?
-TBA
+You can run TryShape locally with a few easy steps.
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/TryShape/tryshape.git
+```
+
+2. Change the working directory
+
+```bash
+cd tryshape
+```
+
+3. Install dependencies
+
+```bash
+npm install # or, yarn install
+```
+
+4. Create `.env` file in root and add your variables
+
+```bash
+NEXT_PUBLIC_DB_URL= YOUR_HARPER_DB_DATABASE_URL
+NEXT_PUBLIC_DB_AUTHORIZATION= YOUR_HARPER_DB_AUTHORIZATION_ID
+
+NEXT_PUBLIC_FIREBASE_AUTHORIZATION=YOUR_FIREBASE_AUTH_KEY
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_PROJECT_BUCKET
+NEXT_PUBLIC_FIREBASE_MESSAGING_SERNDER_ID=YOUR_FIREBASE_MESSAGING_SERNDER_ID
+NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID
+```
+
+5. Run the app
+
+```bash
+npm run dev # or, yarn dev
+```
+
+That's All!!! Now open [localhost:3000](http://localhost:3000/) to see the app.
+
+## 🍔 Built With
+- [Next JS](https://nextjs.org/): The coolest React-based framework on the planet
+- [Harper DB](https://harperdb.io/): A flexible Data Store
+- [react-icons](https://react-icons.github.io/react-icons/): One shop for all the icons
+- [react-hot-toast](https://react-hot-toast.com/): Super cool toast messages
+- [firebase](https://firebase.google.com/): Authentication services
+- [date-fns](https://date-fns.org/): Date formatting
+- [axios](https://github.com/axios/axios): Makes API calls easy
+- [react-bootstrap](https://react-bootstrap.github.io/): A popular frontend framework built-for React
+- [Styled Components](https://styled-components.com/): Visual primitives for the component age
+- [react-clip-path](https://github.com/atapas/react-clip-path#readme): A home grown module to handle clip-path property in a React app.
+- [react-draggable](https://github.com/mzabriskie/react-draggable): Make a HTML element draggable in React
+- [react-loader-spinner](https://mhnpd.github.io/react-loader-spinner/): Provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view
+- [react-switch](https://github.com/markusenglund/react-switch#readme): A draggable toggle-switch component for React.
+- [downloadjs](http://danml.com/download.html): Trigger a download from JavaScript
+- [html-to-image](https://github.com/bubkoo/html-to-image#readme): Converts an HTML element to image
+- [Vercel](http://vercel.com/): Best for Hosting a Next.js app
+
+## 🛡️ License
+This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
 
 ## 🦄 Upcoming Features
 `TryShape` has all the potentials to grow further. Here are some of the upcoming features planned(not in any order),
@@ -94,10 +159,21 @@ TBA
 - ✔️ Flexible Datastore
 - ✔️ Better Performance
 - ✔️ Tagging a shape
+- ✔️ Cloning a shape
 - ✔️ Provide comment on a shape.
 - ✔️ More authetication mechanisms like twitter, facebook, etc.
 
 If you find something is missing, `TryShape` is listening. Please create a feature request [from here](https://github.com/TryShape/tryshape/issues/new/choose).
 
+## 🏃‍♀️ Deploy
+
+<a href="https://vercel.com/new/project?template=https://github.com/TryShape/tryshape">
+<img src="https://vercel.com/button" height="37.5px" />
+</a>
+<a href="https://app.netlify.com/start/deploy?repository=https://github.com/TryShape/tryshape">
+<img src="https://www.netlify.com/img/deploy/button.svg" height="37.5px" />
+</a>
+
+
 ## 🤝 Contributions
 TBA