A modern and responsive recipe discovery application developed with React. Browse thousands of recipes, save your favorites, and explore different cuisines with an intuitive search experience.
- 🔍 Real-Time Search - Instant results and autocomplete suggestions while typing
- ❤️ Favorite System - Persistently save recipes you love using localStorage
- 🌙 Dark/Light Mode - Theme switching with smooth transitions
- 📱 Fully Responsive - Optimized for mobile, tablet, and desktop
- 🗂️ Category Navigation - Discover recipes by category (Vegetarian, Seafood, Desserts, etc.)
- 🎨 Fluid Animations - Polished user interface with hover effects and transitions
- 🌍 International Recipes - Explore dishes from world cuisines
- React 18 - Modern React and Hooks
- React Router v6 - Client-side routing
- Context API - Global state management
- Bootstrap 5 - Responsive UI framework
- Bootstrap Icons - Icon library
- TheMealDB API - Recipe data source
- Vite - Fast build tool and development server
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/Erdem-Baran/meal-api-project.git
cd meal-api-project/meal-project-github
- Load the dependencies
npm install
- Start the development server
npm run dev
- Open in your browser
http://localhost:5173
- Get a build for production
npm run build
📁 Project Structure
meal-project-github/
├── src/
│ ├── components/ # Reusable components
│ │ ├── FavoriteButton.jsx
│ │ ├── Footer.jsx
│ │ ├── Header.jsx
│ │ ├── Loading.jsx
│ │ └── Search.jsx
│ ├── contexts/ # React Context providers
│ │ ├── Favorites.jsx
│ │ └── ThemeContext.jsx
│ ├── layout/ # Layout components
│ │ └── MainLayout.jsx
│ ├── pages/ # Page components
│ │ ├── CategoryMeals.jsx
│ │ ├── FavoritesPage.jsx
│ │ ├── Home.jsx
│ │ ├── Meal.jsx
│ │ ├── MealDetails.jsx
│ │ ├── SearchResults.jsx
│ │ └── Vegetarian.jsx
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── public/
├── package.json
└── vite.config.js
🎯 Learning Outcomes While developing this project, I learned and applied the following:
✅ Advanced React Hooks - useState, useEffect, useContext, useRef
✅ React Router v6 - Dynamic routing, nested routes, URL parameters
✅ Context API - Global state management without Redux
✅ API Integration - Fetching and processing data from external sources
✅ localStorage - Persisting user preferences
✅ Debouncing - Optimizing search performance
✅ Responsive Design - Mobile-first approach with Bootstrap
✅ Component Composition - Creating reusable UI components
🙏 Acknowledgements API: TheMealDB - Free recipe API
Icons: Bootstrap Icons
UI Framework: Bootstrap 5
📄 License This project is licensed under the MIT License - feel free to use it for learning purposes.
👤 Developer Erdem Baran
GitHub: @Erdem-Baran
LinkedIn: My Profile
⭐ If you found this project useful, please give it a star!