🍽️ MyDish - Recipe Web Application

Overview

MyDish is a modern, user-friendly web application that allows food enthusiasts to explore, discover, and filter recipes based on categories, main ingredient, and areas. Powered by the MealDB API, MyDish provides a seamless experience with intuitive navigation and detailed recipe pages.

Check out the Live Demo and start cooking up some inspiration!

🚀 Features

• Filter by Recipe Categories: Easily browse through recipes based on different food categories (e.g., Chicken, Dessert, Vegan).
• Detailed Recipe View: Get in-depth details on ingredients and step-by-step instructions for each dish.
• Filter by Main Ingredient: Find recipes using a specific main ingredient you like or you have at hand.
• Explore by Geographical Area: Filter and explore traditional recipes from around the world by geographical area.
• Pagination Support: Improved user experience with paginated recipe lists, ensuring faster page loads and better navigation, especially for mobile users.

🛠️ Tech Stack

• React – A powerful front-end JavaScript library for building user interfaces.
• React-Router-Dom – Enables smooth client-side routing and navigation between different recipe categories, ingredients, and regions.
• MealDB API – The primary source of recipe data, providing comprehensive information on thousands of dishes from around the world.
• TailwindCSS – A utility-first CSS framework that simplifies the styling process with minimal custom CSS.
• React-Icons – For adding attractive, scalable icons throughout the UI.
• Hamburger-React – A sleek, animated hamburger menu component for mobile navigation.

🎨 UI/UX Features

• Responsive Design: Mobile-first layout for a smooth experience on all screen sizes.
• Loading Indicators: Displays a loader while fetching data from the API to ensure a smooth user experience.
• Hover Effects & Transitions: Enhanced visual feedback during interaction, making the app more engaging.
• Disabled States for Pagination: Clearly indicate when users have reached the first or last page, improving accessibility.

🔧 Getting Started

Installation

Clone the repository and install dependencies:

$ git clone https://github.com/dnmore/recipe-finder.git
$ npm install

Running the Application

To start the development server, run:

$ npm start

The server will be running at http://localhost:3000/

📜 License

This project is licensed under the MIT License.

🌐 Live Demo

Try out the live version of MyDish here. Discover new recipes, explore various cuisines, and elevate your cooking! With MyDish, finding your next favorite recipe is just a click away! Bon Appétit!🍴