Scavengr: Transforming Leftover Ingredients into Culinary Adventures with AI

  • React
  • Gemini API
  • Spoonacular
  • Tailwind
  • ShadCN UI

The Problem: When Your Fridge Becomes a Mystery Box

We've all been there. You open your refrigerator, stare at the random assortment of ingredients, and think: "What can I possibly make with half a tomato, some leftover chicken, and that lonely onion?" Traditional recipe apps require you to know what you want to cook first, then go shopping. But what about those moments when you want to cook with what you already have? This is exactly the problem I set out to solve with Scavengr - a web application that transforms your available ingredients into personalised, AI-generated recipes.

What is Scavengr?

Scavengr is a modern web application that helps home cooks create recipes from ingredients they already have at home. Instead of planning meals and shopping for specific ingredients, users simply search for what's in their pantry, add those ingredients to their list, and let AI generate a custom recipe tailored to their available supplies.The app's name "Scavengr" reflects its core purpose – helping you scavenge through your kitchen to create something delicious from what you have, not what you wish you had.

The Tech Stack: Modern Web Development Meets AI

Frontend Architecture

Backend & AI Integration

Development Experience

How Scavengr Works: The User Journey

1. Ingredient Discovery

Users start by typing ingredients they have available. The app provides real-time autocomplete suggestions powered by Spoonacular's extensive ingredient database, complete with ingredient images for visual recognition.

2. Smart Ingredient Management

Selected ingredients appear in a clean, organized sidebar where users can easily add or remove items. The interface provides visual feedback and maintains state throughout the cooking process.

3. AI-Powered Recipe Generation

Once users have selected at least 3 ingredients, they can generate a recipe. This is where the magic happens – Google Gemini AI analyzes the available ingredients and creates a complete recipe including:

4. Beautiful Recipe Display

The generated recipe is presented in a clean, readable format with proper typography and spacing, making it easy to follow while cooking.

The AI Magic: How Gemini Transforms Ingredients into Recipes

The heart of Scavengr lies in its AI integration. Here's how the recipe generation works:

const prompt = `You are helping someone cook with leftover ingredients they have at home. Create a simple, practical recipe using ONLY these ingredients: ${ingredients.join(', ')}. 

IMPORTANT: The person only has these specific ingredients available. They do have basic pantry staples like salt, pepper, common herbs/spices, cooking oil, and normal kitchen equipment (pans, utensils, oven, stovetop, etc.).

Keep it simple and practical - this is for someone cooking at home with what they have, not a fancy restaurant dish. Make sure the recipe is easy to follow and uses ONLY the provided ingredients as the main components.`;

The AI is specifically prompted to:

The response is structured as JSON with a defined schema, ensuring consistent, parseable output that the frontend can reliably display.

Key Features That Make Scavengr Special

Real-Time Ingredient Search

Responsive Design

Smart Error Handling

Developer Experience

The Technical Challenges and Solutions

Challenge 1: Real-Time Search Performance

Problem: Users typing quickly could overwhelm the Spoonacular API with requests.

Solution: Implemented debouncing with a 300ms delay, ensuring API calls only happen after users pause typing.

Challenge 2: AI Response Consistency

Problem: AI responses needed to be structured and consistent for the frontend to display properly.

Solution: Used Google Gemini's structured output feature with a defined JSON schema, ensuring every response follows the same format.

Challenge 3: Cross-Origin Resource Sharing

Problem: Frontend and backend running on different ports needed to communicate securely.

Solution: Implemented CORS middleware with proper configuration for development and production environments.

The Impact: Solving Real Kitchen Problems

Scavengr addresses several real-world cooking challenges:

  1. Reduces Food Waste: By creating recipes from available ingredients, users are less likely to let food go bad
  2. Saves Money: No need to buy additional ingredients for specific recipes
  3. Encourages Creativity: AI suggests combinations users might not have considered
  4. Saves Time: No more staring at ingredients wondering what to make
  5. Builds Confidence: Provides complete recipes with clear instructions

Future Enhancements and Possibilities

While Scavengr is already functional and useful, there are several exciting directions for future development:

Getting Started with Scavengr

The application is designed to be easy to set up and run locally:

  1. Clone the repository and install dependencies with npm install
  2. Get API keys from Spoonacular and Google AI Studio
  3. Configure environment variables in a .env file
  4. Run both servers with npm run server and npm run dev

The complete setup instructions and API documentation are available in the project's README.

Conclusion: Where AI Meets Everyday Cooking

Scavengr represents a perfect marriage of modern web technologies and practical AI application. By leveraging Google Gemini's natural language processing capabilities and combining it with a clean, intuitive user interface, the app transforms the often-frustrating experience of "what should I cook?" into an exciting culinary adventure.The project demonstrates how AI can be integrated into everyday applications to solve real problems, not just showcase technical capabilities. It's a reminder that the best applications are those that make our daily lives easier, more creative, and more enjoyable.Whether you're a developer interested in AI integration, a home cook looking for inspiration, or someone curious about modern web development, Scavengr offers insights into how technology can enhance our most fundamental human activities – like cooking and sharing meals.Ready to turn your leftover ingredients into your next favorite meal? Give Scavengr a try and discover what AI can create from your kitchen's hidden treasures.Tech Stack Summary:

Key APIs:

Full Project

https://github.com/jono-oliver/recipe-app