Hackathon Project
10th Place

Recipe Recommender

AI-powered app that generates personalized recipes from ingredients, dietary restrictions, or meal photos using Gemini 1.5 Pro.

React
Express.js
Clarifai
Cloudinary
Node.js
Socket.IO
AI
Cooking
Image Recognition
Duration: 1 month
Completed: 9/19/2024
Team Size: 1

Team Members:

Taiwo Ayomide
View SourceLive Demo
Recipe Recommender

Project Overview

An AI-driven recipe assistant that generates and explains cooking recipes from ingredients, dietary preferences, or meal photos using Gemini 1.5 Pro.

Key Features

  • Personalized meal generation using ingredients and dietary restrictions
  • Image-based recipe recognition powered by AI
  • Interactive AI chat for cooking questions and tips
  • Downloadable ingredient list in text format
  • Real-time response updates with Socket.IO
  • Responsive UI for desktop and mobile users
  • Multer-based secure image upload handling

Challenges & Solutions

  • Handling AI prompt engineering for diverse recipe contexts
  • Efficiently parsing meal photo metadata into structured cooking instructions
  • Ensuring robust file handling and cleanup after downloads
  • Streaming progress updates in real-time using Socket.IO
  • Designing a clean, intuitive UI for a diverse user base

System Architecture

Architecture Components

1. Frontend (React)

  • Built using React.js for a dynamic and responsive UI.
  • Interacts with the backend through RESTful API calls.
  • Allows:
    • Input of ingredients and dietary restrictions.
    • Upload of food images.
    • Viewing AI-generated recipes.
    • Downloading of ingredient lists.
    • Engaging in AI-powered chat for recipe assistance.

2. Backend (Express.js)

  • A Node.js backend built with Express.js to handle all API routes and business logic.
  • Exposes endpoints for:
    • /recommend-dishes — generate recipe suggestions based on ingredients and allergies.
    • /download-ingredient-list — return a downloadable text file of ingredients.
    • /cook-photo — image upload and recognition for recipe generation.
    • /chat — AI chat support for recipe questions.
  • Handles real-time progress updates via Socket.IO.

3. AI Integration (Gemini 1.5 Pro)

  • The core AI logic is powered by Gemini 1.5 Pro from Google:
    • Processes text inputs (ingredients, dietary restrictions).
    • Generates custom recipes with clear steps.
    • Interprets food images and returns corresponding recipes.
    • Powers contextual chat functionality for follow-up questions.

4. Image Handling

  • Multer: Middleware for handling multipart/form-data (used for image uploads).
  • Cloudinary: Stores uploaded images for optimal delivery and CDN support.
  • Clarifai: Used for image generation.

5. Real-Time Communication

  • Socket.IO: Establishes a WebSocket connection between client and server.
    • Streams real-time updates to the frontend during recipe generation.
    • Improves UX by showing progress animations or loading status.

Data Flow Diagram (Simplified)

User
 └──> React Frontend
         ├── POST /recommend-dishes (ingredients, allergies)
         ├── POST /cook-photo (image)
         ├── POST /chat (message + recipe context)
         └── POST /download-ingredient-list

Express Backend
 ├──> Gemini 1.5 Pro (recipe + chat generation)
 ├──> Clarifai (image processing)
 ├──> Cloudinary (image upload and access)
 └──> Socket.IO (real-time progress)

API Summary

RouteMethodDescription
/recommend-dishesPOSTGenerate recipes from ingredients input
/cook-photoPOSTUpload food image for recipe suggestions
/chatPOSTAsk contextual questions about a recipe
/download-ingredient-listPOSTGenerate a downloadable ingredient list
System Architecture Diagram