Cooked!

• 

  Front Page

• 

  Adding an Ingredient

• 

  Recipe Results with Match Percentages

• 

  Food Modal 1

• 

  Food Modal 2

Inspiration

Cooked! was inspired by a simple, relatable moment: standing in front of a full pantry and still not knowing what to make. We wanted to flip the usual recipe experience. Instead of finding a recipe first and then buying ingredients, Cooked! helps you start with what you already have and turns it into meal ideas.

What it does

Cooked! helps users turn the ingredients they already have into recipe suggestions, ranked by match percentage, with clear visibility into what’s missing, how much more is needed, recipe instructions, images, and YouTube links.

How we built it

We built Cooked! with a Next.js + TypeScript frontend for a responsive, modern UI, styled using TailwindCSS for a clean design and smooth interactions. On the backend, we used Python + Flask to handle recipe logic andC connect to TheMealDB API. The backend processes ingredient input, calculates match percentages, and returns recipe suggestions with available images and YouTube links.

Challenges we ran into

One major challenge was building reliable frontend-backend integration while both sides were evolving quickly, especially for ingredient matching, scoring, and live recipe updates without stale UI state. Another big challenge was making authentication production-ready, since Google sign-in behaved differently on localhost versus Render and required environment-specific handling plus correct Firebase domain/config setup. We also faced a hard data problem: TheMealDB can be incomplete or inconsistent, so we had to design around missing fields, unit ambiguity, and noisy ingredient inputs while still delivering accurate, useful recipe suggestions.

Accomplishments that we're proud of

We built a full-stack app end-to-end with a working frontend-backend pipeline, real API-powered recipe discovery, and practical ingredient intelligence (normalization, typo guidance, and quantity/unit-aware matching). We’re also proud that we moved beyond a static prototype into a usable product experience with account-based features and deployment-ready architecture.

What we learned

As first-time hackers, we learned much more than just syntax or frameworks. We learned how to take a project from idea to implementation, collaborate through technical blockers, and iterate quickly under time pressure. Most importantly, we learned how real product development works: building, testing, debugging, integrating, and improving continuously based on what users actually need.

What's next for Cooked!

We plan to extend the capabilities of the web app by introducing AI-integration that will allow for less holes in the database we used. With this, we could more confidently present recipes even if data on them is missing. We'd also like to be able to allow users to save/favorite recipes to an account using Google AI Studio for simpler integration. With this we'd be able to introduce new pages and navigation that can better sort information displayed on the page. Finally, we'd like to simply build upon it and move much of the frontend sorting/logic to the server side to improve usability and make the app more secure.

Built With

• css
• firebase
• flask
• framer
• gemini
• html
• javascript
• nextjs
• node.js
• python
• react
• render
• tailwindcss
• themealdb
• typescript