Golden Shoe Site

Golden Shoe Site is a pure React (e.g., no redux) e-commerce SPA that tracks application data (e.g., listed products, cart, etc.) via component state to allow adding products to a cart.

Video demo available here.

Features:

• Demonstrates product search, selection, display, and adding products to a cart where quantity can be controlled via dropdown
• Components:
  • SearchBar: generic searchbar that returns an entered term
  • ProductItem: simple image and title card
  • ProductList: list of ProductItems
  • BuyButton: uses 1 of 3 styles (buy, remove, out-of-stock) that change appearance (text, colour, icon) based on a given product
  • ProductDetail: shows details of given product (image, title, tabular details) whilst allowing ‘buying’ a product via included BuyButton
  • QuantityInput: number input that includes increment and decrement buttons (currently does not send number to parent components)
  • QuantityDropdown: pure js/css dropdown for given options (provides numbers as default)
  • ProductCartItem: similar to ProductItem but allows controlling quantity via QuantityDropdown
  • ProductCart: 2 column grid that shows a list of ProductCartItems and a total of their prices

#gosuraj