Appointment Planner Challenge Project (React)

Projects Challenge Projects
86

Hi!
I am happy to share my solution on this react project, it was quite challenging yet exiting to get done. I am also open to receive opinions on my solution, thank you!
https://appointment-planner-sultanby.surge.sh/

87

Hi, this is my solution to the Appointment Planer Project.

I would love to find a partner to do a code review with. Comment below if you would like to be my partner and I will happily review the code for your solution in return

Looking forward :slight_smile:

88

This was a challenging project! I got a little lost in the prop drilling and am hopeful that someone can provide a code review and possibly some suggestions about how to improve that aspect of this project.

I did a couple of small extensions to the project and may continue refining this in the weeks to come.
GitHub
Netlify Live Version

Would love feedback on the prop drilling and also the best way to clear the contact picker when adding a new appointment. My solution feels a little like a workaround rather than the best way to handle.

Thanks!

2 Likes
89

A live demo please !!!

1 Like
90

https://github.com/Jerrence/Appointment-Planner-project-Codecademy

This is Codecademy’s solution. The reason why I posted this is because, I want you to feel better.
I want you to realize that you not the only one who’s felt this way.

Don’t give up, change your career!

Lawrence

1 Like
91

I agree with you.

The steps 8 and 9 are so confusing to me. They are not well explained at all.

92

This is my own project.

Live site: https://appointment-planner-by-edu.netlify.app/
GitHub: https://github.com/after909/Appointment-Planner-Challenge-Project

For the last two steps I have asked a friend because the instructions weren’t clear at all.

I hope you will like it.

1 Like
93

August 2022

I’ve noticed I got a 404 status code error when trying to run Codecademy’s solution on Codecademy, but when running it on Visual Studio Code (VS Code) it was running without a bug!

94

I submitted a get Unstuck submission for something being wrong with the content of this project. this is what I said.

“The instruction for this project is useless. there are 90 comments on the solution Forum that all say they could not have possibly been expected to know how to do this. There are several instances of props or other things that are in the solution code, that are never mentioned in the instruction. Things like “name” being used as an accepted prop in the ContactPicker code, or the getContactNames function in AppointmentForm, or the fact that in the AppointmentPage instruction it says “The four state variables holding the form’s appointment data should each default to an empty string using useState(‘’)” but then in the solution code we see " const [contact, setContact] = useState(
contacts.length > 0 ? contacts[0].name : “”
);”

Please fix this for future students. "

1 Like
95
96

This was definitely a challenge so if anyone needs solution code you can check out mine

97

Same here, just want more people who struggle to see that they are not alone. So far for most of the projects I had to use walkthroughs…

1 Like
98

I used [email protected] and [email protected] See comment in App.js to see the three big changes.
See https://reactrouter.com/en/v6.3.0/upgrading/v5

Here is my code on Github:

props to @atanas.dim. I used his alert idea.

99

I know what you mean. About a third of the way into the Full Stack Engineer course, I realized that doing the step-by-step project was getting me nowhere. Then I decided I would not leave a project without understanding every aspect and recreating it from memory. This approach would greatly slow my current progress, but I hope it will accelerate my progress in the long run.

I go through a process of looking at the project’s folder structure as reflected in the folder structure. I try to understand why each component is there and what it does. When I can see the whole project and understand it from a high-level view, I attempt to program it. Sometimes I have to do the step-by-step once to get there.

Then I put this high-level view down in a file. I use this file to recreate the project from memory. This process is much easier to do using the offline mode. VSCode is much more helpful.

Here is an example of what I did for this project.

React II Challenge Project: Appointment application

The Appointment application is limited to making appointments with
an existing contact. It has functionality for adding contacts and making
appointments. Currently one cannot delete or edit a contact or
appointment.

Implemented as follows:

renders navigation links and provides routing functionality.
The navigation bar has two links (Contacts and Appointment)

The structure of the application consists of
<App /> which renders a navbar at top of page consisting of
nav-links: Contacts and Appointments.

Clicking on Contacts or Appointments in the navbar renders
a form for entering a new contact or new appointment respectively.
Specifically clicking on Contacts renders <ContactPage /> consisting of two items:
1: A <ContactForm /> which renders a form for adding a new contact
2: A list of current contacts (if any) as <TileList /> (see below)

The AppointmentPage does the exact same thing for Appointments
It renders the <AppointmentForm />.

Current contacts or appointments both render a list.
The list will done with one component that can adapt to
whether it is a list of contacts or appointments.

The above will be implemented in two components:

<TileList /> is rendered by <ContactsPage /> or <AppointmentPage />
<TileList /> in turn renders a <Tile /> component for each item in the list

The <ContactPicker /> component is specific to the <AppointmentForm /> component.
Within <AppointmentForm />, the <ContactPicker /> component is rendered.

<ContactPicker /> renders a html <select> element consisting of <option> elements.
The first option is the standard “no contact selected.” Subsequent options
are one each for each contact. Selecting a contact enables one to continue
making an appointment with the selected contact.

100

What’s the point of the useEffect call in the ContactsPage component? You can just check for duplicates like this can’t you?

const isDuplicate = contacts.some(contact => contact.name === currentName); // currentName is the state

if (isDuplicate) {
  alert('That name is already taken. Please choose a new one')
} else {
  addContact(currentName, currentPhone, currentEmail);
};
101

i love when we can have video through those projects! i always go ahead and then i play video to see if i did it correct or no! helped me so many times and i learn this way alot! for me is the best practice

102

Hello! @martyg_london described all my feelings. It is very challenging project without supported video.

103

Hey devsufer - are you still working on this project? I just finished and am looking for a friend for code reviews on the project.

Also happy to help with questions or problems as I completed 90% of project on my own, only had to look up the very last step for Contact Picker.

Let me know if interested to connect and support each other

104

Just finished this project. Looking for someone to do a code review with. In particular, see how others handled the duplicate contact check.

Here is my repo: GitHub - YSquid/react-appointment-planner-challenge: Codecademy appointment planner challenge project

105

Hi! I just saw your email! I completed the project. I’m learning new topics about REDUX. What about you? I completed 67% of front-end developer path. We can help each other in our way) My name is Sasha by the way)