🌍 Inspiration

We were inspired by food waste we've seen in our own households and communities, where leftovers go to waste and contribute to climate change and pollution. In trying to solve this, we created Sustainabite, a website that allows individuals to transform leftover ingredients into easy, yummy meals. We aim to leverage technology in order to reduce food waste starting at the household level. While households wasted over 631 million tons of food globally, the issue is prominent, and we wanted to design something that can be a part of the solution.

⚙️ What it does

At its core, Sustainabite is a website that allows users to input leftovers and then instantly receive recipe suggestions. We've included a variety of features users can use to enhance the experience:

Search & Filter System
- Users can enter ingredients one by one and the website will update in real time
- It has filters for the recipes based off of dietary preferences (e.g., vegetarian, vegan)
Recipe Details
- Each result includes tags, prep time, servings, brief instructions, and calories
- Users can heart recipes to save them to their "Favorites" while browsing
AI Cooking Assistant
- Our chatbot answers any possible cooking-related questions and offers help accordingly
- It also analyzes what the user has recently cooked and offer follow-up recipes based off of what the user gives as their leftover ingredients, helping reduce even more waste
Sustainability Education Tools
- Missions page: Outlines our goal of reducing food waste to address climate change and pollution
- Resources page: Links to articles, guides, and other tools on meal planning, health goals, and recipes
- Quiz page: Lets users test themselves and learn more about the impact of food waste on the environment with randomized questions and automatic feedback

Altogether, Sustainabite offers this to work toward our goal: helping users waste less and cook smarter.

🛠️ How we built it

Frontend:
- Built with Next.js and TypeScript due to its fast performance and SEO optimization
- Used React Hooks for state management because of its simple nature component compatibility
- Styled with Tailwind CSS for easy customization and clean UI components
- Animations added with Framer Motion for smooth and sleek transitions, especially on recipe cards ㅤ
Backend:
- Used the Spoonacular API for recipe data and dietary filters
- Integrated Gemini API to power the AI chatbot and handle dynamic, context-aware queries
- Employed localStorage for storing user favorites without requiring login or authentication

🎯 Challenges we ran into

Diet Filters: Adding them required complex logic on top of the base search functionality, even with Spoonacular's flexibility
API Limitations: Spoonacular had call limits, which meant we had to optimize and work around those constraints to fetch details like prep time and servings
UI & Animations: Designing responsive, animated recipe cards with Framer Motion caused layout issues and hydration errors that needed intricate fixes
AI Integration: Making API calls to generate recipe details and then displaying them on the website via tooltips caused many errors

🏆 Accomplishments that we're proud of

A clean and interactive UI that works across for any given device
Real-time recipe updates based on user input and filters
Click-to-expand recipe cards with all key info (prep time, servings, ingredients, etc.)
A favorites system with localStorage-based persistence, routing, and a counter
A smart, context-aware AI assistant that helps users clarify steps, answers questions, and recommends the next meal based on recently cooked recipes

📚 What we learned

How to handle state management efficiently across React components
Chaining and optimizing API requests for both performance and the user's experience
Creating a cohesive user experience, from early wireframes to final deployment

🌱 What's next for Sustainabite

User accounts to save favorites and searches across devices
A camera feature that lets users take pictures of ingredients and identifies them using image recognition
A more advanced AI recipe generator for tailored meal suggestions based off of users
Built-in sustainability insights showing users things such as their carbon footprint and how much waste they've avoided by using the app