https://github.com/jernestmyers/shopping-cart

a mock e-commerce site that utilizes react, react routing, and the metropolitan museum of art's API.
https://github.com/jernestmyers/shopping-cart

api css3 es6 html5 javascript react react-components react-hooks react-router reactjs responsive-design

Last synced: 1 day ago
JSON representation

a mock e-commerce site that utilizes react, react routing, and the metropolitan museum of art's API.

• Host: GitHub
• URL: https://github.com/jernestmyers/shopping-cart
• Owner: jernestmyers
• Created: 2021-10-05T17:23:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-16T02:39:57.000Z (almost 3 years ago)
• Last Synced: 2023-08-14T21:43:02.370Z (over 1 year ago)
• Topics: api, css3, es6, html5, javascript, react, react-components, react-hooks, react-router, reactjs, responsive-design
• Language: JavaScript
• Homepage: https://jernestmyers.github.io/shopping-cart/
• Size: 8.44 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# shopping cart

this is the [third react project](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript/lessons/shopping-cart) from the odin project's full stack javascript curriculum.

![gif demonstrating the app's features](./shopping-cart-demo.gif)

## live version

[click here](https://jernestmyers.github.io/shopping-cart/) for a live version!

## project objective

1. build a mock e-commerce app with react and utilize react routing.

## technologies used

 

   

   

  

  



## app features

1. utilizes [the metropolitan museum of art's public API](https://metmuseum.github.io/) to fetch data for 19 works of art across several mediums.

2. each work of art in the Shop component routes to the ItemDetails component and renders the artwork's data from the API.

3. users can filter by medium in the Shop route.

4. the ItemDetails component renders the AddToCart component which includes an input for quantity, conditional rendering for framing options, and confirmation for items added to the shopping cart.

5. a shopping cart in the navigation menu dynamically displays and updates the quantity of items added to the shopping cart.

6. the ViewCart component renders a summary of the items in the cart, the total cost, and functionality to remove items and/or edit the quantity of items.

7. the ViewCart component combines all duplicated additions to the shopping cart to ensure an item is displayed once and only the quantity of said item changes.

## areas for improvement

1. improve responsiveness across browsers and devices.

2. the method that underlines "about" and "shop" when users are on those respective pages is not compatible with keyboard navigation.

3. ~~need error handling for when the met's API call fails- a CORS error is relatively common when fetching the data.~~

4. make use of the useLocation hook in react-router-dom to ensure page loads at the top each time a component mounts.