The problem
Recipe sites often bury the useful information under long stories. I wanted to search by dish and compare ingredients, nutrition, and source links quickly.
What I built
- Built the interface in React with Material UI and connected search to the Edamam recipe API.
- Rendered recipe cards with a photo, ingredient count, cuisine type, and source before opening a result.
- Used the API response to expose ingredient and nutrition details without scraping recipe pages.
- Linked every result back to the original recipe so the app stays a discovery layer, not a content copy.
What changed
- A live search interface backed by thousands of recipes.
- Ingredient and nutrition details visible before leaving the results page.
- Source links to the full instructions for each recipe.
What I learned
Third-party APIs shape the interface. I had to design around inconsistent fields and missing images instead of assuming every response would be complete.
Back to all projects