🌍 Inspiration

We were inspired by food waste we've seen in our own homes and communities, where leftovers often go unused and contribute to climate change and pollution. To help solve this, we created Sustainabite, a platform that helps people turn leftover ingredients into easy, practical meals. Our goal is to use tech to reduce food waste starting at the household level. With over 631 million tons of food wasted by households globally, this issue is truly prominent, and we wanted to make a tool that could be part of the solution.

⚙️ What it does

At its core, Sustainabite is a website that allows users to input leftover ingredients and instantly receive recipe suggestions. We've included multiple features to enhance the experience:

Search & Filter System
- Users can enter individual ingredients and the website will update in real time
- It can filter recipes based on 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 can also analyze what the user has recently cooked and offer follow-up recipes based off of the user's 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 for fast performance and SEO optimization
- Used React Hooks for state management due to its simplicity and component compatibility
- Styled with Tailwind CSS for flexibility and easy customization of UI components
- Animations added with Framer Motion for smooth 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 deep Tailwind-level fixes
AI Chatbot: While the basic fetch logic worked, we had to add our own customizations to incorporate the user's current context and past ingredients, which required backend restructuring

🏆 Accomplishments that we're proud of

A clean and interactive UI that works across all devices and screen sizes
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 personalized and tailored meal suggestions
Built-in sustainability insights showing users their carbon footprint and how much waste they've prevented by using the app