DEV Community

Cover image for I Built a Recipe App That Sees Your Ingredients with Google Gemini
MakendranG
MakendranG

Posted on

I Built a Recipe App That Sees Your Ingredients with Google Gemini

#google #ai #gemini

We've all been there. Staring into the fridge, looking at a random assortment of ingredients, and thinking, "What on earth can I make with this?"

That daily dilemma was the spark for my latest project: the Vibe-Coded Recipe Generator, an app that turns a photo of your ingredients into a complete recipe. I built it using React, Tailwind CSS, and the magic of the Google Gemini API.

Here's how it works and what I learned along the way.

The Idea: From Fridge to Table

Instead of finding a recipe and then buying ingredients, what if an app could work the other way around?

  1. You snap a picture of what's in your fridge.
  2. You add a "vibe"—like "quick and easy," "vegan," or "something spicy."
  3. The app gives you a full recipe, a list of what you're missing, and even meal-prep tips.

This reduces food waste and makes cooking feel more like a creative adventure than a chore.

The Tech Stack: React + Gemini AI

The architecture is simple and powerful:

  • Frontend: A responsive UI built with React, TypeScript, and Tailwind CSS. It’s a single-page application (SPA) that runs entirely in the browser.
  • The Brains: The Google Gemini API (gemini-2.5-flash model). This is where the magic happens.
  • Deployment: Hosted as a serverless container on Google Cloud Run.

The "Magic" Trick: Multimodal Prompts and JSON Mode

The real breakthrough that makes this app possible is Gemini's ability to handle two things exceptionally well: multimodal input and structured output.

1. Seeing and Reading (Multimodal Input)

Gemini isn't just a text model; it can understand images, too. I send the API a "multimodal" prompt containing:

  • The user's images (the ingredients).
  • The user's text prompt (the "vibe").
  • A detailed set of instructions for the AI chef.

Here’s a snippet of the instructions I give it:

You are an expert chef and creative meal planner. Based on the following image(s) of ingredients and user preferences, create a delicious and unique recipe...
Enter fullscreen mode Exit fullscreen mode

2. No More Guesswork (Structured JSON Output)

Getting an AI to just "write a recipe" can be messy. The formatting might change, it might add extra conversational text, and parsing that on the frontend would be a nightmare.

This is where Gemini's JSON Mode is a game-changer. I can define a strict JSON schema and tell the model, "Your response MUST fit this structure."

Here's a part of my schema:

const recipeSchema = {
  type: Type.OBJECT,
  properties: {
    recipeName: { type: Type.STRING },
    description: { type: Type.STRING },
    ingredients: {
      type: Type.OBJECT,
      properties: {
        provided: { type: Type.ARRAY, items: { type: Type.STRING } },
        shoppingList: { type: Type.ARRAY, items: { type: Type.STRING } }
      }
    },
    // ... instructions, prepTime, etc.
  }
};
Enter fullscreen mode Exit fullscreen mode

By telling the API to use this schema, it returns a clean, predictable JSON object every single time. My React app can then simply take this data and render the components. No regex, no fragile string splitting. It just works.

Key Takeaways

  • AI is a Tool, Not Just a Toy: With features like multimodal input and structured JSON output, we can build robust, data-driven applications that solve real problems.
  • Prompt Engineering is a Superpower: The quality of the AI's output is directly proportional to the quality of your instructions. Being specific and clear is key.
  • Serverless is a Perfect Match for AI Apps: Using Google Cloud Run means I don't have to manage servers. The app scales automatically and I only pay for what I use.

This project was incredibly fun to build and showed me a glimpse of the next generation of AI-powered applications. We're moving beyond simple chatbots and into a world where AI can be a creative partner in our daily lives.

Check out the code on GitHub link here and try the live demo link here! What will you create?
`

Top comments (0)