Appointment Planner Challenge Project (React)

Yeah, absolutely. From tackling some easy tasks and remembering basic syntax and rules, to dealing with the project on your own, there’s a lot to do. I mean, it’s literally impossible to do everything without prior experience in solving this kind of project. Unfortunately, there’s no walkthrough video to help me out. I enjoyed the course before, but now the React Router unit is outdated and this project seems unsolvable.

Same issue and, I’ve got to say, I’ve had similar problems with near enough every single starter code provided throughout everything since React Router in the Full Stack course - nothing has worked out of the box in any way recognisable to what the lesson describes, and it’s only through my own reading that I have kind of worked out (maybe?) that it’s because everything provided has had sections that are hopelessly outdated and are now irrelevant

That includes the “updated for 2023” React Router 6 lesson, which for me was still non-functional out of the box and still seemed to be talking about terms that weren’t in anything I’d independently found on 6

Feels like there’s a big gap in my understanding starting to form

Hi there,

Here’s my solution:

Github
Netlify

Keep it up!

How do I deploy my solution to Netlify? I get an Error ‘page not found’. Netlify suggests that index.html not being at the root is the problem, which is true, index.html is in the public folder. But how do I solve this without changing the entire DOM tree? because doing so would be difficult because of all the paths that would need to be changed.

Hello,

for this project I have:

  • changed styling just to make it a bit interesting :nail_care:
  • used HashRouter instead of BrowserRouter to make navigation between pages work on Github Pages :compass:
  • added a visual hint when the name typed into new contact form already exists :eyes:
  • added one sample contact and one sample appointment to make the app more engaging :date:
  • used different locale in toLocaleDateString inside the appointment form just to understand better the logic of the code from the downloaded boilerplate :mag_right:

Live: Github Pages
Code: Github Repo

1 Like

I definitely love that country code selection and delete options :zap::zap::zap:

Hi guys, I have the same issue… anyone found a way around this yet?

This was a tough one but here’s a working version. I admit I had to go back to the React docs because my understanding of hooks was just too lacking. The code people put up on this thread was also extremely helpful in those many moments I got stuck - so I really appreciate people taking the time to put it up here! Projects like these really help solidify knowledge through practice, so it’s been an overall good experience. Cheers :+1:

As with others here, I could not get the downloaded package to work out of the box, and I encountered a bug on the platform where the page wouldn’t refresh but it wouldn’t give me an error message so I couldn’t tell what was wrong. Therefore, I copy-pasted the source code files into a fresh installation of React locally. The source code I copied used an older React router, which I skipped learning since I learned the newer version, so I cobbled together a new routing method using what I learned from the project about React routing v6. I would appreciate feedback on this part as I fear it may look a bit messy (see App.js in src directory). Also, since I hosted this on gh-pages, the browser router had to be switched out with a hash router.

:page_facing_up: Source code on Github
:zap: Live link

Hi. Could you please help us with walkthrough videos like in the other projects?
Thanks.

Greetings everyone!

I’m thrilled to share my latest project with you, which has given me a new perspective on working with React. I’m always eager to learn new things, and this project has taught me a lot!

If you’re interested in checking it out, you can find a live version of the project here: Live and the source code can be accessed here: Source Code

Thank you for taking the time to check it out!