Sustainabite

Inspiration

We both drew inspiration from our own households and communities, observing widespread food wastage that ultimately contributed to increased pollution and worsened climate change. To address the root of the issue, at least within households - the uncertainty of how to use leftover food - we created Sustainabite, which matches any and all leftover ingredients with tasty and implementable recipes for the user, combining our technological skills and background with our motivation to make a positive change within our households and communities, and possibly the entire world as globally, households waste 631 million tons of food, which can potentially be saved with the technology we created.

What it does

At the core level, Sustainabite is a website with a search engine that allows users to enter in individual ingredients and then the website matches them with an array of recipes for the user to implement. In doing so, we have features such as diet filters which allows users to view recipes based on their specific food preferences. Then, when a user is interested in a specific recipe, they can view additional details such as tags, brief preparation instructions, caloric contents, and other details. In addition, we allow users to heart specific recipes for ease of keeping track of them while browsing. To guide the users through the specific cooking process, we have an AI chatbot that can help answer any questions and provide clarifications to the specific situations and context at hand that the user is dealing with. In addition, the AI chatbot takes into account what you've recently cooked to suggest your next meal. By analyzing your freshly-used leftover ingredients, it offers a brand new realistic recipe recommendation, helping you further reduce waste and make the most of what you already have.

Along with these, we have additional features that educate users about the environmental issues related to food wastage and building sustainable consumption and health habits. This includes a missions page, highlighting the goal of our project, which is to solve for food wastage in order to address issues such as climate change and pollution. In addition, the website includes a resources page, providing additional links to articles, videos, etc. that educate the user on topics such as meal planning, setting health goals, and finding healthy recipes. Lastly, it includes a quiz page that allows the user to test themselves and learn new information about food wastage so they become more aware of how waste affects the environment.

Overall, no other website provides a unique combination of a search engine, resource page, and AI chatbot together that help the user learn and implement recipes that ultimately cut down on food wastage.

How we built it

For the frontend, we used Next.js and TypeScript for high speed and performance and SEO, allowing us to scale the project with minimal runtime errors. For state management, we used React hooks due to its simplicity and alignment with the functional components.
For styling, we used Tailwind CSS for consistency and flexibility, allowing us to add in custom components with ease without needing bulky frameworks.
For animations, we used Framer Motion which allowed for smooth and stylistic animations and transitions, particularly for the recipe cards.
On the backend, we used Spoonacular API, which has expansive data on recipes, a simple integrations process, and support features such as diet filters that allowed for scalability.
Additionally on the backend, we used the Gemini API for the AI chatbot, allowing for a simple, interactive chatbot that smoothly integrates with the remaining features of the website.
For the favorites system, we used localStorage as a quick way for users to store recipes without requiring user authentication.

Challenges we ran into

Diet Filters Feature: While the regular search functioned seamlessly, adding the diet filters proved to be a difficult task as it required an additional layer of focused search still required complex logic for proper functionality despite Spoonacular API’s ease-of-access.
API Limitations: Due to Spoonacular having limits on its API calls, we had to find unique ways to bypass those limits in order to add calls for prep times and serving for each recipe.
Clean and Consistent UI: Designing the recipe cards with Framer Motion led to issues with the layout and elements along with hydration errors due to the dynamic content, which ultimately required isolating and resolving small misalignments laid deep in the Tailwind CSS stack.
AI Cooking Assistant Chatbot: Although the API key and basic fetch logic worked properly, we had to add in our own customizations to the chatbot such as referencing to the user’s current context and ingredients, which required redesigning the complex backend.

Accomplishments that we're proud of

A clean and interactive user interface and experience that works with all screen sizes and devices. Real-time updates to the recipes based on user-inputted ingredients and user-selected filters.
Display of prep time, servings, ingredients list, and other important details for more detailed recipe info provided in a click of a button.
A fully functional and seamless favorites system with a counter and routing.
An intuitive AI cooking assistant that answers user questions, clarifies steps, and suggests follow-up recipes based on recently cooked recipes that the user inputs to reduce more waste.

What we learned

How to efficiently deal with state management in React, especially when working with multiple components at hand.
Handling chained API requests and maximizing them for performance and user experience.
Building a truly cohesive user experience, beginning with the wireframes and ending with the final deployment.
Strengthening collaboration through version control and component-based programming.

What's next for Sustainabite

Allowing users to create accounts in order to save favorite recipes and searches across uses and devices.
A camera feature that allows users to take photos of ingredients in their pantry, fridge, etc. and uses image recognition to identify and search ingredients as an option along with the current ingredient search engine.
AI powered recipe generator that allows users to add in more personalized details to get uniquely tailored recipes for their needs.
Sustainability insights that show users their carbon footprint or the amount of waste that they’ve helped to reduce based on the recipes they’ve implemented.