Coffeeroaster Multi Page | Next.js , Mobile first

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!!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Raymart Pamplona's solution.
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