Skip to content
Submitted almost 4 years ago

Planets - ReactJS, Styled-Components, Framer Motion, Webpack

tediko•6,700
@tediko
A solution to the Planets fact site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello👋!

This is my second project build with React JS. This time I had the opportunity to try styled-components. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the route change.

  • I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2)
  • I tried to write a project using styled-components library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions. Read More
  • The first time I used Prettier. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. Read More
  • To animate the pages transitions and mobile-menu animations I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations. Read More
  • The solar system was recreated from this great Codepen created by Malik Dellidj. It's nothing complicated, it's all based on div rotation with pseudo-elements inside that contains the images of the planets. I recommend you try it yourself!
  • Added counter() function for my pseudo-elements content in Tab button. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
  • Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

Additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hi, tediko! 👋

    This looks awesome! 🤩 I love the extra-page and animations that you added and everything else looks really, really good! 👏

    Your code looks nice, as well! 😀 I sometimes feel like my styles are all-over-the-place when I finally finish a project, too, but I think you've used styled-components rather well! 👍

    A few tiny suggestions I have are,

    • Setting the root font-size of the document to a percentage (rather than a fixed value) so that users can scale the design of your app up/down by changing the default font-size of their browser (which is good for accessibility).
    • Probably using rem rather than px in your media queries (so that the breakpoints in your styles will scale with any changes made to the root font-size of the document and consequently, with the rest of the design).
    • Using unit-less values for line-height, such as 1.5 or 1.75, etc. (which is often considered a good practice because then the line-height will be proportional to the given font-size).
    • Perhaps skipping ItemController.js for the header navigation and just putting that code in NavDesktop.js instead. They are just both pretty small components so it might be a little easier for them to be together. But just a thought! 😅

    But those are like teeny-tiny things because I can't find other stuff to suggest! 😆

    Kontynuuj kodowanie (i szczęśliwego kodowania)! 😁

    (Mam nadzieję, że tłumaczenie Google nie przetłumaczyło tego wyrażenia niepoprawnie!) 🙏

    Marked as helpful
  • Anna Leigh•5,135
    @brasspetals

    Finally getting around to submitting my comment for this. Absolutely awesome job, tediko!!! 🎉🙌 The homepage/intro is absolutely spectacular (one could say, out of this world 😉). Making the orbiting planets into links for the planet pages, and also adding the orbit color change on hover is great! The whole UX is just lovely, and it responds really well.

    Unfortunately I don’t have much constructive feedback on the React front, but I did find some very small design elements that could be tweaked:

    • Saturn is getting a bit cut off in the homepage animation. To fix this, change the Saturn ::before width to about 55px, and then add the following:
    background-size: contain;
background-repeat: no-repeat;
background-position: center;
    • The tab numbers (for overview/internal structure/surface geology) on desktop and larger medium styles are actually a transparent white, rather than a gray. That way when the tabs are selected/active, the color shows through a bit. Switching from the gray to rgba(255, 255, 255, 0.5) should fix it.
    Marked as helpful
  • P
    Patrick•14,265
    @palgramming

    🌟🌟🌟🌟🌟 Wow really really nice @tediko

    You did a super wonderful job.... The one thing and I hate to mention it but will that I found lacking was on the wonderful solar system animation that you could not click one of the animated planets to open its page of information

    Great Job 🌠🌠🌠🌠🌠

    Marked as helpful
  • Akasha•5
    @AkashaRojee

    Wow, this looks amazing!

    I love the idea of the animated solar system. React is new to me, but I like the code structure, and I find the usage of components interesting.

    Definitely bookmarking this and going through the code again to learn from this.

    Well done on the creativity!

  • Grace•32,130
    @grace-snow

    Wow, this looks amazing well done! I haven't looked at the code, but the overall look and feel of it is great 👏

    The only small design thing I notice is the shade of blue in the background isn't as vibrant as the design. I'd want to tweak that I think

    That's all from me today. I look forward to looking at the code tomorrow (reminder is set!!)

  • Michal•665
    @mbart13

    That's like the ultimate solution to this challenge, no point even attempting

    Thanks! :P

    but seriously, isn't 'defer' implied with modules? I'm not sure we have to add it in 'script' tag

  • bunee•2,020
    @buneeIsSlo

    @tediko, This is SO good! I really admire your creativity on this. You've done incredible :)

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