🍽️ Recipe Finder

A modern, user-friendly web application built with React to search for recipes using TheMealDB API. The app features a clean, Gitingest-inspired UI with a light color palette, playful accents, and a responsive design. Users can search for recipes by name, view detailed instructions, and toggle long descriptions for better readability.

✨ Features

• Search Recipes: Enter a recipe name to get matching recipes.
• Detailed Instructions: View full recipe instructions with a scrollable description area and a "Show More/Show Less" toggle for long texts.
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices.
• Loading State: A custom spinner with a "Loading..." message while fetching data.
• Error Handling: Displays user-friendly error messages if the API request fails or no recipes are found.

🛠️ Tech Stack

• React: Frontend library for building the UI.
• Tailwind CSS: Utility-first CSS framework for styling.
• TheMealDB API: Free API for fetching recipe data.
• Vite: Build tool for fast development and production builds.

🚀 Getting Started

Here are the steps to set up and run the project locally.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn for package management

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/recipe-finder.git
   cd recipe-finder# 🍽️ Recipe Finder
   

A modern, user-friendly web application built with React to search for recipes using TheMealDB API. The app features a clean, Gitingest-inspired UI with a light color palette, playful accents, and a responsive design. Users can search for recipes by name, view detailed instructions, and toggle long descriptions for better readability.

✨ Features

• Search Recipes: Enter a recipe name to fetch matching recipes from TheMealDB API.
• Detailed Instructions: View full recipe instructions with a scrollable description area and a "Show More/Show Less" toggle for long texts.
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices.
• Gitingest-Inspired UI: Light cream background, pink accents, and a modern, playful aesthetic with rounded cards and subtle shadows.
• Loading State: A custom spinner with a "Loading..." message while fetching data.
• Error Handling: Displays user-friendly error messages if the API request fails or no recipes are found.

🛠️ Tech Stack

• React: Frontend library for building the UI.
• Tailwind CSS: Utility-first CSS framework for styling.
• TheMealDB API: Free API for fetching recipe data.
• Vite: Build tool for fast development and production builds.
• Google Fonts: Poppins font for the title.

🚀 Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn for package management

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/recipe-finder.git
   cd recipe-finder
   
   npm install
   
   npm install tailwindcss @tailwindcss/vite
   
   npm run dev