I Built a Recipe Finder App with Vanilla JS and an API. Here's How We Fixed the 404 and 403 Errors.

#javascript #api #showdev #tutorial

Hey everyone! I just finished a new portfolio project: a Recipe Finder app built with vanilla HTML, CSS, and JavaScript.

Live Demo: https://karanja-max.github.io/recipe-finder/

GitHub Repo: https://github.com/Karanja-max/recipe-finder

The app lets you type in ingredients (like "chicken, rice") and uses the Edamam API to show you recipes you can make.

The Tech Stack:

JavaScript (ES6+): Used async/await for the fetch call and document.createElement for DOM manipulation.

CSS Grid: I used grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); to make a perfectly responsive card layout.

The Real-World Part: Solving API Errors

This project wasn't just smooth coding. I ran into two major errors:

HTTP 404 (Not Found): My first fetch calls failed. I had to debug the API docs and found the endpoint had been updated. I fixed it by changing my apiUrl from /search to /api/recipes/v2?type=public.

HTTP 403 (Forbidden): Even though the URL was correct, I was forbidden! This taught me always to double-check that my API key is 1) correct and 2) actively subscribed to the free plan.

It was a great lesson in how to debug real-world API issues.

This was a super fun project for practicing core JS skills. What's your favorite small project for practicing API calls? Let me know!