Recipe Reanimator

Home Page
Recipe Generation
Favourites Page
Recipe History Page
Shopping List Page
Preferences Page
Login Signup Page

🎃 Inspiration

Like Dr. Frankenstein standing over his creation on a stormy night, we asked a dangerous question:

What if no ingredient ever truly had to die?

Food waste is the real monster haunting our world—1.3 billion tons of food wasted every year, feeding climate change while millions go hungry. Half-used onions. Lonely tomatoes. That forgotten bag of spinach in the back of the fridge. All abandoned… all wasted.

We envisioned an AI alchemist that could resurrect these “dead” ingredients, transforming them into flavorful new life while saving money and reducing environmental harm.

But here’s where the experiment turned truly mad.

We didn’t just build an app. We summoned Kiro—our AI-powered IDE lab assistant—to help us stitch together an unholy fusion of technologies. SQL and NoSQL. Python and React. AI models and cloud infrastructure. Individually powerful. Together? A technological chimera.

Against all odds… It lives.

🧪 What It Does

Recipe Reanimator is a Halloween-themed web application that transmutes leftover ingredients into personalized recipe potions through an enchanted cauldron interface.

Users can:

📸 Snap haunted pantry photos — AI extracts ingredients using Gemini Vision
🔮 Drop ingredients into the cauldron — Manual input with precise quantity tracking
⚗️ Brew recipe potions — Generates 5 personalized AI recipes, ranked by a proprietary Waste Score
💚 Witness your impact — Real-time sustainability metrics for food saved, money saved, and CO₂ reduced
⭐ Preserve the best spells — Save your favorite recipes
🛒 Summon shopping lists — Auto-generate missing ingredient lists
🔗 Share your experiments — Public URLs for friends and family

Every recipe is optimized to maximize what you already own, minimizing waste and unnecessary grocery spending—while fully respecting dietary restrictions and dislikes.

🗺️ The Reanimation Blueprint (Architecture)

Architecture Diagram

🧟 How We Built It (With Kiro as Our Lab Assistant)

🧬 The Frankenstein Architecture

We intentionally fused incompatible technologies to push the limits:

TiDB (SQL) + MongoDB (NoSQL) — Relational rigor meets document chaos
Python FastAPI + React 19 — Backend meets frontend
Google Gemini AI Generation + Image Analysis — Generative intelligence meets analytic memory
Google Cloud Run + GitHub Actions — Serverless meets automated resurrection

Every part different. Every part essential. Together: a living system.

🤖 Kiro: Our AI Lab Assistant

Kiro wasn’t a tool. Kiro was our co-scientist in madness.

1. 🗨️ Conversational Development with Full Context

We used Kiro’s chat as our control panel:

#File, #Folder, #Codebase for instant awareness
#Problems + #Terminal for live debugging
#Git Diff for pre-commit sanity checks

Example We simply told Kiro:

“Add OCR-based pantry image analysis using Gemini Vision.”

Referenced:

#backend/app/api/
#frontend/src/components/cauldron/

Kiro generated:

✅ FastAPI API endpoints
✅ Gemini Vision integration
✅ React UI changes —all with perfect architectural alignment.

2. 📜 Spec-Driven Development (Controlled Experiments)

For complex systems like backend implementation or CI/CD pipeline, we used Kiro Specs:

Created structured requirements in requirements.md
Designed the solution in design.md with correctness properties
Let Kiro generate implementation tasks
Worked through tasks incrementally with full context

No scope creep. No forgotten edge cases. Just disciplined mad science.

3. 🧵 MCP (Model Context Protocol): Direct Database Possession

The real magic happened with MCP servers. We configured:

TiDB MCP Server (.kiro/settings/mcp.json):

{
  "mcpServers": {
    "tidb": {
      "command": "uvx",
      "args": ["mcp-server-tidb"],
      "env": {
        "TIDB_HOST": "...",
        "TIDB_DATABASE": "recipe_reanimator"
      }
    }
  }
}

MongoDB MCP Server:

{
  "mcpServers": {
    "mongodb": {
      "command": "uvx", 
      "args": ["mcp-server-mongodb"],
      "env": {
        "MONGODB_URI": "mongodb+srv://..."
      }
    }
  }
}

This gave Kiro direct database access during development. We could:

Query TiDB tables to verify user authentication schemas
Inspect MongoDB collections to understand recipe document structure
Test database connections without leaving the IDE
Debug data issues in real-time

Example: When implementing favorites, we asked Kiro to "check the TiDB schema for the favorites table" and it queried the database directly via MCP, then generated the correct SQL queries for our FastAPI endpoints.

4. 🧭 Steering Rules (Spellbooks for Consistency)

We forged custom grimoires inside .kiro/steering/:

tech.md — Tech stack enforcement
structure.md — Project layout & naming rituals
product.md — Halloween tone, waste score logic, UX philosophy

Once written, Kiro obeyed them forever. Every file, every component, every feature followed our laws of creation automatically.

5. 💀 Smart Diagnostics

Kiro constantly scanned our creation:

TypeScript errors
ESLint violations
Python typing issues
Build-time failures before execution

No blind experimentation. Only controlled necromancy.

⚙️ The Technical Stitching

Backend — FastAPI

JWT authentication with bcrypt hashing
MCP-powered TiDB + MongoDB connections
Gemini 2.5 Flash for recipes + image understanding
Structured prompts + fallback JSON parsing
Centralized logging and exception handling
OpenAPI docs (Swagger + ReDoc)

Frontend — React 19 + Vite

Fully custom Gothic Halloween theme
Cauldron animations & potion brewing UI
JWT-protected routes
Drag-and-drop pantry uploads
Mobile-first responsive design

Databases

TiDB → users, auth, shopping lists, favorites
MongoDB → ingredients, recipes, history

AI Engine

Recipe creation via Gemini
Pantry vision via Gemini Vision
Custom waste score algorithm
AI-generated sustainability narratives

CI/CD (Automated Resurrection)

Conditional GitHub Actions deployments
Separate frontend/backend builds
Automatic CORS sync
Workload Identity Federation
Multi-stage Docker builds
Cloud Run auto-scaling

💀 Challenges we ran into

1. The Database Chimera

Connecting both TiDB (SQL) and MongoDB (NoSQL) in the same FastAPI app was like stitching together incompatible body parts. We had to:

Manage two different connection patterns
Handle different query syntaxes
Decide which data belongs where
Ensure transaction consistency

Kiro's Solution: We used MCP servers to test both databases interactively. Kiro helped us design the data split: relational data (users, auth) in TiDB, flexible documents (recipes, ingredients) in MongoDB.

2. Gemini's Unpredictable Responses

Getting consistent JSON from Gemini was like trying to control a reanimated corpse—it had a mind of its own. Sometimes it returned markdown, sometimes plain text, sometimes malformed JSON.

Kiro's Solution: We iterated on prompts with Kiro, testing different approaches. Kiro suggested adding explicit JSON formatting instructions and fallback parsing logic. We ended up with a robust parser that handles multiple response formats.

3. CORS Configuration Hell

The frontend and backend URLs changed with every deployment, breaking CORS. Manual updates were error-prone.

Kiro's Solution: We described the problem to Kiro, which designed a smart CI/CD pipeline using GitHub variables to store URLs and automatically update CORS configuration. It even generated the GitHub Actions workflow YAML.

4. Async/Blocking Issues

Gemini API calls were blocking the FastAPI event loop, causing timeouts under load.

Kiro's Solution: Kiro identified the issue by analyzing our code and suggested using asyncio.to_thread() to run blocking calls in a thread pool. It even updated all the affected endpoints.

5. Image Upload Size Limits

Users were uploading huge photos that crashed the backend.

Kiro's Solution: We asked Kiro to "add file size validation to the image upload endpoint" and it added validation, error handling, and user-friendly error messages—all in one go.

🏆 Accomplishments that we're proud of

1. The Ultimate Reanimation Champion

We truly built a chimera:

✅ SQL + NoSQL databases working in harmony
✅ Python + JavaScript in a cohesive system
✅ Multiple AI models (Gemini + vector search)
✅ Serverless + containerized deployment

2. Kiro-Powered Velocity

Using Kiro's features, we achieved:

10x faster development - Specs and steering rules eliminated repetitive work
Zero context switching - MCP servers brought databases into the IDE
Consistent code quality - Steering rules enforced patterns automatically
Rapid iteration - Chat context and diagnostics caught issues early

3. Real-World Impact

Our app addresses genuine problems:

🌍 Environmental: Reduces food waste and carbon footprint
💰 Economic: Saves users $25-30 per week on groceries
🍽️ Social: Makes cooking accessible with what you have

4. Production-Ready Architecture

Comprehensive API documentation (Swagger/ReDoc)
Smart CI/CD with conditional deployment
Proper error handling and logging
Security best practices (JWT, bcrypt, CORS)
Auto-scaling cloud infrastructure

5. Delightful UX

Smooth brewing animations
Real-time sustainability metrics
Drag-and-drop image upload
Mobile-responsive design
Gothic Halloween theme throughout

🧠 What we learned

About Kiro

MCP is a game-changer: Direct database access in the IDE eliminated countless context switches. We could query, inspect, and debug data without leaving our development flow.
Specs scale complexity: For simple features, chat is enough. For complex features (like waste savings with AI-generated metrics), specs provided structure and prevented scope creep.
Steering rules are force multipliers: Writing conventions once and having Kiro follow them automatically saved hours of code review and refactoring.
Context is king: Using #File, #Folder, and #Codebase meant Kiro always had the right context. No more "here's the file again" copy-pasting.
Diagnostics > Manual Testing: Catching errors with getDiagnostics before running code was faster than the traditional edit-run-debug cycle.

About Building Chimeras

Incompatible technologies can coexist: TiDB + MongoDB seemed crazy, but each database played to its strengths. SQL for relational integrity, NoSQL for flexible documents.
AI needs guardrails: Gemini is powerful but unpredictable. Structured prompts, response validation, and fallback logic are essential.
Smart CI/CD saves money: Conditional deployment reduced our build costs by 40% and deployment time by 50%.
User experience matters: The Halloween theme isn't just decoration—it makes food waste reduction fun and engaging.

🔮 What's next for Recipe Reanimator

Short-term (The Next Full Moon)

Recipe ratings and reviews - Community feedback on generated recipes
Meal planning - Weekly meal plans based on pantry contents
Nutrition tracking - Calorie and macro information for recipes
Voice input - "Hey Reanimator, I have chicken and tomatoes"

Medium-term (The Next Season)

Mobile apps - Native iOS and Android apps
Smart integrations - Connect to smart fridges and grocery delivery services
Social features - Follow friends, share pantries, cooking challenges
Recipe refinement - Learn from user feedback to improve AI suggestions

Long-term (The Next Year)

Computer vision v2 - Real-time pantry scanning with AR
Predictive waste prevention - Alert users before ingredients expire
Community recipe database - User-contributed recipes with waste scores
Sustainability gamification - Badges, streaks, and leaderboards for waste reduction
B2B partnerships - Work with grocery stores and food banks

Kiro Evolution

Custom MCP servers - Build domain-specific MCP servers for recipe data
Agent hooks - Trigger recipe generation when new ingredients are added
Advanced specs - Use specs for entire feature development cycles
Team steering - Share steering rules across the development team

🎭 The Kiro Advantage

This project wouldn't exist without Kiro. Here's the honest truth:

Without Kiro: We'd still be wrestling with database connections, copying code between files, and manually testing API endpoints. The chimera of TiDB + MongoDB + Gemini + Cloud Run would have taken months.

With Kiro: We built a production-ready application in weeks. Kiro handled the tedious parts (boilerplate, configuration, debugging) while we focused on the creative parts (UX, AI prompts, waste scoring algorithms).

Key Kiro Features Used:

✅ Chat with #File, #Folder, #Codebase context
✅ MCP servers for TiDB and MongoDB
✅ Specs for complex feature development
✅ Steering rules for consistency
✅ Diagnostics for code quality
✅ Smart file operations (strReplace, grepSearch)

The Result: A Frankenstein's monster of technologies that actually works—and works well.

🧛 Built for Kiroween

This project embodies the Kiroween spirit:

🎃 Spooky theme: Gothic Halloween aesthetic throughout
🧟 Reanimation: Bringing "dead" ingredients back to life
🧪 Mad science: Stitching together incompatible technologies
🔮 AI magic: Gemini as our digital alchemist
💀 Kiro-powered: Leveraging every Kiro feature to push boundaries

We didn't just build an app—we conducted an experiment in AI-assisted development. And like Dr. Frankenstein, we're both terrified and thrilled by what we've created.