This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Typescript - for strong typing
- Sass - For styles
This has been a great project to further my understanding of useContext and useReducer React Hooks, together with Typescript. For example, the shopping cart state management is implemented with useReducer and put into a Context to facilitate the use between different components.
There is a custom hook (useSmallScreen) to monitor the with of the window on resizing and control the rendering of components for larger or small screens.
I've used this project to learn Sass; I've decided to create some global styles files, containing mixins and variables as well as base styles, and a style sheet for each component. I've found this way of organising the code clear and concise.
- TO DO: figure out how to implement controlled tab navigation in the Lightbox component, i.e. move the focus to the lightbox "Close" button after the images thumbnails (at the moment the focus moves to the main page).
- Keep practising useContext and useReducer with Typescript.
- Keep developing knowledge of testing tools.
- Dave Gray React Typescript Shopping Cart tutorial - This helped me to understand how to implement the shopping cart with reducer + context + typescript
- Frontend Mentor - @cr1deg0