Skip to content
Submitted almost 4 years ago

Planets site with Next.js and styled components

accessibility, styled-components, next
Emmilie Estabillo•5,580
@emestabillo
A solution to the Planets fact site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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.

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello, Emmilie Estabillo! 👋

    I'm sorry I'm late to this challenge—I only noticed it just now! 😅 That being said, I'm glad I didn't miss because I was looking forward to seeing another solution from you (and my prediction was right—it's pretty awesome)! 😀 The design of your solution looks great and is on point (you're right—it does look fine without a max-width on extra-large screens 😆) and your code looks really nice, as well! 👍

    Kudos for trying out Next.js! It's an awesome framework that makes using React to build sites sooo much nicer! About mapping more than one route to the same page in Next.js—I don't remember having done that with only Next.js (yet) but this page from StackOverflow might present a possible solution. 🙂

    I agree that working with Next.js's Image component can be a little tricky! I've gotten pretty annoyed before at the weird way the image is wrapped in two divs with their own styles (and they have inline styles, too, I think, which makes changing them super-difficult). For now, I usually just wrap the Image component in a wrapper of my own (yeah, a third wrapper 🤪) and then focus on sizing and positioning that. 🤷‍♂️

    I really like the animation to the stars that you added with Framer Motion! I wish I could help you with your question, but it's been a while since I last used Framer Motion and I've almost forgotten the basic syntax! 🙃 One thing I noticed, however, is that the you're animating the background position property, which generally isn't very performant and is causing a tiny bit of lag on my computer, I believe (but I don't have a great laptop at the moment, anyway, so lots of things make it lag 😅). It might require a bit of extra work, but finding a way to animate the transform property instead to create the animated stars would probably be a good idea, since the transform property is optimized for animations by browsers and animating background-related properties is usually a bit expensive. 🙂

    If I understand your question about styled-components correctly, I think you can do something like this in your styled-components (correct me if I misunderstood):

    const Wrapper = styled.div`
  // styles...
  background: ${(props) => props.name || props.planet && 'var(--color-mercury-main)'};
`

    Anyways, really great job on this project, once again! 👏 I hope that helps a little! 🙂

    And of course—keep coding (and happy coding, too)! 😁

    Marked as helpful
  • Shashi Lo•1,345
    @shashilo

    I'm just going to review the design and not the React code. Here's some feedback:

    • Instead of showing nothing as the homepage, choose a default and show that. Without a default, it makes the user feel like there's an error with the site. • The level of detail you put into the responsiveness is fantastic! • I don't see the benefit of using CSS Grid in the Header, but it looks good. • Instead of using margin's in the Stats_Item, use gap: 0.6875rem on Stats_Line. • For the main nav, I'd expand the click area to the entire header. It will increase the UX and less chances of the user not being able to click on the menu item. • The plant transitions could be better when navigating through overview, structure, and geology.

    Overall, the site works really well. Great job!

    Marked as helpful
  • Account deleted

    @emestabillo and for starting a project what's technique the way you start like did you research some component for example like researching how they did the nav bar anyway, I saw your bio I'm glad your from the Philippines and hope you doing okay.

    p.s I'm not good in english ♥️

  • Account deleted

    My dream was creating an intermediate level or junior level but I'm dumb so I'm only focus to newbie section but I'm getting inspired of your works to be honest and what's your tips for getting better and I'm curious how they make that hard level?

  • rafael tivane•645
    @rafael-the-dev

    Amazing job that you did! Congratulation it has good design and responsivity.

  • P
    Patrick•14,265
    @palgramming

    It looks wonderful!! Very nice Job!! 🌟🌟🌟🌟🌟

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