FindFood

Welcome to FindFood, a web application that helps users discover delicious recipes based on their preferences and requirements. This README provides an overview of the application's functionality, features, setup instructions, and usage details.

Functionality

FindFood offers the following key features:

1. Recipe Search: Users can search for recipes by entering keywords, ingredients, or dish names in the search bar.

2. Filter by Category: Users can filter recipes based on Category such as vegetarian, vegan, beef, etc.

3. Recipe Details: Clicking on a specific recipe will display detailed information, including ingredients and instructions.

4. Responsive Design: The application is designed to be responsive, providing a seamless experience across various devices.

Preview

Home page

Recipes Page

Recipe`s Details

Technologies Used

FindFood is built using the following technologies:

• React: for building the user interface.
• CSS#: For styling and layout.
• JavaScript: For dynamic behaviour and API interactions.
• TheMealDB API: To fetch recipe details data. (TheMealDB)

Getting Started

To set up the project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/DalvindeSingh2022/Findfood.git
   cd findfood

2. Install Dependencies:

   npm install

3. Start the Application:

   npm start

4. Open in Browser: Open your web browser and navigate to http://localhost:3000 to access the FindFood application.

Usage

1. Search for Recipes: Enter keywords, ingredients, or dish names in the search bar and click "Search Icon" to find recipes.

2. Filter Recipes: Use the dietary preferences filter to refine your search based on specific requirements.

3. View Recipe Details: Click on a specific recipe to view detailed information, including ingredients, instructions, and nutritional information.

Thank you for exploring FindFood! If you have any questions or encounter any issues, please don't hesitate to reach out.

Happy cooking! 🍲