Audiophile E-commerce Website with Nuxt and Pinia

• I usually set max-width of 1330px for all viewports greater than 1400px, I forgot to do that. I’ll surely do when my laptop gets back on.

• I’ll look into it too, the reports already threw that error

• I’m still trying hard to figure hard how to solve that issue, this is my first Guru project, and also the first project I’ll be using VueX. And I have spent sooooo much time on this project, I’ll come back to it after gathering more experience.

Safe to say I’m still a junior dev, and unless I want to beat myself for not doing this project as perfect as it should be, I need to take a pause.

• I don’t see a way to move those components to App.vue. Vue treats each “view” as an html page, that’s why each page has it’s own header, navbar etc. Unless there’s a way to do it better. Wouldn’t mind your help.

• Frontend mentor didn’t provide social media pages for Audiophile, would have made them links.

Hi @toriola998, 👋

You did a great job in completing this challenge using Vue. 👍 Below are a few thing that I have noticed and you might want to check in order to improve your solution.

• On larger viewports the overall content on the pages stretches horizontally thus making the images appear huge. I see that you have used padding for the spacing on each sides. I would suggest you use a wrapping <div> element inside each <section> to which you could apply a max-width.
• For the cart button, it would be better to use a <span> for the cart count because a <p> element cannot be the child of a <button> element.
• When I tried to add the same product twice to the cart, it was added as a new item in the cart instead of showing x2. The increment and decrement feature is also missing on the product details page.
• The overall composition of your page structure could be improved by moving the <NavBar />, <header />, <main> and <TheFooter /> components to the App.vue root component. This would reduce repetition in the different views component.
• The social icons in the footer should have links to redirect the user to the respective social media website.

I hope this helps.

Keep it up.