QRecipe | Devpost

QRecipe!

This project is a part of the OpenScreen QRCode category hack

Inspiration

As a college students that eats anything that's edible, we hate reading long paragraph recipes. So we created QRecipe, which initially allows user to drag and drop ingredients into method blocks, allowing an intuitive and graphical way to understand the recipe. We then take advantage of the open screen API to allow sharing of the recipe in constant time complexity.

What it does

The app allows you to create your own recipe and share it with your friends by generating a QR code. Your friends can then scan the QR code, make edits to the recipe and generate their own QRecipe!

How we built it

QRecipe is a full stack web application that we built using a React frontend and an ExpressJs back-end with a MongoDB database. We also used the OpenScreen API to create QR codes that allow our users to share their incredible recipes with all their friends. The app allows users to store their recipes on a MongoDB database and then share it via QR code. When a user is done populate a recipe in the front end and they are ready to save/generate a qr code, our app uses Express to create a document of that recipe in our database, that request returns a unique id. We then append that unique ID to the back of our website URL and use that as the intent inside of the asset which is used to generates the QR code by making RestAPI calls to the endpoints provided by OpenScreen. When the QRcode is scanned it will redirect a user to a url with the recipes id as a parameter. Our front end is then able to parse that parameter and use it to make a request to the backend to find and return the recipe with that id, which then allows the front end to populate the page with the recipe.

Challenges we ran into

We first had some issues with integrating the open screen SDK into our React.js App since the SDK requires some modules that React doesn't directly support (ex. node-fs). We were able to work around it by switching to using the RestAPIs. However, the response of the Open Screen APIs does not have certain header properties, which caused it to be blocked by the browser due to the CORS privacy policy. Finally, we were able to work around that by sending requests through our Express.js backend API server instead of from the front-end web app.

Accomplishments that we're proud of

Being able to react to changes fast when we run into problems. Including integrating the open screen APIs and SDK. We also conducted lots of meeting to get everybody on the same page and we think that worked well. There are members on the team that did not come in with the most development experience but end up coming up with really nice work and improvements on the front-end web UI.

What we learned

We learned to collaborate on a project while staying remote, working as a team, and respecting each other's ideas. Apart from these soft skills, we got more familiar with React.js, Axios, Express.js, and top of all, how to use the OpenScreen API to generate QR codes.