Clean Plate

Inspiration

Team c0y asx, jimmyzha, dmpatel

While most are aware that the food industry has a negative effect on our environment, many don't realize just how harmful it can be. In fact, agriculture contributed to 10% of overall carbon emissions in 2019. Clean Plate intends to raise awareness of the negative impact of producing various foods, since bringing the issue to the forefront is the first step in reversing the tide.

What it does

Clean Plate allows users to input a recipe's URL, through a series of API calls, it presents the harmfulness of each ingredient in a visually pleasing, eye-opening way. Specifically, the algorithm gathers data about each ingredient's carbon and water footprints. Furthermore, Clean Plate identifies the ingredients with the highest carbon and water footprints and suggests more eco-friendly substitutes to make the recipe more environmentally conscious.

How we built it

Clean Plate was mainly built with React.js, HTML, and CSS. We used json-server to mock backend data, which we used API calls to retrieve. While the data was hardcoded, because we implemented API calls with a mock server, it could easily be integrated with a real API.

Challenges we ran into

We originally intended to use a combination of the Spoonacular and Eaternity APIs, which would allow us to fetch recipe data, find substitutes, and retrieve data about each ingredient's environmental footprint. While the integration with Spoonacular was initially working, we did not realize that there was a maximum number of API calls allowed for a free account. Since the API no longer allowed us to make calls, we quickly switched gears and mocked our own backend data.

Accomplishments that we're proud of

Even though we encountered some bumps along the way with the APIs, we are especially proud of our adaptability and perseverance. We were able to quickly think of a way to implement our project without real backend data and quickly learn how to use json-server.

What we learned

Since none of us are very experienced hackathon participants, we all learned a huge amount. We learned how to develop and deploy webapps, use Git to collaborate, and work together as a team. Furthermore, even though we weren't able to fully integrate APIs into our project, we learned how to use axios to make API calls and work with backend data.

What's next for Clean Plate

At the moment, Clean Plate's backend data is hardcoded. In the future, it would be awesome if we could integrate a real database into our project so that the app could work with any recipe. Additionally, since Clean Plate currently only provides data for water usage and carbon emissions, we would like to provide more options for ingredient data, such as energy and human rights data. We would also like to flesh out the recipe recommendation system, so that users could have more control over suggested recipes and even order ingredients for a recipe straight from Clean Plate. Finally, we discussed developing a system where users could input ingredients straight into Clean Plate, allowing them to check the data on specific ingredients without finding a relevant recipe.