Skip to content
Submitted over 3 years ago

Coffeeroaster Multi Page | Next.js , Mobile first

motion, next, styled-components, typescript
Raymart Pamplona•16,040
@pikapikamart
A solution to the Coffeeroasters subscription site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello. This is my 24th challenge here and my first premium challenge taken^^

This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>

I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!

This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.

I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!

Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!

(The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)

Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Raymart! 👋

    Congratulations on finishing this challenge! Nice work on this challenge! 👏

    It looks good on both my mobile and desktop devices. Good job! 🙌

    Some feedback:

    • I notice that the About Us page doesn't contain any h1. I would recommend making the About Us as a h1.
    • Usually, the logo is wrapped with a link that will navigate the user to the home page. I would suggest doing that.
    • I try your website in prefers-reduced-motion and I still see the animation when I scroll and the transition on hover. I would expect that there will be no animation and transition.
    • I also try to see the site when the JavaScript is disabled and as a result, I only see content in footer and header. The text content inside the main element is gone. I would recommend having a noscript that will tell the user to enable JavaScript.

    I hope this helps! Keep up the good work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Great to see you post a solution for your first premium challenge, Raymart! ✨

    Your project looks fantastic, and I love the extra details like the animations and the sticky header. Great to see you add the prefers-reduce-motion query as well for those who prefer not to see animations.

    I'd recommend reviewing your implementation of the "Create plan" page with keyboard navigation in mind. I couldn't choose individual options as it always focused on the group when tabbing through the content. I could use the arrow keys, but I'd expect to be able to tab through the options easily and select one using space or enter, which I wasn't able to do.

    I'd recommend adding the name attribute to your radio inputs as well so that they're grouped appropriately.

    I hope that helps. Keep up the excellent work! 👍

    Marked as helpful
  • Chamu•13,860
    @ChamuMutezva

    Amazing work Raymart, well done. It maybe an issue with my cellphone, there is a section which is remaining blank when I scroll - will post you the images on slack

    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden

    Hi Raymart, you did a great job!

    I assign a descriptive name as if it were a class together with the tag that I am going to stylize, for example for a container div I call it DivContainer. Using Styled at the beginning I find it superfluous, once you see the tag followed by the pseudo description you can understand that it is nothing more than a styled component :)

    What do you think about it?

    Hope this help and happy coding!

    Marked as helpful
  • Danilo Blas•6,300
    @Sdann26

    You have an incredible result, congratulations.

  • Hayatunnabi Nabil•130
    @imhayatunnabi

    nice

  • Fayaz•380
    @fayax555

    You could prefix with an S instead of Styled. So StyledNavbar will become SNavbar.

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