Welcome to the Recipedia, a simple and intuitive web application built with React, React Router DOM, Framer motion and Tailwind CSS. This app allows users to search for and explore a wide variety of food recipes using the TheMealDB API. Additionally, users can save their favorite recipes to local storage for easy access later.
- Search Recipes: Search for recipes by name or keyword.
- Explore Categories: Browse recipes by categories such as Beef, Chicken, Dessert, etc.
- Recipe Details: View detailed information about each recipe, including ingredients, instructions, and images.
- Save Favorites: Save your favorite recipes to local storage for quick access.
- Responsive Design: The app is fully responsive and works seamlessly on all devices.
- React: A JavaScript library for building user interfaces.
- React Router DOM: For handling routing and navigation within the app.
- Tailwind CSS: A utility-first CSS framework for styling the app.
- TheMealDB API: Provides a vast collection of recipes and related data.
- Local Storage: Used to save and retrieve favorite recipes.
Here are my plans for further development and improvements to the app:
-
Add Toast Notifications : Implement toast notifications to provide feedback when a recipe is added or removed from favorites. This can be done using libraries like React Toastify.
-
Infinite Scroll: Implement infinite scroll using the Intersection Observer API to load more recipes as the user scrolls down the page. This will improve the user experience by eliminating the need for pagination.
-
UI Enhancements: Add more UI components and animations to make the app more visually appealing. Use libraries like Framer Motion for animations.
-
Performance Optimization: Use useMemo & useCallback in the context to optimize performance by memoizing expensive calculations and preventing unnecessary re-renders.
Check out the live app deployed on vercel.
Enjoy exploring and saving delicious recipes with the Recipedia! 🍴