What's In My Fridge?

• 

  Home Screen

• 

  One Result

• 

  No Results

• 

  Many Results

Inspiration

Seeing that most of us are university students, money is not something we have a lot of. As a result, we don’t have all of the spices, or even ingredients we need for most recipes, limiting our meal choices. What’s in my fridge solves this issue by providing the user with recipes they can cook right away.

What it does

In the website, the user can input all of the food they have in their fridge and/or pantry. Afterwards, our program will run a search on an recipe API, combing through the resulting data in order to provide the user with an list of all the meals they can make with what is currently in their fridge.

How we built it

We built this website through a combination of HTML/CSS for the front end, backed by Javascript. We used javascript to make queries to a recipe API called Yummly, gathering the necessary data to find the possible meals that the user can create. On the front, it is lead by a HTML/CSS script that will take all of the data gained from the API query and create a set of links to websites with those recipes.

Challenges we ran into

There were two major challenges we ran into during the course of this project, the first of which was the problem of asynchronous code in Javascript, which caused our code to malfunction as by the time the query returned a result, the loops had already moved ahead by a significant margin. The second of these problems was the issue of the API search query not matching what we had wanted. When a query was made to the API with a certain list of ingredients, it would return a list of all the recipes that had all of those ingredients or more, what we wanted was to return a list of recipes that had less than all of the ingredients that the user searched for but did not have any ingredients that was not in the user’s list.

Accomplishments that we're proud of

Despite the inexperience of the hackers, our team managed to design, and prototype a model of our idea in one day. Moreover, we solved the two major challenges that we ran into throughout the course of the Hackathon. The first was solved through the use of promises in Javascript, where instead of iterating through each query through the use of loops, we would make the queries a “promise”, which forced all of them to finish before we did any operations on them. Next, we solved the problem regarding the API through the use trying different ingredient possibilities and looping through many times in order to remove unwanted ones.

What we learned

In this Hackathon, we learned much about the basics and some of the more advanced techniques in Javascript such as API calling and promises, as well as some techniques regarding front end development using HTML/CSS such as integrating it with Javascript.

What's next for What's In My Fridge?

The next step will most likely be for us to improve the speed of the algorithm, as it currently needs to make a significant number of queries for greater numbers of ingredients as input. Furthermore, we want to integrate a method for the user to sort the recipes given to them. For example, they could sort by meal or by what kind of dish they want (steak, fish etc.)

Built With

• css
• html5
• javascript