Skip to content
Submitted over 1 year ago

Space tourism website - REACT JSX CSS

BigDaddyFlo•570
@FloRiouffreyt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I spent so much time on this one! I decided to try and code it with React and React Router, and it was very difficult. But I learned a lot and it was a great exercise. I still have a problem, you cannot refresh the pages, but it seems to be a problem between Github pages and React "BrowserRouter" method. I followed a tutorial with a 404 custom page that worked for everyone but me, it seems. I gave up trying to fix this, sorry... All around, very difficult, would have been muuuuch easier with vanilla JS HTML and CSS, but it was a good learning experience. I hope it works well!

Community feedback

  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    when i deployed my first site on vercel, i had the same issue, getting an error on refresh, the issue is that react is a client side library and all the routes are being fetched from the client, so when you first visit a route for the first time, it loads it as it is loaded by the client, but when you refresh, the browser tries to fetch it from server but finds no such routes, so it throws a 404. To solve it on vercel, we have to set it up in the vercel.json file such that no matter which route we are on, it serves only the index.html. Remember that is the only page in the application, no wonder its a single page app, so you have to find out how to do it on github pages. Hope that makes sense and hopt you go find out and not leave that way.

    Marked as helpful
    1
  • Carl Pericles•400
    @CarlPericles18Posted over 1 year ago

    Good project, it looks great. Same boat here, though I have not done this project yet, but for other projects I have tried when refresh I get an error. I tried fixing it too but could not find anything. If you do get anything please share 🥲. Other than that the project looks good and ver responsive. Nice work.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord