Recipe Finder

Project Overview

Recipe Finder is a responsive React-based web application that allows users to search, explore, and save their favorite recipes. It uses APIs to fetch random meals and display them with detailed ingredients, instructions, and images. Users can also create meal plans and organize their favorite dishes for easy access.

Screenshots

Key Features

Search Recipes: Instantly search for recipes by name or ingredient.
Random Recipe Generator: Get inspired with random dishes every time.
Favorites List: Save and view your favorite recipes anytime.
Meal Planner: Add recipes to your personal weekly plan.
Responsive Design: Works perfectly on mobile, tablet, and desktop.
Interactive UI: Smooth animations, icons, and modern Tailwind-based layout.

Functionality

The app loads random recipes when opened.
Users can search recipes by keyword or ingredient.
Clicking a recipe card opens a detailed modal view with:
- Image
- Ingredients
- Instructions
Users can add recipes to Favorites or Meal Plan.
The sidebar shows selected meal plans and saved recipes.
The layout automatically adapts to screen size for mobile/tablet use.

Technology Used

React (Vite) – Frontend framework for building dynamic UI.
Tailwind CSS – For responsive and modern styling.
Lucide React – For clean, minimal icons.
MealDB API – To fetch real recipe data dynamically.
JavaScript (ES6) – For app logic and interactivity.

Why This Project Is Useful

This project helps food lovers and home cooks easily discover new dishes, organize their favorite recipes, and plan meals efficiently. It simplifies meal discovery and planning — saving time and reducing daily cooking stress.