Recipe Explorer

A dynamic and responsive web application for exploring, searching, and managing recipes. This application is built with HTML, CSS, and JavaScript, utilizing the dummyjson.com API for recipe data.

Features

• Browse Recipes: View a grid of recipes fetched from the API.
• Infinite Scroll: Seamlessly load more recipes as you scroll down the page.
• Search: Find recipes by name using the search bar in the navigation.
• Filter: Filter recipes by tags (e.g., "Dessert", "Snack") and meal type (e.g., "Breakfast", "Dinner").
• Sort: Sort the displayed recipes by name, rating, or calories in ascending or descending order.
• View Details: Click on a recipe to see a detailed view in a modal, including ingredients, instructions, prep time, cook time, and more.
• Add, Edit, & Delete:
  • Add new recipes through a form.
  • Edit existing recipes.
  • Delete recipes.
  • (Note: These operations are simulated and do not persist on the remote server).
• Responsive Design: The application is fully responsive and works on various screen sizes, from mobile devices to desktops.
• User-Friendly Interface: A clean and intuitive interface built with Bootstrap, featuring loading skeletons and toast notifications for a better user experience.

Technologies Used

• HTML5: For the structure of the web page.
• CSS3: For custom styling and animations.
• JavaScript (ES6+): For application logic, DOM manipulation, and API interaction.
• jQuery: For simplified DOM manipulation and event handling.
• Bootstrap 5: For responsive layout and UI components (Navbar, Cards, Modals, etc.).
• Bootstrap Icons: For icons used throughout the application.

How to Use

1. Clone the repository:

   git clone https://github.com/dqlou/RecipeSystem.git

2. Navigate to the project directory:

   cd RecipeSystem

3. Open the index.html file in your web browser.

API Reference

This project uses the dummyjson.com/recipes API to fetch recipe data. The following endpoints are used:

• GET /recipes: Fetches a list of all recipes.
• GET /recipes/search?q={query}: Searches for recipes matching the query.
• GET /recipes/tag/{tag}: Fetches recipes with a specific tag.
• GET /recipes/meal-type/{mealType}: Fetches recipes of a specific meal type.
• GET /recipes/{id}: Fetches a single recipe by its ID.
• POST /recipes/add: Adds a new recipe (simulated).
• PUT /recipes/{id}: Updates a recipe by its ID (simulated).
• DELETE /recipes/{id}: Deletes a recipe by its ID (simulated).