Skip to content

An 8-page fact site for planets in our solar system. Built with Nextjs and Styled components

Notifications You must be signed in to change notification settings


Repository files navigation

Frontend Mentor - Planets fact site solution

This is a solution to the Planets fact site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents


The challenge

Users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each planet page and toggle between "Overview", "Internal Structure", and "Surface Geology"


Solution preview for Planets Fact Site challenge


My process

Built with

What I learned

I started this project to practice React, but I soon realized I was writing the same code for every planet, since every page looks the same, and I thought there MUST be a better way. After some research - I found Nextjs. The dynamic paths seem like the solution I was looking for. That also meant a huge refactor of the entire React project.

I relied heavily on the official docs and articles to get it together. I had a lot of questions in development and looking back, I should've asked for help sooner to avoid unnecessary frustration. Nevertheless, quite proud of how the project turned out since it pushed me to add a framework to my arsenal.

Continued development

I now understand why they say it can be difficult to add animations in React. Changes in state and the DOM make it quite tricky. It's something I'd like to delve in a little more going forward.

Useful resources

  • I did an insane amount of googling since I wasn't intending to learn a framework on the fly, but this blogpost from Ali Spittel was the one that got me started.

  • For styled components, I used concepts I've been learning from Josh Comeau's CSS for Javascript Developers course.



  • Thank you to the community at for the support, especially to APG who took the time to look into the bugs on my site :-)


An 8-page fact site for planets in our solar system. Built with Nextjs and Styled components







No releases published


No packages published