https://github.com/gregolive/online-shop

A fake online shop with a functional shopping cart.
https://github.com/gregolive/online-shop

javascript react react-router

Last synced: 18 days ago
JSON representation

A fake online shop with a functional shopping cart.

• Host: GitHub
• URL: https://github.com/gregolive/online-shop
• Owner: gregolive
• Created: 2022-03-30T14:14:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-03T08:54:08.000Z (over 2 years ago)
• Last Synced: 2023-07-25T07:27:39.516Z (over 1 year ago)
• Topics: javascript, react, react-router
• Language: JavaScript
• Homepage: https://gregolive.github.io/online-shop/
• Size: 5.92 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Online Shop

A fake online shop for prospresso. Equipped with a functional shopping cart and mobile-friendly nav menu.

[Live demo](https://gregolive.github.io/online-shop/) 👈

## Functionality

- Routing via react-router allows users to navigate between home, shop and product pages

- Storage of shopping cart items in the user's browser via localStorage

- On smaller screen sizes (less than 768px) the header navigation is hidden and opened with a menu button on the left side of the header

- The shopping cart slides out from the right side of the screen on click of the cart button and opens when a new item is added

- On the shop page user's can add a product to their cart and a quantity of 1 is used by default

- On a product's page users can use a select input to add a custom quantity of the product to their cart

- In the cart an the quantity of a product can be adjusted with + and - buttons or the item can be removed entirely

## Reflection

I was able to implement routing and testing in react for the first time with this online shop project. 

Routing was acheived by importing functions from react-router and for the most part was fairly straightforward. One issue I ran into was with generating product pages with a product's id. The project uses uniqid to generate id's for the shop's dummy products, but because these are not saved to a database they re-generate on every page load. This meant that when I tried to link to a product via it's id:

````

````

the id changed on the page load and useParams() was unable to find the product with matching id. For this reason I opted to link to a profuct by their name, although this creates less appealing urls.

The main difficulty of testing was testing a product's page and supplying a mock product link. Based on a [Testing Library docs section on React Router](https://testing-library.com/docs/example-react-router/) I created the following function to supply a testProduct in MemoryRouter's initialEntries prop:

````

const renderWithRouter = () => (

  render(

    

      

        } />

      

    

  )

);

````

## Screenshot