Recipe-Mapper

• 

• 

  Italian Recipes

• 

  Indian Recipes

• 

• 

• 

Inspiration

Let’s face it – during quarantine, we have ALL watched hours upon hours of mukbangs and recipe videos on Youtube. Food is so special to all of us, it connects us to our family, and above all, it connects us to different cultures. We were inspired by this connection (and the travel videos in countries such as Japan where people talked about local cuisine and dishes), so we decided to develop Recipe-Mapper.

What it does

Recipe-Mapper is a web-application which allows users to interact with a world map, click any country, and get as many recipes as they like! We also implemented a separate recipe search-engine in which users can simply enter a specific dish they’d like to make, and several results would appear providing them with the ingredients!

How we built it

This application was created entirely using Javascript, HTML, and CSS. A few technologies used to aid our process include React, Node.js and JQuery. We also used several APIs including Spoonacular, Edamam, and JVector Map.

Challenges we ran into

Javascript was a language none of us were familiar with going into this hackathon! We really wanted to learn more about front-end development, so the learning curve was very steep. One of our greatest challenges was simply working with APIs! Alot of the documentation was lacking, so it was hard for us to understand how to access certain data.

Accomplishments that we're proud of

We created working proofs of concepts, and we have a vision for what we want our product to look like using Figma. We had to learn new languages, tools, and technologies that we never used before such as Javascript, JQuery, and Figma.

What we learned

Learned how to create an authentication using Node.js Learned how to use Figma to create prototype applications. Learned how to use Javascript, and J.Query to create the food map proof of concept. Learned about APIs such as Spoonacular, Edama, and JVector Map

What's next for Recipe-Mapper

Adding a database to store user credentials as well as user’s favourite recipes. Creating a prototype to include the search feature that was implemented. Creating a website that gathers all the information together. Implement the Figma design by extracting its CSS code. Overall – just making the app more user-friendly by adding design features!

Built With

• css
• html
• javascript
• jquery
• node.js
• react.js