Created a beautiful recipe app using Spoonacular API. It was fun to make this project as the API is so big and it contains a lot of data. Tried to add a lot of data to the App. In this app, I have implemented a search Button where users can search for their favorite food and get results in a list with the names of the dishes. On clicking a particular dish user will move to the Food Description Page where I have added every single detail about the food including the time taken to make the food, Ingredients and their quantity in the food, Calories, Servings, and a detailed step by step Recipe to make that food.
Key Features Recipe Search: Users can search for their favorite recipes using a search bar. The search functionality dynamically updates the displayed recipes based on the user's input.
Category Filtering: Users can filter recipes by selecting different categories. The categories are displayed as a horizontally scrollable list. The selected category's appearance changes to indicate it is active.
Popular Recipes: A section displaying popular recipes, which likely updates based on user interactions or pre-defined criteria.
Recipe Details: Users can view detailed information about a selected recipe. The details include ingredients, nutritional information, and step-by-step instructions.
Infinite Scrolling: The app supports infinite scrolling, loading more recipes as the user reaches the end of the list. Pagination is handled seamlessly to ensure a smooth user experience.
API Integration: The app integrates with the Spoonacular API to fetch recipe data. API calls are made to retrieve recipe information, search results, and category-specific recipes.
Dynamic UI Updates: The app dynamically updates the UI based on user interactions, such as search input and category selection. State management is used to handle changes and update the UI accordingly.
Error Handling: Basic error handling is implemented to manage network errors and display appropriate messages to the user.
Additional Considerations
Responsive Design: The layout is designed to be responsive and adaptable to different screen sizes.
Styled Components: The app uses consistent styling for various components, ensuring a cohesive look and feel.
User Interaction Feedback: Visual feedback is provided for user interactions, such as changing the appearance of selected categories.
Navigation: The app includes navigation between the home screen (with the recipe list) and the detail screen (with detailed recipe information).
Steps to run the APP in your Device:
*** Download Expo App in your device from PlayStore***
Step 1: Fork the Repository Step 2: Open VS Code or any Compiler Step 3: Go to the target Folder Step 4: Open the terminal Step 5: Install necessary packages( run npm i or yarn ) Step 6: Make a .env file Step 7: Create an account in spoonacular.com and go into to Profile section Step 8: There you will find your API_KEY. Step 9: Copy the API_KEY Step 10: Inside the .env file in your project write "API_KEY = YOUR_API_KEY" Step 11: run npx expo start ( Open the terminal--> go to the exact project folder then run npx expo start) Step 12: scan the QR with your expo app.