Responsive E-commerce Page with NextJS/React, TypeScript & Tailwind

Challenges that I faced while building the project

Create Lightbox feature

• This is my first attempt at coding a lightbox feature. I have referred to a youtube tutorial which provides ideas about different ways of closing a lightbox (ie. 'escape' key, clicking outside the lightbox). Through the process, I learnt how to use useCallback hook in combination with useEffect

Typescript errors

• Also learnt about how to resolve typescript errors relating to useRef hook. Another instance of typescript error is different ways of typing event. In particular, I realised that I need to denote React.MouseEvent for onClick event type, and not just MouseEvent

Reusable React components and refactoring

• Through the process, I gained a deeper understanding of ways to create re-usable components in React and how to refactor the code to keep it DRY.

Any comments / feedback would be much appreciated.