Zero-Waste Recipes

Zero-Waste Recipe App

Inspiration

We were inspired by the massive food waste problem present in many people’s lives. Every week, families throw out food because it expires, which contributes significantly to landfills and releases harmful greenhouse gases into our atmosphere. Personally, our families waste food every week and we found we had a real need for an organizational tool to reduce the amount of food we threw out. For the hackathon, we thought it would be a great idea to code a helpful web app that contributes to solving this global issue.

What it does

The Zero-Waste Recipe App can keep track of the food you buy and their individual expiry dates. When food nears its expiry date, our app notices it and highlights it for you. From there, the app can be told to search for recipes containing those ingredients online using a recipe API, which will help you use those ingredients before they expire and have to be thrown out. The ingredients that typically expire before being used are often uncommon food items or perishables, so our app is a useful tool to remind you of what’s in your pantry and what you can cook with it.

How we built it

Our web app was built using Replit to collaborate writing code in real-time. We built the site using HTML and React. Since one of us is quite experienced with coding in React, the interactive elements and API code were handled by them. Styling the site was the responsibility of the other member, who has little experience with JavaScript but has made simple websites in the past with just HTML and CSS. The layout and colors of the site were designed in Canva, then used as a reference for building the site’s visuals. Vectors were refined with Inkscape and imported to Replit for the icons and background.

Challenges we ran into

We did not encounter many issues when designing the visuals of the site, but progress on that front was slow because the member responsible for the CSS had not touched it in years and was learning it along the way. One major difficulty was translating the layout of the mockup we made in Canva into CSS. This problem consisted of managing the hierarchy of objects in the HTML, then making sure that the layout and spacing between the elements was correct. Often the entire layout of the site would change unexpectedly based on one typo and it was frustrating to work through that. While the visuals were being worked on, our other member responsible for React code was experiencing difficulties as well./n For this app to work properly, we decided to use an API to provide us with useful food recipe data. However, one issue we ran into was figuring how we can minimize the number of API calls as there is a daily capacity from the API. Furthermore, with several button features implemented onto our app, it became more difficult in managing the react states. But eventually, through the help of google and slowly solving each of the small problems, we are able to complete our app.

Accomplishments that we're proud of

Overall, we are proud of the look and features of the site. We stayed very faithful to our original layout and colors chosen in Canva, which translated to an aesthetically pleasing final result. The features of the site work exactly how we want, although there are a few functions we wanted to implement that we had to cut because of time constraints. One of the features we had to cut was adaptive design for mobile, although we did design the site so that it would work at variable desktop resolutions.

What we learned

One of the main things we learned was how to translate a mockup of a site’s visuals into HTML and CSS. At the start of the project on Friday evening, we were unsure of whether our design ideas could be translated into a functional demo. Over the next day, we learned a lot about what is and is not feasible in CSS, how to structure our site to get the desired visuals, and rendering the food data from the API through using react.

What's next for Zero-Waste Recipes

In the future, we plan to make this website mobile friendly and create a mobile app alternative to allow better accessibility and convenience for the users. We would also like to implement a notification feature to notify the user of food that is about to expire so that it does not go to waste. For mobile platforms, a feature we want to include is the ability to take pictures of receipts and food items using the phone’s camera. Our app would then parse data like the type of food and expiry date from the picture using image and text recognition software, which would make the process of adding food to the list more convenient. Overall, although there is much more space for this idea to expand, we are happy with what we developed over the weekend and had a lot of fun doing so!