WHAT THE FRIDGE? website

Inspiration

We wanted to solve a very common, everyday problem: not knowing what to cook with the ingredients already available at home. People often waste food or order takeout simply because they lack ideas.

What it does

WHAT THE FRIDGE? helps users decide what to cook based on the ingredients they already have.

Users can upload an image of their fridge and pantry, and the application detects and extracts ingredient names. Those ingredients are then used to return relevant recipes. The app intelligently categorizes recipes into:

Ready to Cook – Recipes that match available ingredients

Shopping Required – Recipes that need additional items

Users can also manually edit ingredients for full control.

How we built it

The project was built using a server-rendered web architecture:

Backend: Node.js with Express.js for routing and API handling AI Integration: Google Gemini for image-based ingredient detection Recipe Data: Spoonacular API for recipe search and metadata Frontend: EJS templates with HTML, CSS, and vanilla JavaScript

The backend handles image processing and API orchestration, while EJS dynamically renders views using server-provided data. Styling was modularized across multiple CSS files to keep UI logic maintainable.

Challenges we ran into

Several technical and design challenges emerged:

Handling inconsistent AI outputs from image analysis

Designing a clean UX without using a heavy frontend framework

Structuring CSS across multiple pages without style conflicts

We also had to carefully validate ingredient lists to ensure Spoonacular queries returned useful results.

Accomplishments that we're proud of

We are especially proud of: How we worked together with each other to achieve this goal. Successfully integrating AI-driven image analysis into a practical workflow Building a clean multi-page UI with EJS Designing a useful recipe categorization system Creating a genuinely helpful real-world tool rather than a demo project