Skip to content

README.md

Latest commit

 

History

History
97 lines (69 loc) · 2.18 KB

README.md

File metadata and controls

97 lines (69 loc) · 2.18 KB

🍽 Recipe Finder - CSCI 571 Assignment 1

A modern single-page web application that allows users to search for recipes using the TheMealDB API.
Built with pure HTML, CSS, JavaScript, containerized using Docker, and deployed to Google Cloud Run.

🔗 Live Demo

👉 Cloud Run URL:
https://recipe-finder-394763791461.us-central1.run.app

📌 Project Overview

This project is part of CSCI 571 - Web Technologies.

The application allows users to:

  • 🔍 Search for recipes by keyword
  • 📋 View search results as responsive cards
  • 🍲 Click a recipe to see detailed information
  • 🥕 Display ingredients and measurements dynamically
  • ▶ Watch YouTube cooking tutorials (if available)
  • ❌ Handle empty or invalid search inputs gracefully
  • 🔄 Search again while in detail view (auto-hides detail and updates results)

🖼 Features

1️⃣ Search Functionality

  • Uses fetch() with async/await
  • Encodes user input safely
  • Displays loading state
  • Handles no-result cases

2️⃣ Dynamic Rendering

  • DOM manipulation using vanilla JavaScript
  • Dynamically generates cards
  • Dynamically extracts ingredients (strIngredient1–20)
  • Clean UI state transitions

3️⃣ Detail View

  • Large image preview
  • Category & area tags
  • Ingredient grid
  • Cooking instructions
  • YouTube link button
  • Back to results button

4️⃣ UX Improvements

  • Modern gradient design
  • Responsive layout
  • Scroll-to-top behavior
  • Search while in detail view updates page correctly
  • Proper error handling

🛠 Tech Stack

  • HTML5
  • CSS3 (Flexbox + Grid)
  • Vanilla JavaScript (ES6+)
  • Fetch API
  • Docker
  • Nginx
  • Google Cloud Run

🐳 Docker Configuration

The application is containerized using nginx:alpine.

Dockerfile:

  • Copies static files to /usr/share/nginx/html
  • Configures nginx to listen on port 8080
  • Exposes port 8080 for Cloud Run compatibility

☁️ Deployment (Google Cloud Run)

Steps used:

gcloud builds submit --tag gcr.io/assi-488622/recipe-finder

gcloud run deploy recipe-finder \
  --image gcr.io/assi-488622/recipe-finder \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated