A responsive Recipe Finder Web Application built using React.js that allows users to explore meals from different cuisines using TheMealDB API. The application provides meal searching, filtering, detailed recipe information, and cooking tutorial access through an interactive user interface.
Meal App is a React-based food recipe application that fetches real-time recipe data from TheMealDB REST API. Users can browse meals, search recipes, filter meals based on categories and regions, view complete meal details, and access video tutorials.
The project focuses on API integration, component-based architecture, React Hooks, routing, and dynamic data rendering.
- Search meals by entering the meal name
- Fetch matching recipes dynamically from TheMealDB API
- Display results instantly in meal cards
Users can filter meals by categories such as:
- Seafood
- Vegetarian
- Chicken
- Beef
- Pasta
- Dessert
Browse meals based on different regions:
- Indian
- Italian
- American
- Chinese
- French
- Mexican
- Search meals using starting letters A-Z
- Dynamically generates alphabet filter options
- Fetches a random meal suggestion
- Helps users discover new recipes
Each meal contains:
- Meal image
- Meal name
- Category
- Origin area
- Cooking instructions
- Ingredients list
- YouTube tutorial link
Implemented React Router for:
- Home Page
- Meals Page
- Meal Detail Page
- About Page
Example:
/ → Home Page
/meals → All Meals
/meal/:id → Individual Meal Details
/about → About Page
- React.js
- JavaScript (ES6)
- HTML5
- CSS3
- Axios
- React Router DOM
- TheMealDB API
The project uses TheMealDB REST API.
Base API:
https://www.themealdb.com/api/json/v1/1/
API endpoints used:
search.php?s=
search.php?s={mealName}
lookup.php?i={mealId}
random.php
search.php?f={letter}
filter.php?c={category}
filter.php?a={area}
src
│
├── components
│ │
│ ├── Header.js
│ ├── Home.js
│ ├── Meals.js
│ ├── MealDetail.js
│ ├── About.js
│ └── Footer.js
│
├── App.js
├── App.css
└── index.js
Main application component.
Responsibilities:
- Manages application state
- Handles API requests
- Stores meal data
- Provides functions to child components
Concepts used:
- useState
- useEffect
- Props
- Axios API calls
Handles application navigation.
Features:
- Navigation bar
- React Router configuration
- Component routing
Routes:
- Home
- Meals
- Meal Details
- About
Landing page of the application.
Includes:
- Hero section
- Application introduction
- Meal statistics display
Main recipe browsing page.
Features:
- Search input
- Category filter
- Area filter
- Alphabet filter
- Random meal button
- Meal cards display
Displays complete recipe information.
Includes:
- Meal image
- Ingredients
- Instructions
- Category
- Region
- YouTube tutorial
Provides information about the application.
Displays footer content and API credits.
- Functional Components
- JSX
- Props
- State Management
- React Hooks
- Conditional Rendering
- List Rendering using map()
- Event Handling
- Dynamic Routing
- API Integration
Clone the repository:
git clone <repository-url>Go to project folder:
cd meal-appInstall dependencies:
npm installInstall Axios:
npm install axiosInstall React Router:
npm install react-router-domStart application:
npm startApplication runs on:
http://localhost:3000
User Opens Application
↓
React App Loads
↓
useEffect Fetches Meal Data
↓
Axios Sends API Request
↓
TheMealDB API Returns Data
↓
State Updates
↓
Components Re-render
↓
Meals Displayed
User Enters Meal Name
↓
Search State Updates
↓
Search Button Clicked
↓
API Request Sent
↓
Matching Meals Received
↓
Meal Cards Updated
- Home Screen
- Meal Listing Screen
- Recipe Details Screen
- About Screen
- Building reusable React components
- Managing state using React Hooks
- Fetching data from external APIs
- Implementing client-side routing
- Handling dynamic URLs
- Creating responsive user interfaces
- User authentication
- Save favorite recipes
- Advanced recipe filters
- Dark mode
- Pagination
- Backend database integration