JJJ4032002 / shopping-cart-Mogoatlhe

shopping-cart

An online shopping store created in ReactJS.

Core Features

• at least two pages
  • homepage
  • shopping page, must:
    • include a shopping cart
      • display the number of items currently in the shopping cart.
    • have a button to go the shopping cart to checkout and pay
• build individual cards for each product
  • add an "add to cart" button
• once the user has submitted their order the amount on the cart itself should adjust (i.e clear / reset cart).
• use the React Testing Library
• use the React Router to manage page changes

Additional Features

• create the not found page
  • let all the other invalid /urls lead to the not found page
• fetch data from an API.
• keep track of state values on page change / refresh

Design

Homepage

Shop page - Empty cart

Shop page - Items in cart ( + scroll)

prototype

• Get an idea of how the finished product is ment to work
  • https://www.figma.com/proto/YsOsWHq7tPiE9Vcy3N0Bah/shopping-cart?node-id=27%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=2%3A2

Preview

Installation Instructions

• Clone the repo
• Open the the shopping-cart folder
• Run npm install to install all of the project dependecies
• Run npm start from your terminal
  • If your browser does not open automatically paste http://localhost:3000 in the address bar of your browser and press Enter

Lessons Learnt

• useHref() may be used only in the context of a Router component

  • When trying to render the nav component in my tests I ran into the above error, resulting in my tests failing.

  • After a brief research I learnt that the above error meant that all components that use the Link component need to be rendered only within the Router context. Even in tests.

  • problem:

    render(<Nav page={"home"} />);

  • solution:

    import { BrowserRouter } from "react-router-dom";
    
    ...
    
    render(
    <BrowserRouter>
      <Nav page={"home"} />
    </BrowserRouter>
    );

Credits

• homepage image: https://unsplash.com/photos/AZTpFmYBzzs
• favicon image: https://www.californian.co.za/wp-content/uploads/2020/11/A80-LEATHER-ALL-STAR-132173C-WHITE1.png
• product images: https://superbalist.com/brands/converse/men/shoes, all the product information is fetched from the preceding link and can be bought there.