🍽 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