Skip to content

The recipe app lets users search for recipes by ingredients and navigate between the homepage, favorites, and recipe details.

Notifications You must be signed in to change notification settings

mramha/Recipe-Finder-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Recipe Finder App🥙🥗🍟

Overview:

  • The Recipe Finder App is a React-based web application that allows users to search for recipes based on ingredients, view detailed information about specific recipes, and manage a list of favorite recipes. The application leverages the Spoonacular API to fetch recipe data.

Technologies and Languages Used:

  • Programming Languages => JavaScript.
  • Libraries and Frameworks => React, React Router, Axios.
  • API => Spoonacular API
  • Markup and Styling => HTML, CSS, Bootstrap.

Features:

  • Recipe Search by Ingredients: Users can input ingredients they have on hand and receive a list of recipes that include those ingredients.
  • Recipe Details: Users can view detailed information about each recipe, including ingredients, instructions, and a summary.
  • Favorites Management: Users can save their favorite recipes for easy access later.
  • Dynamic Navigation: The app features a navigation bar for easy access to different sections, including the home page and favorites.
  • Responsive Design: The layout is responsive, ensuring a good user experience on both desktop and mobile devices.

Functionality:

  • App Component: The root component that sets up the router and renders the navigation bar and main content.
  • Home Component: The landing page where users can search for recipes by ingredients and view suggested recipes.
  • RecipeDetails Component: Displays detailed information about a selected recipe, including ingredients and instructions.
  • Favorite Component: Displays a list of the user's favorite recipes.

Installation Steps:

  1. Clone the Repository: Clone the project repository to your local machine using Git.
  2. Navigate to the Project Directory: Move into the project directory.
  3. Install Dependencies: Install the necessary dependencies using npm.
  4. Set Up Environment Variables: Create a .env file in the root of the project and add your Spoonacular API key.
  5. Run the App: Start the development server.

About

The recipe app lets users search for recipes by ingredients and navigate between the homepage, favorites, and recipe details.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published