Yummy

Yummy App is an online recipe display application designed to help users explore and find recipes easily. The app showcases random recipes, allows searching by meal name or first letter, and notifies users if a recipe isn’t found. With diverse food categories, Yummy App makes discovering delicious recipes a breeze. Built using HTML, CSS, and JavaScript, this app provides a seamless user experience and offers details on a variety of meals.

Project Description:

Yummy App is a web-based application that introduces users to a world of food and recipes. Whether you’re looking for inspiration for tonight's dinner or want to explore new cuisines, Yummy App offers random recipes and category-specific browsing. Users can click on recipe cards to dive into detailed information and view the recipe source. Searching by meal name or first letter provides a quick way to find specific meals. The app is built with HTML, CSS, and JavaScript and utilizes an external API to retrieve recipe data.

Project Details:

1. User Interface

• Design: Simple and clean layout displaying recipes as interactive cards with images and basic details.
• Styling: CSS ensures a visually appealing and responsive design across different devices.

2. Functionality

• Recipe Display: The app displays random recipes on the home page for easy browsing.
• Recipe Details: Each card can be clicked to open a detailed view with ingredients, steps, and source information.
• Search Function:
  • By name: Users can enter the meal’s name to search.
  • By first letter: Users can search for meals beginning with a particular letter.
• Category-Based Browsing: Recipes are categorized to facilitate browsing by type (e.g., breakfast, dessert).
• Notification for Missing Recipes: If a recipe isn’t found, the app alerts the user that the item doesn’t exist.

3. API Integration

• Recipe API: The app uses an external API to dynamically fetch recipe data, including images, instructions, and sources, ensuring the app always has fresh and relevant recipes.

Example Usage

1. User opens the app and views random recipes on the home screen.

2. They search for a recipe by typing "pasta" or selecting recipes starting with "P".

3. The user clicks on a recipe card to view ingredients, instructions, and source.

4. If a recipe is not available, they receive a notification.

Tools and Technologies:

• HTML: For content and layout structuring.
• CSS: For styling and ensuring a visually appealing design.
• JavaScript: For interactivity, API requests, and dynamic recipe loading.
• API: Retrieves and updates recipe data for the app.

Demo:

Yummy.App.mp4

Screenshots:

Instructions and Recipes

Contact US