E-Commerce Product Page
2025 · Frontend implementation
A product page built from a design file. Gallery thumbnails, a cart that counts correctly, and one layout that works on a phone without a separate mobile build.
What it does
- Gallery and thumbnail states wired to one source of truth
- Cart that refuses empty and invalid quantities
- Desktop and mobile from the same markup, not two templates
What was hard
My first project in Next.js and TypeScript, coming from React and plain JavaScript. Typing the cart store and the props around it is where most of the time went, and it paid off: the types caught mistakes early and made the cart logic safe to refactor.
A cart that counts correctly. The store keeps a running item count for the header badge and a running total, so adding a product that is already in the cart sets its quantity instead of adding it twice, and moves the count and total by the difference. Removing a line takes back exactly what it added.
One index drives the main image, the thumbnails and the lightbox, so the photo that opens full size is the one you were looking at, and stepping through it in either place keeps the other in step.
Architecture
Frontend only: no server, no database, no sign-in. The section stays here because the next build has all three.