Recipe Finder

A modern React application for discovering and exploring delicious recipes from around the world. Built with React and Tailwind CSS.

Live Demo

Visit the live site: Recipe Finder Website: https://easy-recipe-finder.netlify.app/

Features

• Search recipes by ingredients or name
• View detailed recipe information
• Save favorite recipes
• Responsive design for all devices
• Beautiful UI with Tailwind CSS

Built With

• React.js
• Tailwind CSS
• Mock data for recipes
• React Router for navigation

Getting Started

To run this project locally:

1. Clone the repository

git clone https://github.com/mohicody/recipe-finder.git

2. Install dependencies

cd recipe-finder
npm install

3. Start the development server

npm start

4. Open http://localhost:3000 to view it in your browser

Environment Setup

Before running the project, you'll need to set up your environment variables:

1. Create a .env file in the root directory
2. Add your Spoonacular API key:

REACT_APP_SPOONACULAR_API_KEY=your_api_key_here

Project Structure

src/
├── components/     # Reusable UI components
├── pages/         # Page components
├── data/          # Mock recipe data
├── styles/        # CSS and style-related files
├── utils/         # Utility functions
└── App.js         # Main application component

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Mohaddeseh Safari - @mohicody

Project Link: https://github.com/mohicody/recipe-finder

License

This project is open source and available under the MIT License.

Acknowledgments

• Tailwind CSS for the styling
• Create React App for the project setup
• Spoonacular for recipe images used in the mock data