This project is a React application that integrates with the Spoonacular Recipe API to display recipes and their details. Users can browse through a list of recipes, view details of each recipe, and navigate seamlessly between different pages of the application.
Netlify Deployed Link 🔴 : https://avez-wobot.netlify.app/
-
API Integration: The app uses the Spoonacular Recipe API to fetch recipe data.
-
Routing: Implements React Router for navigation, allowing for a multi-page application with distinct routes:
- Home: Displays a list of recipes with their names and brief descriptions.
- Recipe Details: Shows detailed information about a selected recipe, including name, ingredients, instructions, and an image.
-
Homepage: Presents a list of recipes with names and brief descriptions. Clicking on a recipe navigates the user to its details page.
-
Recipe Details Page: Dedicated page showing comprehensive information about a selected recipe.
-
API Call for Recipe Details: Upon clicking a recipe, the app fetches detailed recipe information from the API and displays it on the Recipe Details page.
-
Navigation: Includes a navigation bar for easy movement between the homepage and recipe details page.
-
Error Handling: Implements robust error handling for scenarios like invalid API responses or network errors, displaying user-friendly messages to enhance the user experience.
- Search Functionality: Allows users to search for recipes by name or ingredients.
- User Authentication: Enables users to save their favorite recipes by implementing user authentication.
Project Setup
- Clone Repository:
git clone https://github.com/avezqureshi14/wobot.git - Install Dependencies:
npm install - Run Development Server:
npm start