Appointment Planner Challenge Project (React)

I had the same problem. I re did it in VS code on my pc and it all worked. I think the website environment is bugged for this project

I had this problem too. What seemed to work was going into the package.json file and changing the “start” and “build” properties assigned for it to:

“scripts”: {
“start”: “react-scripts --openssl-legacy-provider start”,
“build”: “react-scripts --openssl-legacy-provider build”,

Right away this project seemed super hard to do and I was totally lost with the directions. They seemed vague and very hard to understand. So I broke and looked at the solution and used that as a guide. After doing the project this way, I redid the project on my own without looking at the solution and was able to understand it all. Overall it was quite a difficult project, but I learned a whole lot in the process. At least I hope i did! Hit me up if you’re looking for a partner in the front-end development path for code review and to work together on projects.

Hi everyone,

This was an interesting project to complete, it really help to test my knowledge in react.
Here is my attempt:

Hey Bandito24,

I was also stuck in this project for a while, and yes, looking at the solution code to study and understand does help. I live in Canada, I am 27 and have been working on transitioning to SWE.

I am looking for a partner for the front-end development path for code review and to work together on projects. Please let me know if you are interested in working together.

Oh my god… it’s so hard for me! :scream:

Wow, what a challenging project! Spent one week on it,
I upload my finished project to GitHub. Here is the link:

Hope this maybe helps you guys. Always welcome any questions!

Hi guys,

My project: Appointment Planner Project

Git: GitHub - Aimes13/Appointment-Planner-Project: Off-platform Codecademy challenge project on React
Netflify: https://appointment-creator.netlify.app/

Hi there!

:wave:

Just finished this project, i will appreciate feedback.

Github Link

Live Site Link

Hello, this project hasn’t been so hard compared to previous ones. I struggled a bit with the Contact selection part but everything else was working perfectly. I also implemented a feature that enables the user to save what he types in the form in sessionStorage.

Live Site: https://mateoreactchallenge.netlify.app

Repository: GitHub - Chabulsqu/react-challenge: A classic Contact/Appointment App made for the Codecademy Front-end Engineering Path

I was hoping someone could help explain something to me.

The following is code from the ContactsPage.js file of this project.

Wouldn’t this code for the “effect” cause an infinite loop, bc the dependency array contains the “duplicate” state variable, and the “effect” itself sets the state variable? Thus the effect would be keep being called, bc it is re-assigning/setting a state variable that triggers it’s execution?
OR, does the effect only execute when a variable in it’s dependency array CHANGES VALUE, i.e. is not merely “set” or “re-assigned” which could mean being set or re-assigned to the SAME value it already was (e.g. false or true)?

  useEffect(() => {
    const nameIsDuplicate = () => {
      const found = contacts.find((contact) => contact.name === name);
      if (found !== undefined) {
        return true;
      }
      return false;
    };

    if (nameIsDuplicate()) {
      setDuplicate(true);
    } else {
      setDuplicate(false);
    }
  }, [name, contacts, duplicate]);

Document of React provides words below:

When your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, and then run your setup function with the new values.

So, from my understanding, the flowchart is :

  1. state changed
  2. effect setup function run
  3. re-render components
    That will avoid infinite loop I believe.
1 Like

Thank you for your reply!

To be honest, I still do not understand from your answer, but I will take a look in the documentation. Thanks for pointing me in that direction.

May I ask why you are passing in duplicate into the useEffect dependency array in the first place?
This is how I did my checking.

useEffect(() => {
    if(checkDuplicateName(name)) {
      setDuplicate(true)
    } else {
      setDuplicate(false);
    }
  }, [name])
  

  const checkDuplicateName = () => {
    const contactExists = contacts.filter((contact) => contact.name === name);
    if(contactExists.length > 0) {
      return true;
    } else {
      return false;
    }
  };

“Duplicate” shouldn’t need to be passed into the dependency array.

Hey Daniel,

Thank you for your reply. I completely agree with you! In fact, for my solution, I did not include the “duplicate” variable. But the code I put up is the SOLUTION code to the project, provided by Codecademy.

The Code I implemented for this effect was:

useEffect(() => {
    const contactNames = contacts.map(contact => contact.name);
    if (contactNames.includes(name)) {
      setDuplicate(true);
    } else {
      setDuplicate(false);
    }
  }, [name, contacts])

Oh ok. I just saw the solution provided. I would think that it would cause an infinite loop as well.

My understanding is that the useEffect will run anytime one of the states in the dependency array is changed. Since “duplicate” is in the dependency array, it will run when “duplicate” changes. And since “duplicate” changes inside the useEffect, it would trigger it to run again.

But I could be wrong. If there is anything wrong in my logic, please let me know.

Yes I agree, but the only possible explanation I could think of was what I mentioned in my initial post, that by “change” in variable in the dependency array only means a change it’s VALUE, and if it is re-set/reassigned to the SAME VALUE, then the effect is not called again. If this is the case, then the solution code would not cause an infinite loop.