Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Full responsive site built using React and SCSS

Michael Bishop• 1,070

@MikeBish13

Desktop design screenshot for the Audiophile e-commerce website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Awesome work on this challenge, Michael!! Your solution looks great, and the layout scales all the way to mobile very nicely. Did you learn anything new while building out the project?

0

P
Matt Studdert• 13,611

@mattstuddert

Posted

Also, I'd recommend reviewing the accessibility audit and try resolving those errors. The easiest way is to add aria-label attributes with descriptive text (e.g. "Follow us on Twitter") for each social icon link.

0
Michael Bishop• 1,070

@MikeBish13

Posted

@mattstuddert Thanks so much, Matt. This was a really great project to complete. I learnt a bit more about React Router on this project, specifically building dynamic URLs for the categories and products within them. My big focus though was on trying to simplify the code as much as I could by creating a large amount of reusable components - I feel like I've really got a grip of this now and should I wish to add more functionality or pages to this project, I could build it quite easily by pulling in a load of existing components.

I also quite like using Zustand for my global store. It's really easy to use (compared to Redux) and in this project I discovered how simple it is to link up with localstorage.

1
Michael Bishop• 1,070

@MikeBish13

Posted

@mattstuddert I should also add - this is the first project where I've added my own little feature. It's a counter icon on top of the cart to show how many items have been added!

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@MikeBish13 that's great to hear! Yeah, this project is extremely close to a professional project. Building a scalable, maintainable codebase with reusable components makes things so much easier if you ever need to add to the code, so that's a great thing to focus on.

I've never actually heard of Zustand before. It looks good!

I'm liking the addition of the number on the cart icon. We should have that in the design by default!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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