shopping cart

this is the third react project from the odin project's full stack javascript curriculum.

live version

click here 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 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.