Planets site with Next.js and styled components

Solution by
Desktop design screenshot for the Planets fact site coding challenge
This is a solution for...

Planets fact site

View Challenge

Design Comparison



  • 0Accessibility

  • 5HTML

View Report

Emmilie Estabillo's questions for the community

Hi everyone! Happy to be back and submitting another challenge! I started this project to practice React and concepts I’ve been learning from Josh Comeau’s course. 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 - enter Nextjs. The dynamic paths seem like the solution I was looking for. That also meant a huge refactor of the entire project. 🤯🤷🏻‍♀️

My process, struggles, and bugs:

  • The site flickers on mobile so I only enabled the keyframes on desktop.

  • I didn’t try to contain the content into a max-width.I think it still looks ok on a 2k width screen.

  • It was difficult to work around Nextjs’ Image component since the actual <img> tag is nested under two divs with inline-styling. As such, I don’t know for sure if the images are bulletproof. Please let me know if you find any overflow or other quirks with the images.

  • I’m NOT an animator at all lol but I wanted to learn tooling so I tried to work with Framer Motion. It’s a great library but in some instances, it inserts its own transform property which overrides my CSS. I’ve had to modify some of my styles to accommodate, specifically on the images where I was initially using scale to change dimensions. I’d love to know how to also animate the planets when you click on the tabs, aside from animating when the page changes. The library requires a single unique key for the transition, and I’m already passing one for the page change. What’s a different approach to also animate for the tab clicks?

  • How do i make it so that ‘/‘ and ‘/earth’ are both showing the same content? Right now I’m passing the Earth prop to the index page.

  • How do you pass an either-or props to styled components? This code works, but I wonder about bugs.

Please share your thoughts! Had a great time working on the CSS, the navbar design was a new challenge for me. There’s still some more to do like the readme, cleaning up repeating code, and html warnings but I’ve sat on this “finished” project far too long to not get feedback which resulted to a lot of unnecessary frustration on my end. And that is the big takeaway.

Slack logo

Join our Slack community

Join over 75,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!