The World's Food

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

This is a real-time Recipe App made with React, Firebase and Firestore.

Users are able to:

• View the optimal layout for each page depending on their device's screen size
• Search for any food recipes with its own name or product name
• Filter results by meal type, dish type, health preferences, diet preferences, calories, ingridients and time
• See their last selections on the form and recipe results on their next visit
• See the recipe details
• See 404 Error message if they try to go to unexisting part of the website
• Sign up by creating their own account or with their google account
• Get error message if they try to sign up with invalid email or password with under 6 characters
• Sign in with their account on the app or their google account
• Get error message if they try to sign up with invalid email or password
• Do these if they have an account:
  • Save the recipes and see them by their account for every user, on Saved Recipes tab under my account
  • See their last selections on the form,recipe results and saved recipes by their own account on their next visit
  • See their own personal info on the personal info tab under my account
  • Change their password if they want to, on the change password tab under my account
  • Reset their password if they forget it, on forgot password tab under sign in tab

Screenshot

-💻 Desktop-View(Please wait until the videos are uploaded,if not please refresh the page!)

-Part1

desktop-view-part1.mp4

-Part2

desktop-view-part2.mp4

-📱 Mobile-View (Please wait until the videos are uploaded,if not please refresh the page!)

mobile-view.mp4

Links

• Solution URL: click here.
• Live Site URL: click here.

Built with

• HTML5 markup
• CSS custom properties
• Styled Components
• MUI
• React JS
• Context API
• Local Storage
• React Router
• Firebase Authentication
• Firestore
• React Spinners,React Lazy Load
• Dotenv
• Netlify

What I learned

I used the Edamam API as a developer for free and because of it I can`t use the API fully and can only make a call with one filter on diet and health preferences. Firstly, I changed the input types to radio, so with the same name user could choose only one option but the problem is that radio buttons can not be unchecked and I learned that it is not possible to set the states multiple time in a map function.So I had to make my own radio button with check button and set the state one time and lastly. Here is my code:

const handleRadio = (e) => {
  let array = input[e.target.name];

  const health = [
    "alcohol-free",
    "vegan",
    "vegetarian",
    "kidney-friendly",
    "pork-free",
  ];
  const diet = [
    "balanced",
    "high-protein",
    "low-carb",
    "low-fat",
    "low-sodium",
  ];
  if (e.target.checked) {
    array = [];
    array.push(e.target.value);

    const object = {};

    if (health.indexOf(e.target.value) !== -1) {
      health
        .filter((element) => element !== e.target.value)
        .map((element) => (object[element] = false));
      setCheck({ ...check, ...object, [e.target.value]: e.target.checked });
    } else {
      diet
        .filter((element) => element !== e.target.value)
        .map((element) => (object[element] = false));
      setCheck({ ...check, ...object, [e.target.value]: e.target.checked });
    }
  } else {
    array = [];
    setCheck({ ...check, [e.target.value]: false });
  }
  return setInput({ ...input, [e.target.name]: array });
};

I also learned how to useNavigate hook with useParams and use recipe id in a link to make an API call with it, so I can show to recipe details to the user and user can go to that recipe detail every time with the same link (It is not possible if you send the data with state in useNavigate hook.). Additionally, I learned that you have to encode the "#" in a link like this "owl%23$".

  const { id } = useParams();
  const get = async () => {
  const response = await axios(
    `https://api.edamam.com/search?app_id=${process.env.REACT_APP_EDAMAM_APP_ID}&app_key=${process.env.REACT_APP_EDAMAM_APP_KEY}&r=http://www.edamam.com/ontologies/edamam.owl%23${id}`
  );

I also learned how to use Context API, Firebase Authentication, Firestore, React Spinners ,React Lazy Load.

Useful resources

• EDAMAM RECIPE API -I used this API to get recipes.
• Firebase -I used this SDK for user authentication.
• Firestore -I used this NoSQL cloud database to store the users informations.
• REACT SPINNERS by David Hu -I used this package for spinners.
• React Lazy Load Component -I used this Component for image lazy load.

Author

• Muhammed Ubeyde Alpkilic - @aLpSabre