Food Recipe App with React & Edamam API

Welcome to the ReactJS Food Recipe App! This application allows you to search for a variety of food recipes, view more recipes, and access detailed information about each recipe. The app is built using ReactJS for the frontend, Tailwind CSS for styling, and the Edamam API for recipe data.

Prerequisites:

Before you can run this project, ensure you have the following prerequisites:

1. Node.js and npm (Node Package Manager) installed on your computer.

2. An Edamam API account with API credentials. You will need the REACT_APP_EDAMAM_API_KEY and REACT_APP_EDAMAM_APP_ID from your Edamam account.

Getting Started:

Follow these steps to run the project:

1. Clone the repository to your local machine:

  ```

  git clone https://github.com/CodeWaveWithAsante/FLAVORVERSE.git

  ```

2. Navigate to the project directory:

  ```

  cd into prject

  ```

3. Create a .env file in the root directory of the project and add your Edamam API credentials:

  ```

  REACT_APP_EDAMAM_API_KEY=your_api_key_here

  REACT_APP_EDAMAM_APP_ID=your_app_id_here

  ```

4. Install the project dependencies:

  ```

  npm install

  ```

5. Start the development server:

  ```

  npm start

  ```

6. Open your web browser and visit http://localhost:3000 to use the Food Recipe App.

Functionality:

The Food Recipe App has the following key functionalities:

1.Fetching All Food Recipes: The app fetches a list of food recipes from the Edamam API when you land on the homepage. You can see the recipe title, a brief description, and an image.

2.View More Recipes: Clicking the "Load More Recipes" button will load additional recipes, allowing you to explore a wider variety of dishes.

3.Recipe Details Page: Clicking on a recipe card will take you to a dedicated Recipe Details page, where you can find more information about the selected recipe, including ingredients and instructions.

4.Search for Recipes: You can use the search bar to find specific recipes. Enter a keyword or ingredient, press "Search," and the app will display recipes related to your query.

Customization:

You can customize the app's appearance and functionality by modifying the React components and Tailwind CSS styles in the project.

Conclusion:

Enjoy exploring and using the ReactJS Food Recipe App! It's a great example of how ReactJS, Tailwind CSS, and external APIs like Edamam can be used to create dynamic and useful web applications. If you have any questions or feedback, please feel free to reach out. Happy cooking!