Appointment Planner Challenge Project (React)

Congratulations on completing your project! :tada:

Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.

This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines

How do I share my own solutions?

  • If you completed the project off-platform, you can upload your project to your own GitHub and share the public link on the relevant project topic.
  • If you completed the project in the Codecademy learning environment, use the share code link at the bottom of your code editor to create a gist , and then share that link here.

Do I really need to get set up on GitHub?

Yes! Both of these sharing methods require you to get set up on GitHub and trust us, it’s worth your time. Here’s why:

  1. Once you have your project on GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
  2. It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.

Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub .

Best practices for asking questions about the sample solution

  • Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.

Ok, so another fail here for me - started off ok, then just hit a brick wall - I think I could stare at this for days and not get an end result.

So I looked at the solution - manged to get my head around most of it - although I would never have got there on my own…

Trouble is - I copied and pasted all of the solution files into the platform to see the app in motion - but it didn’t work properly! - kept getting 404 error messages and the form(s) reset when submitted, and I couldn’t get any contacts/appointments to show…

Is there a reason why there are no replies to this thread yet - is it a new addition to the syllabus or did everyone just skip it??

cheers
Marty (disheartend - but I’ll get there in the end…)

2 Likes

Hey @martyg_london , happy to help you out here:

  • When you downloaded the solution files, there should have been two folders - on-platform/ and off-platform/. Double check that you only copied in the files from the on-platform/ folder as the solution will be slightly different from the off-platform/ version.
  • Which aspects of the solution code were most confusing to you? Maybe next time we can include some explanation file to help illuminate some of the trickier bits.
  • The URL bar in the browser window doesn’t work quite as expected at the moment so if you try refreshing the page or navigating directly to https://localhost/contacts you will get a 404. Instead, just navigate to https://localhost/ and use the in-app Contacts and Appointments buttons to get around the app (note: the URL bar might always show the /contacts page but the UI should change). Sorry about this issue! We’re trying to fix it ASAP.
  • It sounds like you have the UI showing up (since you can see the forms and submit them). Why the forms aren’t working after you submit sounds like a trickier bug for me to figure out without more info. Could you share me a gist of your code? Let me know if you need help figuring out how to do that!
  • This challenge project was added to the syllabus only a few days ago and it looks like you are the first to post about it! Thanks for getting this thread started!
1 Like

Hi @bspexspex thanks for replying.

By way of feedback only:
It was the on-platform files I copied, and it was those that were not adding Contacts or Appointments correctly - they just cleared the form and didn’t add anything when ‘Add Contact’ was clicked.

The Taks were lengthy and very confusing, especially when mentioning TILELIST and CONTACTPICKER, which weren’t explained prior.

The supplied code uses ROUTE and NAVLINKS wich hadn’t been used either up to that point, this confused me.

Maybe a working example would have helped, so at least I knew what the finished product should look like.

I would like to have had a few more lessons to feel confident to get someway further on this project.

Like I say - maybe this is just the level I am at (or not at!) and I would be interested to hear how everyone else gets on. I was feeling quite deflated after attempting this - especially after I found the prior lessons ok (Copycat project was no problem for example). I’ll repeat it at some point and see how that goes.

Personally I found this Planner project a BIG step up and was deflated after failing this . but I’ve since cracked on, and the next Redux Road project, I got through no problems! I might also need to add that I am a beginner… so the learning continues…

Happy days
Mary

Hi all,

My project: Appointment Planner Challenge - React Routing:

Git: https://github.com/Firefly08/ReactAppointmentChallenge.git
Netflify: https://appointment-planner-challenge.netlify.app/

Hi All
My project : Appointment planner

Github link : GitHub - asmafarhat2006/routing
(dont know why i didnt set the name to appointment planner)

Hi there,

Please help, I’m stuck.
I try to add a contact but I keep getting this error message:

’ Objects are not valid as a React child (found: object with keys {name, phone, email}). If you meant to render a collection of children, use an array instead’

I’m using the function that is in the solution:

const addContact = (name, phone, email) => {
setContacts([…contacts, { name: name, phone: phone, email: email, },]);
};

and I’m calling it like this:

addContact(name, phone, email);

What’s wrong with this?

Thanks!