Recipe finder using a public API

Search recipes by ingredient, filter, and save favourites, using a free public recipe API.

Why build it

It is the standard first project for fetching data, and the difference between a tutorial clone and a good one is loading, empty and error states.

Features

• Search by ingredient or name
• Result list with images
• Recipe detail page
• Favourites saved locally
• Loading, empty and error states

Roadmap

1. p1

   API exploration

   • Pick a free recipe API and read its rate limits
   • Call it with curl and inspect the response
   • Write a small typed client function
2. p2

   Search and results

   • Debounced search input
   • Result grid with skeleton loading
   • Handle zero results and network errors
3. p3

   Detail and favourites

   • Route per recipe
   • Favourite toggle persisted to localStorage
   • Favourites page
4. p4

   Ship

   • Cache responses in memory
   • Accessibility check on images and buttons
   • Deploy and add a README

Common pitfalls

• Firing a request on every keystroke
• Never showing an error state, so failures look like an empty page

Skills you will practise

• Fetching data
• Debouncing
• Routing