Create ReadMe File

Added QLens logo, Descriptions and Gifs.

Author: choyeewinag

README.md

@@ -0,0 +1,82 @@
+<p align="center"><img src="./build-res/icon.png" style="margin-top: 10px; margin-bottom: -10px;"></p>
+
+#
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/open-source-labs/Swell/blob/master/LICENSE.txt)
+[![Build Status](https://travis-ci.org/open-source-labs/Swell.svg?branch=master)](https://travis-ci.org/open-source-labs/Swell)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/open-source-labs/Swell?color=blue)
+[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/getswell/getswell/issues)
+[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Swell-%20For%20all%20your%20streaming%20API%20testing%20needs&url=https://www.getswell.io&hashtags=SSE,WebSocket,HTTP,API,developers)
+
+
+
+# QLens 
+
+QLens — See your GraphQL Schemas materialize before your eyes! 
+
+Accelerated by [OS Labs](https://github.com/oslabs-beta/)
+
+## Getting Started
+Download QLens onto your desktop by going to  [www.qlensapp.com](https://www.qlensapp.com)
+
+## Features
+* GraphQL schema (including resolvers, and mutations) 
+* Visual interactive diagram of Hierarchy Display
+* Download Schemas
+* GraphQL's Playground GUI
+
+## How does QLens work? 
+![QLens.gif](./gif/qlens.gif)
+
+## 1. Enter URI
+Simply enter your non-relational database (MongoDB) URI in the input form at the top of the screen and press enter. You will see a dropdown menu on the left hand side of the screen revealing all of your database schemas. Click the schemas you would like converted to GraphQL and then click the ‘Add Selected Schemas’ button. 
+
+Please see below gif to reset the URI:
+
+![QLens.gif](./gif/reset.gif)
+
+## Hierarchy Display:
+The first thing you’ll notice in the center of the screen is a graph displayed to visualize the hierarchy of your non-relational database schemas in a tree-like structure.
+
+## 2. Select GraphQL Schemas
+On the right side of the screen is where your life just got a whole lot easier. You will find your GraphQL schema boilerplate already entirely formatted for your project complete with resolvers and mutations. At the top of the text editor, you will see a tab to toggle to see your MongoDB schemas in their own editor. Here is where you can either copy your GraphQL schemas and paste right into your code editor, or click the download button. <br><br>
+
+## 3. Download Schemas
+Click the Download Schemas button at the bottom of the code editor and the GraphQL schema code will download into a folder on your desktop. Drag the folder into your preferred code editor and voilà! Formatted GraphQL schemas right there in your code editor! It’s that easy! <br><br>
+
+## 4. GraphQL Playground
+Back in QLens, you can see your GraphQL schemas in action by clicking on the Playground button at the top right-hand side of the screen which will take you to GraphQL’s very own integrated development environment, GraphiQL where you can make queries and test your code. <br><br>
+
+## How To Contribute
+We would love for you to test our application and submit any issues you encouter. Please feel free to fork your own repository to and submit your own pull requests.
+
+## Built With
+
+- Electron
+- React
+- Codemirror
+- Jest
+- Node.js
+- Express
+- Graphiql
+- Graphql
+- lodash
+- Babel
+- Webpack
+- Enzyme
+- React-Testing-Library
+- spectron
+
+How you can contribute: 
+* Bug fixes
+* Implementing features
+* Submitting or resolving GitHub issues
+* Help market our application
+## Developers
+* [Steven LaBrie](https://github.com/danieldolich)
+* [Judy Tan](https://github.com/Judanator)
+* [Cho Yee Win Aung](https://github.com/choyeewinag)
+* [Jake Diorio](https://github.com/stevenlabrie)
+
+## License
+This project is licensed under the MIT License