Introduction

In this blog, we'll be building a Recipe Finder Website using React. This app allows users to search for their favorite recipes, view trending or new recipes, and save their favorite ones. We will leverage the Edamam API to fetch real-time recipe data and display it dynamically on the website.

Project Overview

The Recipe Finder allows users to:

• Search for recipes by name.
• View trending and newly added recipes.
• View detailed information about individual recipes.
• Add recipes to a favorites list and persist the data using localStorage.

Features

• Search Functionality: Users can search for recipes by entering a query.
• Trending Recipes: Displays currently trending recipes from the API.
• New Recipes: Displays the latest recipes from the API.
• Recipe Detail: Displays detailed information about a selected recipe.
• Favorites: Allows users to add recipes to a favorites list, which is saved locally.

Technologies Used

• React: For building the user interface.
• React Router: For navigation between different pages.
• Edamam API: For fetching recipes.
• CSS: For styling the application.

Project Structure

src/
│
├── components/
│   └── Navbar.js
│
├── pages/
│   ├── Home.js
│   ├── About.js
│   ├── Trending.js
│   ├── NewRecipe.js
│   ├── RecipeDetail.js
│   ├── Contact.js
│   └── Favorites.js
│
├── App.js
├── index.js
├── App.css
└── index.css

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/abhishekgurjar-in/recipe-finder.git
   cd recipe-finder

1. Install the dependencies:

   npm install

1. Start the React app:

   npm start

1. Obtain your Edamam API credentials (API ID and API Key) from the Edamam website.

2. Add your API credentials inside the pages where API calls are made, such as Home.js, Trending.js, NewRecipe.js, and RecipeDetail.js.

Usage

App.js

import React from "react";
import Navbar from "./components/Navbar";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Trending from "./pages/Trending";
import NewRecipe from "./pages/NewRecipe";
import RecipeDetail from "./pages/RecipeDetail";
import Contact from "./pages/Contact";
import Favorites from "./pages/Favorites";
const App = () => {
  return (
    
      
      
        } />
        } />
        } />
        } />
        } />
        } />
        } />
        } />
      
   

   
Made with ❤️ by Abhishek Gurjar
   
    >
  );
};

export default App;

Home.js

This is the main page where users can search for recipes using the Edamam API.

import React, { useState, useRef, useEffect } from "react";
import { IoSearch } from "react-icons/io5";
import { Link } from "react-router-dom";


const Home = () => {
  const [query, setQuery] = useState("");
  const [recipe, setRecipe] = useState([]);
  const recipeSectionRef = useRef(null);

  const API_ID = "2cbb7807";
  const API_KEY = "17222f5be3577d4980d6ee3bb57e9f00";

  const getRecipe = async () => {
    if (!query) return; // Add a check to ensure the query is not empty
    const response = await fetch(
      `https://api.edamam.com/search?q=${query}&app_id=${API_ID}&app_key=${API_KEY}`
    );
    const data = await response.json();
    setRecipe(data.hits);
    console.log(data.hits);
  };

  // Use useEffect to detect changes in the recipe state and scroll to the recipe section
  useEffect(() => {
    if (recipe.length > 0 && recipeSectionRef.current) {
      recipeSectionRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [recipe]);

  // Handle key down event to trigger getRecipe on Enter key press
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      getRecipe();
    }
  };

  return (
    

      

        

          
Find your Favourite Recipe
        
        

          
             setQuery(e.target.value)}
              onKeyDown={handleKeyDown} // Add the onKeyDown event handler
            />
          
          
        
      
      

        {recipe.map((item, index) => (
          

            
            
{item.recipe.label}
            
              View Recipe
            
          
        ))}
      
    
  );
};

export default Home;

Trending.js

This page fetches and displays trending recipes.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

const Trending = () => {
  const [trendingRecipes, setTrendingRecipes] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const API_ID = "2cbb7807";
  const API_KEY = "17222f5be3577d4980d6ee3bb57e9f00";

  useEffect(() => {
    const fetchTrendingRecipes = async () => {
      try {
        const response = await fetch(
          `https://api.edamam.com/api/recipes/v2?type=public&q=trending&app_id=${API_ID}&app_key=${API_KEY}`
        );
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
        setTrendingRecipes(data.hits);
        setLoading(false);
      } catch (error) {
        setError("Failed to fetch trending recipes");
        setLoading(false);
      }
    };

    fetchTrendingRecipes();
  }, []);

  if (loading)
    return (
      

        

      
    );
  if (error) return 
{error}
;

  return (
    

      

        

          
Trending Recipes
        
      

      

        {trendingRecipes.map((item, index) => (
          

            
            
{item.recipe.label}
            
              View Recipe
            
          
        ))}
      
    
  );
};

export default Trending;

NewRecipe.js

This page fetches NewRecipe and displays New Recipes.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

const NewRecipe = () => {
  const [newRecipes, setNewRecipes] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const API_ID = "2cbb7807";
  const API_KEY = "17222f5be3577d4980d6ee3bb57e9f00";

  useEffect(() => {
    const fetchNewRecipes = async () => {
      try {
        const response = await fetch(
          `https://api.edamam.com/api/recipes/v2?type=public&q=new&app_id=${API_ID}&app_key=${API_KEY}`
        );
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
        setNewRecipes(data.hits);
        setLoading(false);
      } catch (error) {
        setError("Failed to fetch new recipes");
        setLoading(false);
      }
    };

    fetchNewRecipes();
  }, []);

  if (loading)
    return (
      

        

      
    );
  if (error) return 
{error}
;

  return (
    

      

        

          
New Recipes
        
      

      

        {newRecipes.map((item, index) => (
          

            
            
{item.recipe.label}
            
              View Recipe
            
          
        ))}
      
    
  );
};

export default NewRecipe;

Home.js

This page fetches and displays Home page and serached recipe.

import React, { useState, useRef, useEffect } from "react";
import { IoSearch } from "react-icons/io5";
import { Link } from "react-router-dom";


const Home = () => {
  const [query, setQuery] = useState("");
  const [recipe, setRecipe] = useState([]);
  const recipeSectionRef = useRef(null);

  const API_ID = "2cbb7807";
  const API_KEY = "17222f5be3577d4980d6ee3bb57e9f00";

  const getRecipe = async () => {
    if (!query) return; // Add a check to ensure the query is not empty
    const response = await fetch(
      `https://api.edamam.com/search?q=${query}&app_id=${API_ID}&app_key=${API_KEY}`
    );
    const data = await response.json();
    setRecipe(data.hits);
    console.log(data.hits);
  };

  // Use useEffect to detect changes in the recipe state and scroll to the recipe section
  useEffect(() => {
    if (recipe.length > 0 && recipeSectionRef.current) {
      recipeSectionRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [recipe]);

  // Handle key down event to trigger getRecipe on Enter key press
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      getRecipe();
    }
  };

  return (
    

      

        

          
Find your Favourite Recipe
        
        

          
             setQuery(e.target.value)}
              onKeyDown={handleKeyDown} // Add the onKeyDown event handler
            />
          
          
        
      
      

        {recipe.map((item, index) => (
          

            
            
{item.recipe.label}
            
              View Recipe
            
          
        ))}
      
    
  );
};

export default Home;

Favorites.js

This page displays Favorites recipes.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

const Favorites = () => {
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    const savedFavorites = JSON.parse(localStorage.getItem("favorites")) || [];
    setFavorites(savedFavorites);
  }, []);

  if (favorites.length === 0) {
    return 
No favorite recipes found.
;
  }

  return (
    

      

        
Favorite Recipes
      

      

        {favorites.map((recipe) => (
          

            
            
{recipe.label}
            
              View Recipe
            
          
        ))}
      
    
  );
};

export default Favorites;

RecipeDetail.js

This page displays of the recipes.

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const RecipeDetail = () => {
  const { id } = useParams(); // Use React Router to get the recipe ID from the URL
  const [recipe, setRecipe] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [favorites, setFavorites] = useState([]);

  const API_ID = "2cbb7807";
  const API_KEY = "17222f5be3577d4980d6ee3bb57e9f00";

  useEffect(() => {
    const fetchRecipeDetail = async () => {
      try {
        const response = await fetch(
          `https://api.edamam.com/api/recipes/v2/${id}?type=public&app_id=${API_ID}&app_key=${API_KEY}`
        );
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
        setRecipe(data.recipe);
        setLoading(false);
      } catch (error) {
        setError("Failed to fetch recipe details");
        setLoading(false);
      }
    };

    fetchRecipeDetail();
  }, [id]);

  useEffect(() => {
    const savedFavorites = JSON.parse(localStorage.getItem("favorites")) || [];
    setFavorites(savedFavorites);
  }, []);

  const addToFavorites = () => {
    const updatedFavorites = [...favorites, recipe];
    setFavorites(updatedFavorites);
    localStorage.setItem("favorites", JSON.stringify(updatedFavorites));
  };

  const removeFromFavorites = () => {
    const updatedFavorites = favorites.filter(
      (fav) => fav.uri !== recipe.uri
    );
    setFavorites(updatedFavorites);
    localStorage.setItem("favorites", JSON.stringify(updatedFavorites));
  };

  const isFavorite = favorites.some((fav) => fav.uri === recipe?.uri);

  if (loading)
    return (
      

        

      
    );
  if (error) return 
{error}
;

  return (
    

      {recipe && (
        
        

          
{recipe.label}
          
Ingredients:
          

            {recipe.ingredientLines.map((ingredient, index) => (
              
{ingredient}
            ))}
          
          
Instructions:
          {/* Note: Edamam API doesn't provide instructions directly. You might need to link to the original recipe URL */}
          

            For detailed instructions, please visit the{" "} 
            
              Recipe Instruction
            

          
          {isFavorite ? (
            Remove from Favorites
          ) : (
            Add to Favorites
          )}
        
        

        
        
        >
      )}
    

  );
};

export default RecipeDetail;

Contact.js

This page displays Contact page.

import React, { useState } from 'react';

const Contact = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [showPopup, setShowPopup] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Prepare the contact details object
    const contactDetails = { name, email, message };

    // Save contact details to local storage
    const savedContacts = JSON.parse(localStorage.getItem('contacts')) || [];
    savedContacts.push(contactDetails);
    localStorage.setItem('contacts', JSON.stringify(savedContacts));

    // Log the form data
    console.log('Form submitted:', contactDetails);

    // Clear form fields
    setName('');
    setEmail('');
    setMessage('');

    // Show popup
    setShowPopup(true);
  };

  const closePopup = () => {
    setShowPopup(false);
  };

  return (
    

      
Contact Us
      

        

          Name:
           setName(e.target.value)}
            required
          />
        
        

          Email:
           setEmail(e.target.value)}
            required
          />
        
        

          Message:
           setMessage(e.target.value)}
            required
          >
        
        Submit
      

      {showPopup && (
        

          

            
Thank you!
            
Your message has been submitted successfully.
            Close
          
        
      )}
    
  );
};

export default Contact;

About.js

This page displays About Page.

import React from 'react';

const About = () => {
  return (
    

      

        
About Us
        

          Welcome to Recipe Finder, your go-to place for discovering delicious recipes from around the world!
        
        

          Our platform allows you to search for recipes based on your ingredients or dietary preferences. Whether you're looking for a quick meal, a healthy option, or a dish to impress your friends, we have something for everyone.
        
        

          We use the Edamam API to provide you with a vast database of recipes. You can easily find new recipes, view detailed instructions, and explore new culinary ideas.
        
        

          Features:
          

            
Search for recipes by ingredient, cuisine, or dietary restriction.
            
Browse new and trending recipes.
            
View detailed recipe instructions and ingredient lists.
            
Save your favorite recipes for quick access.
          
        
        

          Our mission is to make cooking enjoyable and accessible. We believe that everyone should have the tools to cook great meals at home.
        
      
    
  );
};

export default About;

Live Demo

You can view the live demo of the project here.

Conclusion

The Recipe Finder Website is a powerful tool for anyone looking to discover new and trending recipes. By leveraging React for the front end and the Edamam API for data, we can provide a seamless user experience. You can further customize this project by adding features such as pagination, user authentication, or even more detailed filtering options.

Feel free to experiment with the project and make it your own!

Credits

• API: Edamam
• Icons: React Icons

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.