Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Miguelcds/Recipe-Hub/llms.txt

Use this file to discover all available pages before exploring further.

​
Recipe Hub

Recipe Hub is a modern React application that connects to TheMealDB API to let you browse thousands of recipes from around the world. Search by name, explore random meals, dive into step-by-step instructions, and save your favorites for later — all in a fast, responsive dark UI.

Quick Start

Get the app running locally in under 5 minutes

Core Features

Explore search, recipe detail, and favorites

Architecture

Understand the component and state structure

API Integration

Learn how TheMealDB powers the app

​
Key features

Search recipes

Find any meal by name using the TheMealDB search endpoint. Results display immediately with photos and category tags.

Random discovery

On every fresh load the home page fetches 9 random meals, so there’s always something new to find.

Recipe detail

Full ingredient lists, step-by-step instructions, and an embedded YouTube video for every recipe.

Persistent favorites

Add or remove meals from your favorites. Selections survive page refreshes thanks to localStorage.

Custom hooks

Data-fetching logic is encapsulated in useRecipes and useRecipeDetail — easy to test and reuse.

Responsive dark UI

A hand-crafted dark theme works on any screen size, from mobile to widescreen.

​
Tech stack

LayerTechnology
UI frameworkReact 19
RoutingReact Router DOM v7
Video playbackReact Player
Global stateContext API
Local persistencelocalStorage
Build toolVite
External dataTheMealDB REST API

​
Project structure

src/
├── pages/
│   ├── Home.jsx           # Landing page with random/search results
│   ├── RecipeDetail.jsx   # Single recipe view
│   ├── Favorites.jsx      # Saved recipes list
│   ├── Contact.jsx        # Contact page
│   └── NotFound.jsx       # 404 fallback
├── components/
│   ├── RecipeCard.jsx     # Single meal card (image + name + category)
│   ├── RecipeList.jsx     # Grid of RecipeCard components
│   ├── RecipeDetailCard.jsx  # Full recipe details view
│   ├── SearchBar.jsx      # Controlled search input
│   ├── NavBar.jsx         # Site navigation
│   └── Footer.jsx         # Footer
├── context/
│   └── FavoritesContext.jsx  # Global favorites state
├── hooks/
│   ├── useRecipes.js      # Search + random fetch logic
│   └── useRecipeDetail.js # Single recipe fetch logic
├── services/
│   └── api.js             # TheMealDB API calls
└── App.jsx                # Root layout with Outlet

Build docs developers (and LLMs) love

Get started for freeTalk to us