# Recipe Finder A modern, responsive web application for discovering delicious recipes by searching with ingredients. Built with React, TypeScript, and Tailwind CSS. ## 🍳 About Recipe Finder is a user-friendly application that helps you discover new recipes based on ingredients you have at home. Simply enter an ingredient, and the app will search through thousands of recipes to find the perfect dish for you. ## ✨ Features - **🔍 Ingredient-based Search**: Search for recipes by entering any ingredient - **📱 Responsive Design**: Beautiful, modern UI that works on all devices - **❤️ Favorites System**: Save your favorite recipes for quick access - **📖 Detailed Recipe View**: View complete ingredients list and step-by-step instructions - **🎥 Video Links**: Access cooking videos from YouTube when available - **🌟 Clean Interface**: Intuitive design focused on user experience - **💾 Local Storage**: Your favorites are saved locally in your browser ## 🛠 Technologies Used - **Frontend**: React 18 with TypeScript - **Styling**: Tailwind CSS with custom design system - **UI Components**: Radix UI (shadcn/ui) - **State Management**: React Query for server state - **API**: TheMealDB public API - **Build Tool**: Vite - **Icons**: Lucide React ## 🚀 Getting Started ### Prerequisites - Node.js (version 16 or higher) - npm or yarn package manager ### Installation 1. Clone the repository: ```bash git clone cd recipe-finder ``` 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm run dev ``` 4. Open your browser and navigate to `http://localhost:8080` ### Building for Production ```bash npm run build ``` The built files will be in the `dist` directory, ready for deployment. ## 📝 Usage 1. **Search for Recipes**: Enter any ingredient in the search bar (e.g., "chicken", "tomato", "pasta") 2. **Browse Results**: View recipe cards with images, categories, and cuisine types 3. **View Details**: Click on any recipe card to see full ingredients and instructions 4. **Save Favorites**: Click the heart icon to save recipes to your favorites 5. **Access Favorites**: Use the favorites button in the header to view saved recipes ## 🤝 Contributing 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## 📄 License This project is open source and available under the [MIT License](LICENSE). ## 🙏 Acknowledgments - [TheMealDB](https://www.themealdb.com/) for providing the free recipe API - [Radix UI](https://www.radix-ui.com/) for the excellent UI components - [Lucide](https://lucide.dev/) for the beautiful icons