Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Planet Facts with React

Hum Bruno 230

@humbruno

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What a ride! This was my first React project and while there are definitely things to polish up, I am VERY proud of the end-result! I'm also looking forward to revisiting this project in a few months to compare my skills evolution.

The initial proposal of this project was to have a different URL for each planet but I decide to take a different approach to open up scalability (not sure how! new planets would need to appear inside our solar system!)

Instead of hard-coding each page and its contents, I decided to use JSON data containing each planet's information and map through that file using JavaScript/React to render the contents according to the interface actions (navbar clicks, buttons).

I reached the end-result rather quickly but wasn't quite happy with it. I quickly noticed I didn't take advantage of one the biggest selling points of React - components!

Once I had the page fully functional, I started separating my code into different components. Looking back, this is something I should have planned before starting to write code, so that I wouldn't need to backtrack. Definitely a lesson learned for the future!

It does seem like something went wrong with my images folder when deploying the React project to github pages, working on a solution to that! In the meantime, it is built correctly on my personal domain if you're curious: https://planets.brunosantos.dev/

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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