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...

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.
}
};

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? `