TasteTide is a recipe search app that allows users to search for recipes and save their favorite ones.

• Demo
• Features
• Technologies Used
• Getting Started
• Available Scripts
• How It Works
• Future Improvements
• Challenges and Learnings

You can view a live demo of the project Tastetide.

• Search for recipes by ingredients.
• Save favorite recipes for easy access.
• View detailed information about each recipe.
• Responsive design for optimal viewing on various devices.

• React (for building the UI)
• Context API (for state management)
• Tailwind CSS (for styling)
• Forkify API (for fetching recipe data)

Follow these steps to run the project locally:

Ensure that Node.js and npm are installed on your machine. If not, you can download them from here.

1. Clone the repository:

   git clone https://github.com/Jiteshiyu/TasteTide.git
   cd TasteTide

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to https://localhost:3000 to see the app in action.

• npm run dev: Start the development server.
• npm run build: Build the app for production.
• npm run preview: Preview the production build locally.

The TasteTide app uses an external API to fetch and display recipe data.

1. Fetching Recipe Data: The app send a GET request to the Forkify API, retrieving data such as recipe names, ingredients, and images.
2. Favorite Functionality: Users can add recipes to their favorites and view them on a separate page.
3. Displaying Data: The app shows a list of recipes based on the user's search query and allows for detailed views of each recipe.
4. Search Feature: Users can input ingredients to search for corresponding recipes.

• Add user authentication for personalized experiences.
• Implement a more advanced search functionality (e.g., by dietary restrictions).
• Improve the user interface with additional animations and graphics.
• Add error handling for failed API requests.

• API Integration: Integrating the Forkify API presented challenges in handling asynchronous requests and state management.
• State Management: Utilizing the Context API for global state management helped streamline data flow throughout the app.
• Responsive Design: Ensuring a responsive layout across devices required careful use of Tailwind CSS utilities.

If you liked the project, give it a 🌟 on the repo!

Connect with me: