shopping-cart's Introduction

shopping-cart

This is a SPA for a mock shop built with React. The main goals of this project were to try simple unit testing in a React environment, fetching data and error-handling requests, and practicing routing with React Router.

Live version of this project can be found here: https://ken-ux.github.io/shopping-cart/

Lessons Learned

Scoping styles to components with CSS modules. This helped eliminate pollution of the global namespace when writing identical class names across components.
Implementing nested routes and dynamic segments using React Router.
Improving user experience by setting a "load" message while data is being fetched.
Writing tests with React Testing Library.
An early issue I ran into was running tests on components that contained React Router's Link component.
- When ran on components in isolation, an error would occur. Link always has to be used inside of a router, so testing a component containing Link without wrapping the component in one would always throw an error. Therefore, mocking a router by wrapping the component in React Router's lightweight MemoryRouter component in a test was a simple fix.
Avoiding "requests waterfalls" by resolving promises in the topmost components.
- For example, rendering my ShopItem component would involve fetching the data for each item and displaying a loading message before they're rendered. A page of six ShopItem components would therefore show six individual loading messages. After refactoring, the data was instead fetched all at once in its parent component, Shop, then distributed to its child components. This ensured only one loading message needed to be shown when Shop was fetching data.