Submitted about 3 years ago

Coffeeroasters Subscription Site | React | Styled Components | a11y

Jen• 1,230

@En-Jen

Preview site View code

This is a solution for...

Coffeeroasters subscription site

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would love feedback on this challenge! This is my first multi-page challenge and I am still fairly new to React, therefore any React-related feedback would be highly appreciated. What do you think of the file structure and the way the code is organized? Am I splitting up my components appropriately? How is my use of styled-components? This is also my first challenge where I tried to focus a lot on best accessibility practices. Please let me know about accessibility areas I could improve on.

I wrote a detailed README for this project so feel free to check that out, but I'll just summarize a few of the things I implemented:

a skip link
smooth scroll animation
a sticky Sidebar in the plan page (only on laptop breakpoint and up)
a responsive Spacer component to add whitespace between components instead of using margins

Community feedback

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello Jen,

Congrats for completing this challenge ! 🙂

Your link doesn't work because it's https://focused-panini-ea6dd0.netlify.app/plan instead of https://focused-panini-ea6dd0.netlify.app. It's because React Router is not correctly loaded. You are hosting on Netlify so you can specify a redirect file to handle this, I've done that on my last challenge so you can check. However, I suggest you to read this article (https://ui.dev/react-router-cannot-get-url-refresh/) which explains it very well !

I don't have much experience in React to give you advice on the structure, but looking at your code I'm also doing more or less the same. On React official documentation (https://reactjs.org/docs/faq-structure.html) they don't have a strong opinion on that point, but their article could give you ideas.

Overall, well done for the challenge it looks good and a really like the smooth scrolling, happy coding ! 😃

Jen• 1,230

@En-Jen

Posted about 3 years ago

@RayaneBengaoui I think you must have seen my solution immediately after I submitted it. I realized right after submitting it that the link wasn't working and it was because I had copy and pasted the wrong URL when I submitted my solution. I'm impressed that you diagnosed that so quickly! Luckily I was able to just edit the link to the solution.

That's good to know that the React docs themselves state that they don't have a strong opinion on file structure. Thanks for your feedback!!

I've never seen your solutions on FM before but I just checked out your latest solution after you referenced it and wow, it looks amazing!! It looks like I could learn a few things from studying your code. Happy coding to you too!! 😊

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

@En-Jen Haha I find myself having trouble also with all those URLs 😁

I'm also a beginner with React, just to warn you that my code is far from being clean. However, I'll be more than happy if you could get something out of it ! I have also a lot to learn from you on the accessibility part.

Thank you for your nice comment and good luck on the next one ! 😊

Jen• 1,230

@En-Jen

Posted about 3 years ago

@RayaneBengaoui I hadn't had any exposure to Framer Motion before I saw your solution so I learned a lot about animation from your project. I really love the page transitions you included in your last solution so I'll admit that I shamelessly borrowed them and added them to this coffeeroasters solution of mine along with another Framer Motion animation that I came up with myself 🤓 Glad you were able to learn some things about accessibility from this project!

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

@En-Jen So cool ! It looks very nice. I can see that you are already experimenting with the bubbles "scaling" on the plan page !

Dragos Popescu• 320

@ospop

Posted almost 3 years ago

The buttons popping up on hover, the animations that occur while scrolling and overall the attention to detail makes the site so much more welcoming. Great job! and props for the accesibility stuff.

Jen• 1,230

@En-Jen

Posted almost 3 years ago

@popescudragos Thanks so much for your kind words!!

Emmilie Estabillo• 5,540

@emestabillo

Posted about 3 years ago

Hey Jen! Just dropping by to say well done! Folder structure looks good and I agree with APG regarding attention to detail - it’s evident in the readme as well. The animations were right on point. Bookmarking this 😊

Jen• 1,230

@En-Jen

Posted about 3 years ago

@emestabillo Thanks a lot, I really appreciate your kind feedback! 😊

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hello there, once again, Jen! 👋

Amazing job on this challenge! 👍 Your project is very well-organized and your attention to detail throughout your solution is fantastic! 👏 It's great to see that you put a lot of focus on accessibility and some of the smaller details, because that's what makes a project extra-special! 😀

I think your React code looks pretty good (I'm no expert, either) and everything looks good and responds nicely in your solution! 🙌 The detailed README you added is a nice addition, as well. 🙂

Well, keep coding (and happy coding, too)! 😁

Jen• 1,230

@En-Jen

Posted about 3 years ago

@ApplePieGiraffe Thanks so much for the nice feedback! 😊

Please log in to post a comment

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