Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
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
View live sitePreview (opens in new tab)View codeCode (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
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia
    Posted over 3 years ago

    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
    Posted over 3 years ago

    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
    Posted over 3 years ago

    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
    Posted over 3 years ago

    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
    Posted over 3 years ago

    You have an incredible result, congratulations.

  • Hayatunnabi Nabil•130
    @imhayatunnabi
    Posted over 3 years ago

    nice

  • Fayaz•380
    @fayax555
    Posted over 3 years ago

    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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub