Demo:

https://golden-sneaker-luutodinh.netlify.app/

React + Vite

In the project directory, you can run:

npm run dev

Features:

• Display all products in Our Products section:
  • Single product should have name, description, price, image and Add To Cart button.
  • User able to click on Add To Cart to add target product to their cart.
  • Added product doesn't have Add To Cart button anymore, it should have Check Mark Icon (✓) instead.
• Display all added products in Your Cart section:
  • Each product in cart should have name, price, image, increase/decrease amount button and remove button.
  • User able to increase/decrease amount of a product in cart. When product's amount is decreased to zero, that product will be removed from cart naturally.
  • User able to remove product from cart.
  • Show total price of all products in car. When user increase/decrease product's amount or remove product, total price should be re-calculate correctly.
  • When there are no products in cart, we should show Your cart is empty message.
  • Products in cart should be persistent: When user visit the application, products are added before should be showed, user don't need to add products again.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh