https://github.com/bocaletto-luca/meal-explorer

Meal Explorer is an interactive web application designed to help you discover a variety of recipes using the free Meal API. This project retrieves meal data, categorizes recipes, and presents them in a paginated view so you can easily browse through numerous delicious options. The interface is built with modern web technologies to ensure a ...
https://github.com/bocaletto-luca/meal-explorer

api bocaletto-luca cibi css3 database free-api html5 javascript meal meal-api meals open-source responsive ricette webapp

Last synced: about 2 months ago
JSON representation

Meal Explorer is an interactive web application designed to help you discover a variety of recipes using the free Meal API. This project retrieves meal data, categorizes recipes, and presents them in a paginated view so you can easily browse through numerous delicious options. The interface is built with modern web technologies to ensure a ...

• Host: GitHub
• URL: https://github.com/bocaletto-luca/meal-explorer
• Owner: bocaletto-luca
• License: gpl-3.0
• Created: 2025-05-28T10:10:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-28T10:18:05.000Z (about 1 year ago)
• Last Synced: 2025-05-28T11:25:08.662Z (about 1 year ago)
• Topics: api, bocaletto-luca, cibi, css3, database, free-api, html5, javascript, meal, meal-api, meals, open-source, responsive, ricette, webapp
• Language: HTML
• Homepage: https://bocaletto-luca.github.io/
• Size: 20.5 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Meal Explorer

#### Author: Bocaletto Luca

[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS) [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [![Bootstrap](https://img.shields.io/badge/Bootstrap-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com/)

Meal Explorer is an interactive web application designed to help you discover a variety of recipes using the free [Meal API](https://www.themealdb.com/api.php). This project retrieves meal data, categorizes recipes, and presents them in a paginated view so you can easily browse through numerous delicious options. The interface is built with modern web technologies to ensure a smooth and responsive user experience on any device.

## Features

- **Responsive Design:** Enjoy a sleek and dynamic experience on desktops, tablets, and mobile devices.

- **Meal API Integration:** Retrieve extensive recipe data from the free Meal API.

- **Category-Based Navigation:** Explore recipes organized by categories to find meals that suit your taste.

- **Pagination:** Easily navigate through different pages of recipe collections.

- **Dynamic Modal Display:** Click on any recipe card to open a modal window showing detailed information, including:

  - Ingredients

  - Cooking instructions

  - High-quality images

  - Additional recipe details

## Technologies Used

- **HTML5**

- **CSS3**

- **JavaScript**

- **Bootstrap 5**

## Getting Started

### Prerequisites

Meal Explorer runs directly in modern web browsers without any extra dependencies. For development purposes, it is recommended to use a code editor with live reload functionality, such as Visual Studio Code with the Live Server extension.

### Installation

1. **Clone the Repository**

git clone https://github.com/bocaletto-luca/meal-explorer.git cd meal-explorer

2. **Launch the Application**

- Open the `index.html` file in your preferred web browser.

- Alternatively, run a live-reload server through your code editor to preview changes in real time.

## How It Works

- **Data Fetching:** The application uses JavaScript’s Fetch API to request recipe data from the Meal API. The retrieved JSON data is processed to create dynamic recipe cards.

- **Category Filtering:** Recipes are grouped by category. Users can select a specific category to filter the displayed recipes.

- **Pagination:** Recipes are presented in a paginated layout, ensuring that even large sets of data remain easy to navigate.

- **Dynamic Modal Display:** Clicking on a recipe card opens a modal window that reveals in-depth details about the recipe, including ingredients, instructions, and images.

## Contributing

Contributions are welcome! To contribute to Meal Explorer, please follow these steps:

1. Fork the repository.

2. Create a new branch for your feature or fix:

#### Enjoy WEBAPP - By Bocaletto Luca