E-Shop
Tools: React + CSS, HTML
Functionality
- search box;
- filter by category;
- filter by price;
- view alternative product photo on hover;
- open/close cart view (MUI Drawer);
- add/remove cart items;
- checkout price calculation.
Comments
Upgraded an earlier, more basic project (see E-Shop Filter). Re-wrote all the HTML and JS in React — to get a feel of how such a translation goes, and also because React really has an undeniably strong hand as soon as things get a bit more complex. Implemented useMemo hook for updating total prices only when cart items list changes. Biggest challenge? Spent hours on the tiny issue of targeting the parent element of FontAwesome icons… (found out that one has to disable pointer-events for svg in CSS, for the target.parentElement to work… :))
Possible extensions: make layout fully responsive; add an API to connect to a mock product database; create a user account with login & shopping history.
Update: wanted to try out some Material UI components, so re-did the cart as a MUI Drawer component.
