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

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogal

  Posted almost 2 years 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!

  12

  Marked as helpful