process_log.txt

# AI-Assisted Development Log
# CSCI 571 - Assignment 1: Recipe Finder SPA
# Student Name: Hsuan-Fu Hsu
# USC Email: hsuanfuh@usc.edu
# Date: February 26, 2026

================================================================================
SESSION 1: Project Setup and HTML Structure
================================================================================

PROMPT:
"Help me create a basic HTML structure for a single-page recipe finder
application with a search form and result container."

AI RESPONSE SUMMARY:
- Generated semantic HTML structure including header, search form, result grid,
  and detail section.
- Recommended separating CSS and JavaScript into external files.

ISSUES ENCOUNTERED:
- Hidden elements (loading, no results, back button) were visible on page load.

FIX:
- Added a `.hidden { display: none; }` rule to styles.css.
- Verified correct stylesheet path using browser DevTools.

EXPLANATION:
The issue occurred because the external stylesheet was initially empty,
so elements with class "hidden" were not being hidden. Adding the correct CSS
rule and ensuring the stylesheet was properly linked resolved the issue.
This demonstrates understanding of CSS loading and DOM rendering behavior.

================================================================================
SESSION 2: Implementing Search Functionality
================================================================================

PROMPT:
"Show me how to use fetch() with async/await to retrieve data from TheMealDB API
and display the results as cards."

AI RESPONSE SUMMARY:
- Provided async fetch implementation.
- Demonstrated JSON parsing and DOM manipulation.
- Suggested encoding user input using encodeURIComponent().

ISSUES ENCOUNTERED:
- Needed to handle empty search input.
- Needed to handle API returning null when no results found.

FIX:
- Added validation to show error message for empty input.
- Checked if `data.meals` is null before rendering results.
- Added a loading indicator while waiting for API response.

EXPLANATION:
TheMealDB API returns `{ meals: null }` when no results are found.
Failing to check for null would cause runtime errors when iterating.
Proper validation and conditional rendering improves robustness and user
experience. Using async/await improves readability compared to promise chains.

================================================================================
SESSION 3: Detail View and Ingredient Parsing
================================================================================

PROMPT:
"How do I extract ingredients from strIngredient1 through strIngredient20
and filter out empty values?"

AI RESPONSE SUMMARY:
- Suggested looping from 1 to 20.
- Recommended using template literals for dynamic property access.
- Suggested trimming whitespace before checking values.

ISSUES ENCOUNTERED:
- Empty ingredient fields caused blank list items.

FIX:
- Implemented buildIngredientsList() function:
  - Iterated 1–20
  - Checked for non-empty trimmed values
  - Combined strMeasure and strIngredient fields

EXPLANATION:
The API structure requires iterating over numbered fields instead of a single
array. Filtering empty strings ensures clean UI output. This solution shows
understanding of dynamic object property access and defensive programming.

================================================================================
SESSION 4: Docker and Cloud Deployment
================================================================================

PROMPT:
"Help me deploy this static frontend app to Google Cloud Run using Docker."

AI RESPONSE SUMMARY:
- Created Dockerfile using nginx:alpine.
- Configured nginx to listen on port 8080.
- Provided gcloud commands for build and deployment.

ISSUES ENCOUNTERED:
- Initial error: Project billing not enabled.
- Needed to link Google Cloud project to billing account.
- Needed to enable run.googleapis.com, cloudbuild.googleapis.com,
  and containerregistry.googleapis.com APIs.

FIX:
- Linked billing account using:
  `gcloud beta billing projects link`
- Enabled required APIs using:
  `gcloud services enable`
- Successfully built container with:
  `gcloud builds submit`
- Deployed service with:
  `gcloud run deploy --allow-unauthenticated`

EXPLANATION:
Cloud Run requires an active billing account even when using educational credits.
Enabling required APIs is necessary before deploying services.
Understanding the relationship between container images, registry,
Cloud Build, and Cloud Run demonstrates comprehension of cloud deployment
workflow and containerized application architecture.

================================================================================
FINAL RESULT
================================================================================

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

Time Spent: ~6 hours
AI Tools Used: ChatGPT, GitHub Copilot

Reflection:
AI assistance significantly accelerated development, particularly for
API handling and deployment troubleshooting. However, manual debugging
and validation were necessary to resolve configuration and billing issues.
All generated code was reviewed, tested locally, and validated before deployment.