https://github.com/dnmore/my-dish

Recipe web application built using React and Mealdb API.
https://github.com/dnmore/my-dish

mealdb-api react-router-dom reactjs

Last synced: about 5 hours ago
JSON representation

Recipe web application built using React and Mealdb API.

• Host: GitHub
• URL: https://github.com/dnmore/my-dish
• Owner: dnmore
• Created: 2024-01-30T13:53:08.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T10:46:32.000Z (7 days ago)
• Last Synced: 2024-11-19T11:18:15.569Z (about 5 hours ago)
• Topics: mealdb-api, react-router-dom, reactjs
• Language: JavaScript
• Homepage:
• Size: 1.49 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🍽️ 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](https://mydish-recipe-finder.netlify.app/) 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](https://mydish-recipe-finder.netlify.app/). 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!🍴