What's good, devs? I'm SamusDevyJr — code sorcerer in training, turning mood swings into full-stack swings. ⚡
This is the story of how I built Cinemunch, an AI-powered app that pairs meals and movies based on your vibe. Think of it as your digital bestie when you're tired of decision fatigue and just want someone to read your energy and say, “Here. Eat this. Watch that.”
It’s also my first real app and my first time entering a hackathon. This post was created specifically for the #adkhackathon using Google’s Agent Development Kit (ADK). Let’s get into it.
🎬 What is Cinemunch?
Cinemunch is a lightweight web app that helps you answer two questions we all ask at the end of a long day:
“What should we eat?” and “What should we watch?”
Instead of scrolling endlessly, you select your mood and let Cinemunch generate a curated pairing of a meal and a movie that vibe with how you're feeling.
🧠 Why I Built It
My wife and I hit this decision fatigue constantly. We wanted something fun, simple, and emotionally aware that could recommend food + film combos that made sense together. Not just random picks, but a vibe match.
When I discovered the Agent Development Kit, I realized I could build this as a modular, intelligent system with specialized agents — no full-stack wizardry required.
🔧 How It Was Built
Cinemunch is composed of:
🖥️ Frontend
- HTML, CSS, JavaScript
- Mood selection dropdown
- Dark mode toggle (with
localStorage) - Async requests to two backend AI agents
- Responsive layout + simple animations
🧠 Backend Agents (Python + Flask)
- Meal Agent: Receives mood + mealContext (based on time of day), uses Gemini to infer keywords, queries Spoonacular for savory recipes (dessert-blocking FTW)
- Movie Agent: Receives mood, uses Gemini to infer movie genres, queries TMDB for a vibe-matching movie while avoiding animation/family defaults
All agents:
- Use Gemini via Vertex AI
- Are containerized with Docker
- Run independently on Google Cloud Run
- Access API keys securely via Google Secret Manager
📚 What I Learned
- ADK Philosophy: Building with modular, independent agents gave me way more flexibility than trying to do it all in one monolith.
- Prompt Engineering: Negative prompts became my secret weapon to prevent generative weirdness like recommending muffins for dinner.
- Cloud Debugging: Getting comfortable with Cloud Run logs and browser dev tools helped me track down cross-agent issues.
-
GitHub Pages: Deployed the frontend using GitHub Pages — had to battle a
README.mdhijack and move myindex.htmlto the root. -
Docker Gotchas: Learned to use
ARG CACHE_BREAKERto fix Docker cache issues that stalled builds.
🧱 Challenges I Faced
- Dessert Bias from Gemini that I had to squash with mealContext and stricter prompting.
- Animated Movie Overload — even with filters, the Movie Agent loved animation. Eventually tamed it with stronger genre cues.
- Frontend ↔ Backend Mapping — syncing JSON key names across Flask and JavaScript was trickier than expected.
- Markdown Rage — getting the README to render correctly on GitHub took more time than I’d like to admit. 😅
🧪 Try It Live
👉 Live Demo (GitHub Pages)
📁 Source Code (GitHub)
🎯 Final Thoughts
Building Cinemunch was like stepping into the hyperbolic time chamber — I came out 10x stronger. This wasn’t just a code sprint. It was a mindset reset. I learned to build fast, break things (gracefully), and ship something I can actually show my people.
Whether you're a dev-in-training like me or just curious about building with AI — just start. You'll learn more from one real project than from ten tutorials.
Thanks for reading 🙏 — and good luck to everyone else building for the #adkhackathon!
Catch y’all in the next build. 💻💫
— SamusDevyJr
Top comments (1)
🎁