Coffeeroasters Subscription Site | React | Styled Components | a11y
Design comparison
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
- @RayaneBengaouiPosted over 3 years ago
Hello Jen,
Congrats for completing this challenge ! 🙂
Your link doesn't work because it's
https://focused-panini-ea6dd0.netlify.app/planinstead ofhttps://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 ! 😃
2@En-JenPosted over 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!! 😊
1@RayaneBengaouiPosted over 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 ! 😊
1@En-JenPosted over 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!
1@RayaneBengaouiPosted over 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 !
0 - @ospopPosted over 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.
1 - @emestabilloPosted over 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 😊
1@En-JenPosted over 3 years ago@emestabillo Thanks a lot, I really appreciate your kind feedback! 😊
1 - @ApplePieGiraffePosted over 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)! 😁
1
Please log in to post a comment
Log in with GitHub
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