E-Commerce SPA

The E-commerce site I've created is a Single Page Application (SPA) that uses the React Router library to extend React.js to include page routing. The layout is designed for a photo print store, and allows users to add pictures to their cart for later review and purchase. The useState hook is used to track picture favorites and cart status. Clicking the cart icon will take the user to the purchase screen where items can also be removed from the cart.

The useContext hook is used as part of the Context API in React. This allows state to be shared between the Photos and Cart page components. In a larger application, using the ContextAPI can simplify the state architecture and avoid unnecessary prop drilling that could cause performance issues with unnecessary re-renders.

I also used a custom hook called useHover which is used to track hover states on the photos with the useRef and useEffect hooks. This custom hook allows us to avoid repetition of code managing icon visibility on the hover states. Using both built-in and custom hooks allows us to simplify the code and either build new components as functions, or refactor existing codebase written as class-based components.

React Router and Hooks allows us to create Single Page Applications with functional components to simplify code architecture and make code more easily maintainable.