Recipe Finder App

Overview

Recipe Finder is a React-based web application that allows users to search for recipes, view recipe details, and add their favorite recipes to the favorites list. Built with React and styled using Tailwind CSS, the app provides an intuitive and user-friendly interface for discovering and managing recipes.

Screenshots

Home Page

Recipe Details

Favorites

Functionalities

Search Recipes: Users can enter keywords to search for recipes based on ingredients, cuisine, or dish names.
View Recipe Details: Users can click on a recipe to view detailed information, including ingredients, instructions, and nutritional facts.
Add to Favorites: Users can add recipes to their favorites list for quick access later.

Technologies Used

React: Used for building the dynamic user interface and managing the application's state.
Tailwind CSS: Employed for styling the application, providing a modern and responsive design.
API Integration: Utilized a recipe API (Free Meal API) to fetch real-time data for a vast variety of recipes.

Packages Used

animate.css: Version 4.1.1 - Used for adding CSS animations to enhance the user interface.
axios: Version 1.6.7 - A promise-based HTTP client for making API requests within the application.
react: Version 18.2.0 - The core library for building user interfaces with React.
react-dom: Version 18.2.0 - Provides DOM-specific methods used by React.
react-headroom: Version 3.2.1 - A React Component to hide/show your header on scroll.
react-icons: Version 5.0.1 - A set of popular icon libraries for React applications.
react-lazy-load-image-component: Version 1.6.0 - A React component for lazy loading images, optimizing performance.
react-loading-skeleton: Version 3.4.0 - Used for displaying loading skeletons to provide a better user experience during data fetching.
react-router-dom: Version 6.22.1 - Enables navigation and routing in a React application.
react-toastify: [Add version number] - A library for displaying toast notifications in React applications.

Learnings

React State Management: Gained experience in managing state and handling user interactions within a React application.
API Integration: Learned how to fetch and display data from an external API, enhancing the application's functionality.
Responsive Design: Implemented a responsive design using Tailwind CSS for a seamless experience across various devices.

Future Improvements

User Authentication: Implement user authentication to allow users to save their favorite recipes permanently.
Advanced Search Filters: Enhance the search functionality with advanced filters for more precise recipe discovery.
Offline Mode: Implement offline functionality to allow users to access their favorite recipes even without an internet connection.

How to Run the Project Locally

Clone this repository.
Navigate to the project folder.
Run npm install to install dependencies.
Run npm start to start the development server.
Open your browser and visit http://localhost:3000 to view the application.

Feel free to customize the README to better fit your project and provide a comprehensive overview of your Recipe Finder application!

jaitensahu / FoodBlog