E-commerce product page (No Framework / Vanilla JS)

Hey Kevin 👋

Your solution looks awesome 👍. but I believe it has more room for improvement, and these are some suggestions you might find helpful.

• I like the idea of having more products to display, however, this page is considered for a single product display and not to showcase all available products. therefore, it would be much better if you make a dynamic route for each product depending on its id so that each product will have its page that showcases its details.

• for the side menu on mobile devices I see a fake backdrop overlay but why 🤔 it would be better if there is a real backdrop that closes the menu when clicked because as of now I can interact with the elements in the background and ofc that's not good. for example, while I'm opening the menu I can add items to the cart!

• I see you have a backdrop overlay when opening the lightbox, but unfortunately, it doesn't serve its normal function which is closing the modal.

• the main image is still clickable on small devices even though the lightbox is disabled and I can't see it.

• it would be nice if the user can click anywhere to close the cart menu (I notice that opening the side menu also closes it).

• this is a personal preference thing, but I would rather have a message telling me that the item was added to the cart (maybe under the "add to cart" button) rather than opening the cart and then closing it after a short period of time.

• I know that this's just a dummy app, but the discount value from the original price after calculating the discount rate doesn't make sense 😅

I hope you find my feedback helpful. Have a nice day 👋

Hi,

This is a slick project! I really like it!

I have one piece of feedback that initially made me as a user happy, when I added the first shoe to the cart I saw the basket update and drop down, that was pretty neat. But when I done this for another shoe, I didn't see it. I.e. if you scroll down, you no longer see it - I think it would be super useful for the user to see either the navbar cart icon increment or that drop down window present when you scroll so the user can track their cart when they add. I think that makes for a positive user experience rather than scrolling back to the top to check again.

Other than that, kudos! Amazing use of vanilla JS!