this is the third react project from the odin project's full stack javascript curriculum.
click here for a live version!
- build a mock e-commerce app with react and utilize react routing.
- utilizes the metropolitan museum of art's public API to fetch data for 19 works of art across several mediums.
- each work of art in the Shop component routes to the ItemDetails component and renders the artwork's data from the API.
- users can filter by medium in the Shop route.
- 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.
- a shopping cart in the navigation menu dynamically displays and updates the quantity of items added to the shopping cart.
- 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.
- 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.
- improve responsiveness across browsers and devices.
- the method that underlines "about" and "shop" when users are on those respective pages is not compatible with keyboard navigation.
need error handling for when the met's API call fails- a CORS error is relatively common when fetching the data.- make use of the useLocation hook in react-router-dom to ensure page loads at the top each time a component mounts.