🍴 Yummy - Your Go-To Recipe and Food Discovery Platform
Yummy Live Demo •
Documentation •
Report Issues
Yummy is a dynamic food discovery platform built with modern web technologies to help users explore various recipes based on ingredients, categories, and regions.
The platform offers real-time food discovery, ingredient-based suggestions, and regional cuisine exploration with a clean, user-friendly interface.
📊 Platform Stats
- 🍽️ Recipes: 1000+ recipes from TheMealDB API
- ⭐ Categories: 14+ meal categories
- 🌍 Regions: 25+ international cuisines
- 🥬 Ingredients: 500+ searchable ingredients
🧑💻 Tech Stack
📷 Screenshots
📑 Table of Contents
🌐 Live Demo
Check out the live demo of Yummy Platform at 👉 Yummy Live Demo
🚀 Features
- 🔍 Recipe Search: Advanced search functionality with real-time suggestions.
- 🍽️ Category Exploration: Browse recipes by meal categories (Breakfast, Lunch, Dinner, Desserts).
- 🌍 Regional Cuisines: Discover recipes from different countries and regions.
- 🥬 Ingredient-Based Search: Find recipes based on available ingredients.
- 🎨 Theme Switcher: Toggle between dark and light themes.
- 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices.
- ⚡ Real-Time Data: Live recipe data from TheMealDB API.
- 🎭 Smooth Animations: Enhanced user experience with hover effects and transitions.
- 📧 Contact Form: Direct communication with the development team.
- 🚀 Fast Loading: Optimized performance for quick recipe discovery.
🧑💻 Technologies Used
- HTML5: Semantic structure and accessibility features.
- CSS3: Modern styling with Flexbox and Grid layouts.
- JavaScript (ES6+): Dynamic functionality and API interactions.
- jQuery (v3.6+): Simplified DOM manipulation and event handling.
- Bootstrap (v5.3): Responsive framework and components.
- Font Awesome (v6.0): Comprehensive icon library.
- TheMealDB API: Real-time recipe and meal data.
- JSON: Structured data format for API responses.
📦 External Dependencies
📂 Project Structure
Yummy-Site/
├── assets/
│ └── imgs/ # Local images and UI assets
├── css/
│ ├── style.css # Main stylesheet with custom styles
│ ├── all.min.css # Font Awesome library
│ └── bootstrap.min.css # Bootstrap framework
├── js/
│ ├── main.js # Core application logic
│ ├── jsconfig.json # VS Code configuration for JS/jQuery
│ └── bootstrap.bundle.min.js # Bootstrap JS bundle
├── index.html # Main HTML file
└── README.md # Project documentation
# Project documentation
🔧 Installation
1- Clone the repository
git clone https://github.com/OmarrSakr/Yummy-Site.git
2- Navigate to the project directory:
cd Yummy-Site
3- Open with Live Server or any local server:
# Using VS Code Live Server extension
# Or open index.html directly in your browser
4- Ensure internet connection for API access
The platform fetches live data from TheMealDB API, so an active internet connection is required.
📋 Requirements
- Modern web browser (Chrome, Firefox, Edge, Safari).
- Active internet connection for API data fetching.
- No additional installations required - runs directly in browser.
⚙️ Usage
- 🔍 Search Recipes: Use the search bar to find specific recipes or ingredients.
- 🍽️ Browse Categories: Click on category cards to explore different meal types.
- 🌍 Explore Regions: Discover international cuisines from the area section.
- 🥬 Ingredient Search: Enter ingredients you have to get recipe suggestions.
- 🎨 Theme Toggle: Switch between dark and light themes for comfortable browsing.
- 📧 Contact Us: Use the contact form for inquiries and feedback.
🔑 API Integration
The application integrates with TheMealDB API for comprehensive meal data:
Base URL: https://www.themealdb.com/api/json/v1/1/
Key Endpoints Used:
- Search meals by name:
search.php?s={meal_name}
- List all categories:
categories.php
- List all areas:
list.php?a=list
- List all ingredients:
list.php?i=list
- Filter by category:
filter.php?c={category_name}
- Filter by area:
filter.php?a={area_name}
- Filter by ingredient:
filter.php?i={ingredient_name}
- Lookup meal by ID:
lookup.php?i={meal_id}
🛠️ Navigation Features
- Responsive Navigation: Mobile-optimized sidebar menu with smooth animations.
- Smooth Scrolling: Seamless navigation between sections.
- Hover Effects: Interactive animations for better user engagement.
- Search Autocomplete: Real-time suggestions while typing.
- Dynamic Loading: Content loads dynamically based on user selections.
📌 Future Improvements
🎯 Interactive Features:
- Recipe rating and review system with user authentication
- Meal customization options with ingredient substitutions
- Personal recipe collections and favorites management
- Social sharing integration for popular recipes
⚡ Advanced Features:
- Weekly meal planning and grocery list generation
- Nutritional information and dietary filtering options
- Recipe difficulty levels and cooking time estimates
- Video tutorials integration for complex recipes
♿ Accessibility Enhancements:
- Enhanced keyboard navigation support
- Screen reader optimization with ARIA labels
- High contrast mode for visual accessibility
- Voice search functionality for hands-free operation
🔧 Technical Improvements:
- Progressive Web App (PWA) capabilities
- Offline recipe storage and caching
- Advanced search filters and sorting options
- Performance optimization with lazy loading
📢 Important Notes
- ⚡ Dynamic Platform: All recipe data is fetched in real-time from external APIs.
- 🔑 API Dependency: Requires active internet connection for full functionality.
- 🌐 Browser Compatibility: Optimized for modern browsers with ES6+ support.
- 📱 Mobile Ready: Fully responsive design tested across various devices.
- 🔄 Cache Management: Clear browser cache if experiencing data loading issues.
- 🛡️ API Limits: TheMealDB API may have rate limiting for excessive requests.
🤝 Contributing
We welcome contributions to Yummy - Food Discovery Platform! Here's how you can help:
1- Fork the repository
2- Create a feature branch
git checkout -b feature/your-feature-name
3- Commit your changes:
git add .
git commit -m "Add: description of your feature"
4- Push to the branch:
git push origin feature/your-feature-name
5- Submit a Pull Request
Please ensure your code follows the existing style and includes appropriate documentation.
📪 Feedback
🍽️ Found bugs or have recipe suggestions?
We'd love to hear from you! Please use the GitHub issue tracker or contact:
📜 License
Licensed under the MIT License.
See the LICENSE file for details.
⭐ If you found this project helpful, please give it a star! ⭐
Built with ❤️ by Omar Sakr
