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

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

   npm install

   npm start

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 (                        <route path="/" element={} />        <route path="/trending" element={} />        <route path="/new-recipe" element={} />        <route path="/new-recipe" element={} />        <route path="/recipe/:id" element={} />        <route path="/about" element={} />        <route path="/contact" element={} />        <route path="/favorites" element={} />         
   
made with ❤️ by abhishek gurjar
   
    

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;

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;

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;

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;

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;

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;

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;

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;