We were inspired by the sheer amount of food wastage that occurs in our own homes, simply because the food was forgotten about in the back of the fridge or expired. About 1/3 of food that gets produced globally is wasted, and half of this occurs in everyday homes. While it may be tempting to overlook this fact, food wastage costs households $1800 a year. The effects are even more severe, however. Annually, people waste enough food to feed 3 billion people and cause a carbon footprint worth 3.3 billion tons of CO2. These are some very real consequences, to a very simple issue.

This is why we created ecoFridge. It is a user-friendly web app that allows users to input the items they have in their kitchen or soon-to-be expired ingredients. The user can customize their tastes or restrictions (ex: cuisines, allergies, diet) to curate the perfect recipes for their needs. After inputting the ingredients they would like to cook with, the web app fetches recipes from Spoonacular API and generates up to ten recipe cards, with each card containing a mouth-watering picture of the finished result and a link to the recipe for ease of use.

We designed the front-end portion of the app using graphics created through Invision and a user-friendly interface through Glitch, using HTML and CSS. For the back-end portion, we utilized Javascript to receive the user inputted data and interact with the recipe API. We fetched the recipe API, Spoonacular which returns a corresponding JSON object, which we then analyzed and altered the HTML to dynamically create cards displaying the recipe pictures and information.

One of the biggest challenges we faced was the majority of our team being relatively new to web development. We attended the Intro to Web Development workshop at the beginning of the hackathon, however much of the learning we did was on our own. Among this learning, came the specific challenge of the search bar where the user can input how any ingredients and any amount. The default HTML search bar only allows for predetermined inputs. However, we wanted to ensure the user was able to input any ingredient that was in their kitchen, therefore had to work with jQuery and MagicSuggest to customize the search bar for our needs. Another challenge we faced was having too many solutions to too many problems. We had to narrow down our approach and store our ideas away for a future time.

A big accomplishment from our group was learning to use an API and deploying a functional web app that works. Our team consists of beginners in front-end and back-end development, and two of us are first time hackers. Creating a functioning web app in a small amount of time was an extreme challenge, but we are all so proud of the product we have created. Another accomplishment was learning and using Jquery in our project. Jquery was a completely new concept to all of the group members so it was challenging to include it, but after completing the project we all have a better understanding.

Our group learned so much during the span of the hackathon. First, we learned about fetching data from an API and parsing through this data in the form of a JSON object. This was a new concept but ultimately, after some struggle, we were able to figure out how it works and implement it in our web app. We also learned about altering an HTML page dynamically through Javascript. We also learned many new features of HTML and CSS as well. In addition to technical skills, we also learned that it's completely ok to seek help from a mentor. At first, we were intimidated and nervous to seek help, but after the session, we learned how valuable it is to learn from a professional and increase our abilities.

In the future, we would like to develop new features of ecoFridge to sort through ingredients by price and expiration date so users can find develop delectable dishes and sustainable habits. We also hope to build our web application into a full functioning app for easy, on-the-go usage and turn our fridge graphic into an interactive "fridge" homepage that allows you quick access to check off ingredients you have, update a grocery list, select allergies/food preferences and search for suggested recipes. Lastly, we hope to connect our app to the cloud or a database so that users are able to find perfect recipes wherever they may be.

Built With

Share this project:

Updates