Responsive E-Commerce Product Page by Tailwind CSS and Vanilla JS

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Eren,

  Great job! The design matches the mockups nicely and the app seems to function well. I've just listed some suggestions below in terms of code maintainability and performance:

  • Firstly, it's worth having separate JS files for your components (e.g. one for the slider, one for the cart handling.) This makes it easier to locate code and debug issues. If you use a bundler like Vite, this can make light work of it. You can them import them into your main.js, which is referenced in the index.html
  • Also, add your node_modules to your .gitignore as this bloats your build, and isn't required in production-ready interfaces. If a developer wants to run this on their local machine, its convention for them to run the npm install to install the relevant dependencies from the package.json lists, which would subsequently install the node_modules folder on their machine
  • Locally host your Google Fonts for privacy and performance reasons. Here's a link from Kevin Powell on how to download and convert them Link and a documentation link from Tailwind on how to reference them in your tailwind.config.js file (you can either extend or override the default theme) Link
  • In terms of accessibility, your button is missing an accessible name for screen readers and other assistive technologies to be able to read. Here's a link on how to add this Link
  • Your images are missing explicit height and width values, which can help prevent layout shifts on rendering
  • Use Vercel or Netlify for your front-end applications as these are much more robust platforms, compared to GitHub pages, with better performance, stability and caching. I use Vercel, and if you use Vite for your builds, it detects this and automatically compiles your code at build time when you push a commit to Git, meaning you don't have to run the npm script each time

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Eren•720

  @erenymoPosted over 1 year ago

  Hi @asbhogal 😊

  I wasnt expect that much but you made my day by your feedback and recommendations. I will note them all and use it on my next projects. Thankkk you for your helpful comment😊😊

  0

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  @erenymo no problem, glad to help. I'd recommend refactoring this code with the suggestions made if you haven't already, as you learn a lot from doing so and it's a very common practice in software development.

  0