Skip to content

Welcome to the FoodRecipe application! This project is an interactive and user-friendly web application designed to help culinary enthusiasts discover and bookmark their favorite recipes. Built with React and styled using Tailwind CSS,.

Notifications You must be signed in to change notification settings

HadiAbbasIsOffical/RecipeBookV1-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FoodRecipe Application

Overview

Welcome to the FoodRecipe application! This project is an interactive and user-friendly web application designed to help culinary enthusiasts discover and bookmark their favorite recipes. Built with React and styled using Tailwind CSS, the application fetches data from the Forkify API to display a diverse range of recipes, complete with images and detailed preparation instructions.

FoodRecipe Screenshot

Features

  • Recipe Search: Users can search for any recipe using the search bar. The application fetches and displays relevant recipes from the Forkify API.
  • Recipe Display: Each recipe is presented with an appetizing image, ingredient list, and step-by-step preparation instructions.
  • Favorites: Users can bookmark their favorite recipes for quick access later. The Favorites section stores these recipes for easy retrieval.
  • Interactive Design: The application is designed to be visually appealing and easy to navigate, providing a seamless user experience.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Tailwind CSS: A utility-first CSS framework for styling the application.
  • Forkify API: An external API providing recipe data (https://forkify-api.herokuapp.com).
  • GitHub Pages: For deploying the application.

Installation

To get started with the FoodRecipe application, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/yourusername/foodrecipe.git
    cd foodrecipe
  2. Install Dependencies:

    npm install
  3. Start the Application:

    npm start

    The application will run on http://localhost:3000.

Usage

  1. Search for Recipes:

    • Use the search bar to find recipes by name or ingredient.
    • Click on a recipe to view its details, including the ingredient list and preparation steps.
  2. Bookmark Favorites:

    • Click the "Favorite" button on any recipe to bookmark it.
    • Access your bookmarked recipes from the Favorites section.
  3. Explore Recipes:

    • Browse through various recipes and discover new culinary ideas.

Contributing

We welcome contributions to enhance the functionality and design of the FoodRecipe application. To contribute, please follow these steps:

  1. Fork the Repository: Click the "Fork" button on the top right corner of this repository.
  2. Create a Branch: Create a new branch for your feature or bug fix.
    git checkout -b feature-name
  3. Commit Your Changes: Make your changes and commit them with a descriptive message.
    git commit -m "Add new feature"
  4. Push to the Branch:
    git push origin feature-name
  5. Create a Pull Request: Open a pull request from your branch to the main repository.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any questions or suggestions, feel free to reach out:

Thank you for visiting the FoodRecipe project. Happy cooking!


This README provides a comprehensive overview of the FoodRecipe application, including its features, technologies, installation instructions, and contribution guidelines. The screenshot reference should be updated with the correct path to the image in the repository.

About

Welcome to the FoodRecipe application! This project is an interactive and user-friendly web application designed to help culinary enthusiasts discover and bookmark their favorite recipes. Built with React and styled using Tailwind CSS,.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published