🍳 Recipe Search Web App
September 2024 · Spoonacular API · YouTube API · JavaScript · EJS
🔍 Project Overview
This project is a web app that helps users search for recipes based on ingredients or dish names. It uses the Spoonacular API to fetch recipe data and the YouTube API to recommend video tutorials. The interface is responsive, clean, and designed to deliver recipe discovery with minimal clicks.
⚙️ Methodology
- Frontend: Built using HTML, CSS, and Vanilla JavaScript for fast and lightweight performance.
- API Integration: Used Axios to fetch recipes from the Spoonacular API and videos from YouTube API.
- Error Handling: Managed common issues like empty input, network timeouts, and API rate limits with clean UI fallbacks.
- Responsive Design: Ensured the interface works well on both desktop and mobile using media queries.
📅 Features
- Ingredient-based and keyword-based recipe search
- Direct video tutorial links using YouTube search
- Displays key nutritional info (e.g., calories, prep time)
- Bookmark-style card layout with thumbnails
📉 Errors & Fixes
- YouTube API quota exceeded quickly during testing – implemented delayed search suggestions to reduce calls.
- Spoonacular responses included long prep texts – shortened to highlight essentials using JavaScript string handling.
- Cross-Origin errors on some fetches – resolved using a proxy and HTTPS headers.
📊 Key Takeaways
- Combining multiple APIs enriches user experience dramatically.
- Even simple apps can benefit from good error messages and mobile-first design.
- JavaScript remains a powerful tool for interactive UI and real-time API integration.
🔗 Repository
GitHub Repo: Recipe Search Web App
← Back to Blog