Submitted 2 months ago

Planet Facts Site with ReactJS and Bootstrap

#bootstrap#react#react-router#vite

Trista Lanette Pollard• 555

@tlanettepollard

Preview site View code

This is a solution for...

Planets fact site

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud that I finally learned how to use data from a json file to populate information for each planet when the navigation links and planet buttons are clicked. (Yay Me!)

I am also proud that I learned how to override Bootstrap default styles within my SCSS files. That took some trial and error, but I was able to get the colors set for each planet.

What challenges did you encounter, and how did you overcome them?

I'm still having difficulty with designating the page for Mercury as the Home page while using React Router. I want users to see that page if they refresh after viewing another planet's page.

What specific areas of your project would you like help with?

I would like some help with setting the home page to Mercury while using React Router. I know the solution is out there.

Community feedback

markus• 1,430

@markuslewin

Posted 2 months ago

Maybe I'm misunderstanding what you're trying to achieve, but wouldn't that defeat the purpose of having a router? Don't I want to see the page for Jupiter when I browse to /jupiter? I think it works as expected!

Trista Lanette Pollard• 555

@tlanettepollard

Posted 2 months ago

@markuslewin I was hoping to have the page refresh to the home page, Mercury, regardless of the page you are on. But now that you have said this out loud to me, I realize that isn't necessary. It should just refresh to the page you are on. I had seen an example of where when the app was refreshed it would go to a specific home page no matter what page you were on.

Please log in to post a comment

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