Golden Shoe Site

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.


  • 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