Submitted

Planets site with Next.js and styled components

#accessibility#styled-components#next
P

@emestabillo

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

5

HTML Issues

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.

Community Feedback

P
Patrick 14,445

@palgramming

Posted

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

1


P

@emestabillo

Posted

@palgramming Thanks Patrick!

0

P

@rafael-the-dev

Posted

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

1


P

@emestabillo

Posted

@rafael-tivane Thanks for taking a look Rafael!

0

P
ApplePieGiraffe 27,145

@ApplePieGiraffe

Posted

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

4


P
ApplePieGiraffe 27,145

@ApplePieGiraffe

Posted

@ApplePieGiraffe

Actually, forget what I said about styled-components—that might not be what you're looking for. Maybe you could store the string for the CSS variable for the color of each planet in the object containing the information for each planet (which is in data.js it looks like), and then import it and use it in your styled-components, like:

// data.js

export const PlanetData = [
  {
    name: 'Mercury',
    // other stuff
    color: 'var(--color-mercury)'
  },
  // etc.
]

And then,

// some component file

import data from '../../somewhere'

const Wrapper = styled.div`
  // styles
  background: ${({name, planet}) => data[name || planet].color};

You might store those colors in a theme of some sort in a project, I guess, but since you don't already have that set up the above should work fine, I think. 😀

0

P
ApplePieGiraffe 27,145

@ApplePieGiraffe

Posted

@ApplePieGiraffe

Actually, I don't even if that's what you're looking for, but maybe—let me know what you think! 😂

1

P

@emestabillo

Posted

@ApplePieGiraffe Hey APG!!! Wow thank you as always for taking the time to review my solution! I enjoyed Nextjs, and it seems to be the perfect tool for the design...but it's probably best to learn it with a team or mentor rather than alone to avoid a lot of tears 😅

Yeah I used the same workaround with the images, by using another container. I don't know why the actual image needs to be inside two other wrappers, and the inline styling was impossible to override without using !important. I think I survived this but I really almost used another way to deal with importing images.

I didn't think about including the colors on the data file. That's awesome advice! Probably would've made my life easier.

As for animations...I didn't know what I was doing haha. This is something I'd like to improve but I know it's easier said than done. I have to work on both my technique and creativity 😄

Appreciate all the links you posted here. I'd be reviewing them for the next round of rewrite. Thanks so much and yes, I'll be happily coding! lol

1

P
ApplePieGiraffe 27,145

@ApplePieGiraffe

Posted

@emestabillo

Awesome! 👍 So glad to be of a little help! 😀

You're doing really well—already looking forward to your next one! 😆

1

Shashi Lo 1,325

@shashilo

Posted

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

1


P

@emestabillo

Posted

@shashilo I wish you had caught this project at the time of submission lol. I've been making edits the last few days because of FOUC and the comments above, so now instead of showing Earth as it did, there's nothing. Funny I actually gave the same exact comment here lol.

Here's a "working" deployment from an old branch.

I've been waiting for someone to notice the grid on the header lol. Keen eye as always! I changed the DOM order so that the h1 comes first, instead of starting with the tabs on mobile. I was going to use grid for larger screens, so might as well start with grid on mobile.

I didn't know how to add transitions to the tabs, it's one of my questions above. Had to choose between that and animating the planets with page change. I can use only one id for the images. If you have any references to address it with Framer Motion, that would be great!

I've been holding out using gap with flex because it doesn't always work with old phones...which is what I have lol. I will go with it moving forward.

Thank you so much for taking a look! So happy you're back!!!! 😃🙌🏼

0

Give some feedback to @emestabillo about their solution...

Slack logo

Join our Slack community

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