🍽️ Recipe Finder SPA

A Single Page Application (SPA) that allows users to search for delicious recipes from around the world. Built strictly with vanilla web technologies (no frameworks) and deployed to Google Cloud Run.

📝 Description

This project interfaces with the public TheMealDB API to fetch and display culinary recipes. The application relies entirely on Vanilla HTML, CSS, and JavaScript, strictly avoiding any external frontend frameworks (like React or Angular) or CSS libraries (like Bootstrap or Tailwind).

State management and view routing (Search $\rightarrow$ Results $\rightarrow$ Detail View) are handled seamlessly in the DOM via JavaScript and CSS class toggling, resulting in a smooth user experience without page reloads.

https://recipe-finder-972884409291.us-central1.run.app/ Visit this link to see the example.

✨ Features

• Dynamic Search: Query recipes by name using asynchronous JavaScript (fetch API with async/await).
• Responsive Grid Layout: Search results are displayed in a clean, responsive card grid built with native CSS Grid and Flexbox.
• Detailed Recipe View: View high-resolution meal images, categorized tags, comprehensive ingredient lists with precise measurements, and step-by-step cooking instructions.
• Video Integration: Direct links to YouTube tutorial videos for available recipes.
• Graceful Error Handling: Includes form validation, loading spinners, and empty-state handling for invalid or unfound searches.

🛠️ Technologies Used

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
• API: TheMealDB REST API
• Cloud Hosting: Google Cloud Run

📁 Project Structure

```text Recipe_Finder/ ├── index.html # Main HTML structure ├── README.md # Project documentation ├── process_log.txt # AI-assisted development log ├── css/ │ └── styles.css # Vanilla CSS styling └── js/ └── app.js # Vanilla JS application logic ```

🚀 How to Run Locally

Because this is a pure vanilla web application, no build steps are required.

1. Clone or download the repository to your local machine.
2. Open the app: Double-click the index.html file to open it directly in your web browser.
3. (Optional) For the best development experience, open the project folder in VS Code and use the Live Server extension.

☁️ Deployment (Google Cloud Run)

This application is configured for deployment on Google Cloud Run. Ensure you have the Google Cloud CLI (gcloud) installed and authenticated.

1. Set your Google Cloud Project: ```bash gcloud config set project YOUR_PROJECT_ID ```
2. Deploy to Cloud Run: Navigate to the project root and run: ```bash gcloud run deploy recipe-finder
   --source .
   --platform managed
   --region us-central1
   --allow-unauthenticated ```

👨‍💻 Author

Joonho Son