https://github.com/risudev/recipe-web-app

Develop a dynamic recipe application that allows users to browse, search, and filter recipes based on various criteria using data fetched from a public meals API. This project focuses on implementing core React functionalities, ensuring a responsive user interface, and providing a smooth user experience.
https://github.com/risudev/recipe-web-app

axios fetch-api reactjs tailwindcss themealdb-api

Last synced: 2 months ago
JSON representation

Develop a dynamic recipe application that allows users to browse, search, and filter recipes based on various criteria using data fetched from a public meals API. This project focuses on implementing core React functionalities, ensuring a responsive user interface, and providing a smooth user experience.

• Host: GitHub
• URL: https://github.com/risudev/recipe-web-app
• Owner: risudev
• Created: 2025-09-06T09:32:37.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-09-06T09:49:24.000Z (9 months ago)
• Last Synced: 2025-10-12T00:52:57.822Z (8 months ago)
• Topics: axios, fetch-api, reactjs, tailwindcss, themealdb-api
• Language: JavaScript
• Homepage: https://recipewebapplication.netlify.app/
• Size: 7.48 MB
• Stars: 0
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🍴 RecipeHub – A Dynamic Recipe Web App

A fully responsive and dynamic recipe application that allows users to browse, search, filter, and favorite meals using data fetched from [TheMealDB API](https://www.themealdb.com/api.php).

This project was built using **ReactJS**, **TailwindCSS**, and **Axios**, and demonstrates key frontend development concepts like routing, state management, API integration, dynamic routing, localStorage, and responsive design.

---

## 🔗 Live Demo

🌍 [View Live on Netlify](https://recipewebapplication.netlify.app/)

---

## 🚀 Features

### ✅ Recipe Listings

- Lists meals fetched from the public MealDB API.

- Each recipe shows name, image, and category.

- Responsive grid layout using TailwindCSS.

### 🔍 Search and Filter

- Search recipes by name/keyword.

- Filter recipes by category (e.g., Beef, Chicken, Dessert).

- Combine search + filter for refined results.

### 📖 Recipe Details

- View complete recipe details on a dedicated page.

- Ingredients list, cooking instructions, YouTube video link, category, area, and thumbnail.

- Seamless back navigation to home or category page.

### ❤️ Favorites (Optional but Included)

- Mark recipes as favorites.

- Favorites are stored in `localStorage`.

- View and manage your saved recipes on a separate "Favorites" page.

---

## 🧑‍🍳 API Reference

Meals are fetched from [TheMealDB](https://www.themealdb.com/api.php)

- List all meals: `https://www.themealdb.com/api/json/v1/1/search.php?s=`

- Filter by category: `https://www.themealdb.com/api/json/v1/1/filter.php?c=Beef`

- Lookup full meal details: `https://www.themealdb.com/api/json/v1/1/lookup.php?i=MEAL_ID`

- List categories: `https://www.themealdb.com/api/json/v1/1/categories.php`

---

## Screenshots

![Web Page](/public/Webpage.png)

![Categories Page](/public/Category.png)

📌 Author

Built with ❤️ by Riswan