feat(new-sample):Github PR Dashboard (#22)

* feat(new-sample):Github PR Dashboard

* feat:Added labels and markdown reader

* feat(columns): Added background color to the columns

* refactor: Changed the header title and removed comments

* chore: Removed a comment

README.md

@@ -87,7 +87,6 @@ A React js project using Tailwind CSS and Canonic.
 
 <br/>
 
-
 ### [Forms](./canonic-forms/)
 
 Simple web forms for **Contact us** and **Get a Demo** build with React and Ant Design, powered by by [Canonic](https://canonic.dev/) as the **Backend**..
@@ -98,6 +97,15 @@ Simple web forms for **Contact us** and **Get a Demo** build with React and Ant
 
 <br/>
 
+### [Github PR Dashboard](./github-pr-dashboard/)
+
+A dashboard for **Github Pull Requests** build with React and Material UI, powered by by [Canonic](https://canonic.dev/) as the **Backend**..
+
+![Screenshot](./github-pr-dashboard/screenshots/screenshot-1.png)
+
+---
+
+<br/>
 
 #### More coming soon 🚀
 

github-pr-dashboard/README.md

@@ -0,0 +1,43 @@
+# Github PR Dashboard
+
+The app is a demo of how you can build a Github PR Dashboard using React, graphql and [Canonic](https://canonic.dev/) as the **Backend**
+
+![Screenshot](./screenshots/screenshot-1.png)
+
+**Pull requests details are fetched from your Canonic project.**
+
+## Links
+
+### [Demo](https://canonic-github-dashboard.netlify.app/)
+
+### [Tutorial]()
+
+## Running the example
+
+### Frontend
+
+The frontend is a simple create-react-app. After cloning, install the dependencies.
+
+```
+yarn install
+```
+
+Then start the dev server
+
+```
+yarn start
+```
+
+### Backend
+
+You can find the sample backend project **Github PR Dashboard** [here](https://app.canonic.dev/dashboard/marketplace/samples) and clone it.
+
+![Screenshot](./screenshots/screenshot-2.png)
+
+Copy the base url from the docs
+
+![Screenshot](./screenshots/screenshot-3.png)
+
+Change the value of URI in [index.js](./src/index.js)
+
+The example should now fetch data from the project you deployed.