Audiophile E-commerce Website with Nuxt and Pinia

Community feedback

• 

  P

  Toriola Faidat Olabisi•300

  @toriola998Posted almost 3 years ago

  • 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.

  0
• 

  P

  Christopher Adolphe•620

  @christopher-adolphePosted almost 3 years ago

  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.

  0