Live Demo — https://dish-discover-zone.vercel.app — Try the app deployed on Vercel.
A React app for searching and viewing recipes using the Spoonacular API. Users can search by keyword and/or cuisine, browse results with pagination, and open a recipe to see full details including ingredients and step-by-step instructions.
- Home page: Search by keyword and/or cuisine filter; results shown as cards with image and title.
- Pagination: Navigate through result pages (5 recipes per page).
- Recipe detail page: Recipe name, image, health information (e.g. vegetarian, vegan, dairy-free), ingredients (name + measure), and cooking instructions.
- Validation: Clear messages when search is submitted with neither keyword nor cuisine, or when no recipes are found.
- Responsive layout and accessibility (skip link, focus management, ARIA where needed).
- As a user, I want to enter a search term (e.g. "pasta") so that I can find recipes matching that keyword.
- As a user, I want to choose a cuisine (e.g. Mexican, Italian) so that I can filter recipes by cuisine.
- As a user, I want to search with only a cuisine selected and the search box empty so that I can browse recipes for that cuisine without typing a keyword.
- As a user, I want to see a validation message if I submit the form with both search and cuisine empty so that I know I must enter a search term or select a cuisine.
- As a user, I want to see how many results were found so that I know the scope of the search.
- As a user, I want to see a clear message when no recipes are found so that I can try different keywords or cuisine.
- As a user, I want to move to the next or previous page of results so that I can browse more than the first 5 recipes.
- As a user, I want to open a recipe from the results so that I can see full details.
- As a user, I want to see the recipe name and image so that I can confirm it’s the right dish.
- As a user, I want to see health information (e.g. vegetarian, vegan, dairy-free) so that I can match my diet or restrictions.
- As a user, I want to see a list of ingredients with name and measure (e.g. "flour – 2 cups") so that I can shop and measure correctly.
- As a user, I want to see cooking instructions in a clear step-by-step format so that I can follow the recipe easily.
- As a user, I want to go back to the search page so that I can run a new search without using the browser back button.
- As a user, I want to see loading feedback while results or recipe details are fetched so that I know the app is working.
- As a user, I want to see a clear error message if the request fails (e.g. network or API error) so that I understand what went wrong.
- Install dependencies:
npm install - API key: Copy
.env.exampleto.envand setVITE_SPOONACULAR_API_KEY. Get a free key at spoonacular.com/food-api/console. - Run the app:
npm run devand open http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start dev server at http://localhost:5173 |
npm run build |
Production build |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint |
- React 19 + Vite 7
- React Router (home and recipe detail routes)
- Sass for styles
- Spoonacular API for recipe search and recipe information