Vibe-Coded Recipe Generator & Meal Planner

Snap a pic of your ingredients, add your vibe, and get a custom AI-generated recipe, shopping list, and meal plan in seconds.

Comment

Inspiration

The project was inspired by the universal, daily question: "What should I make for dinner?" We wanted to solve this in a fun, modern way that reduces food waste and sparks culinary creativity. Instead of searching for recipes and then buying ingredients, our app flips the script: it starts with what you already have. By using photos of your current ingredients, we aim to make home cooking more accessible, sustainable, and exciting.

What it does

Vibe-Coded is an intelligent kitchen assistant that transforms photos of your on-hand ingredients into complete, personalized meal plans.

  1. Upload: Users upload one or more photos of ingredients from their fridge, pantry, or grocery bag.
  2. Customize: They can add text-based preferences, such as "vegan," "spicy," "a quick 30-minute meal," or "something kid-friendly."
  3. Generate: With a single click, the app sends the images and preferences to the Google Gemini AI model.
  4. Receive: The AI analyzes the ingredients and returns a complete, structured recipe that includes:
  5. A creative recipe name and description.
  6. Prep time, cook time, and servings.
  7. A list of the ingredients it identified from the photos.
  8. A shopping list for any missing items needed to complete the dish.
  9. Step-by-step cooking instructions.
  10. Helpful meal prep tips to save time. The result is displayed in a clean, user-friendly, tabbed interface.

How I built it

This application is a modern, serverless web app built with a focus on a great user experience and powerful AI integration.

  • Frontend: The user interface is built with React and TypeScript, ensuring a robust and maintainable codebase. We used Tailwind CSS for rapid, utility-first styling to create a beautiful and responsive design that works seamlessly on both desktop and mobile devices.
  • AI Core: The magic is powered by the Google Gemini API, specifically the gemini-2.5-flash model. We leverage its powerful multimodal capabilities, allowing it to understand both the images of ingredients and the user's text-based preferences.
  • Structured Data: To ensure reliability, we use Gemini's JSON Mode. We defined a strict responseSchema that forces the AI to return data in a predictable JSON format. This completely eliminates the need for fragile string parsing on the frontend and makes displaying the recipe data trivial.
  • Deployment: The application is designed to be a static single-page application (SPA) deployed directly to Google Cloud Run, providing a scalable, secure, and cost-effective hosting solution. ## Challenges we ran into
  • Prompt Engineering: Crafting the perfect prompt was an iterative process. We had to be very specific in our instructions to the AI to ensure it correctly identified ingredients, separated them from the required shopping list items, and consistently followed the JSON schema.
  • Ensuring JSON Reliability: Early on, the model would occasionally return malformed JSON or add conversational text. Implementing the strict responseSchema with the responseMimeType: "application/json" config was the key to solving this and making the application robust.
  • UX for Image Handling: Designing an intuitive interface for uploading, previewing, and removing multiple images was crucial for a smooth user experience. We focused on making this process as simple and visual as possible. ## Accomplishments that we're proud of We are incredibly proud of creating a polished, practical application that solves a real-world problem. Specifically, our successful use of Gemini's multimodal and JSON output capabilities to build a genuinely useful tool is a major accomplishment. The seamless flow from a simple photo to a complete, structured meal plan feels like magic. ## What we learned This project was a deep dive into the practical application of large language models. We learned the critical importance of structured outputs (like JSON mode) for building reliable AI-powered applications. We also gained valuable experience in multimodal prompt engineering—combining images and text to guide the AI toward a specific, high-quality outcome. ## What's next for Vibe-Coded Recipe Generator
  • Meal Planning & History: Expand to generate a full week's meal plan and allow users to save their favorite generated recipes to a personal cookbook.
  • Nutritional Information: Integrate a feature to call the Gemini API again to estimate calories and macros for each recipe.
  • Cuisine Transformation: Add a feature to let users ask the AI to "remix" a recipe in a different culinary style (e.g., "make this Italian dish into a Thai version").
  • Video Instructions: Use an AI video generation model to create short, animated cooking steps for the generated recipe.

Built With

Share this project:

Updates