Planets site with Next.js and styled components

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @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

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @ApplePieGiraffe

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

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  @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

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @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,345

  @shashiloPosted over 3 years ago

  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

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  @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
• 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 ♥️

  1

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 3 years ago

  @troy03 It's ok, nagta Tagalog ako :-) You can reach me via Slack or Twitter, links are in my FEM profile if you wanted to talk more about research and project setup. Hope you're doing ok as well!

  1
• 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?

  1

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 3 years ago

  @troy03 Hey Troy, thanks for checking them out! I wouldn't disregard the newbie challenges. I've tried them myself and they were actually harder than I expected lol! Practice is the only thing that would level you up so I highly encourage you to keep doing the projects on the platform. Let me know if I can help out with your journey :-)

  1
• 

  rafael tivane•645

  @rafael-the-devPosted over 3 years ago

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

  1

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  @rafael-tivane Thanks for taking a look Rafael!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

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

  1

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  @palgramming Thanks Patrick!

  0