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: about 2 months 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 (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-03T08:54:08.000Z (about 4 years ago)
- Last Synced: 2025-03-30T15:14:00.305Z (about 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
