Case study
Chronos Relojoaria
Premium watch storefront for a fictional Brazilian brand
URL-driven filters, ISR catalog, and instant variant switching.
- Next.js
- TypeScript
- Tailwind CSS
Problem & context
Watch shoppers filter by brand, movement, and size — sometimes all three at once. Filters had to feel instant while keeping URLs shareable and SEO-friendly.
Constraints & tradeoffs
- No client-side state that isn't reflected in the URL.
- Image-heavy catalog — had to avoid layout shift entirely.
- Fictional brand — no backend, so catalog is ISR-rendered.
Solution
Next.js App Router with URL search params driving filters (no useState for filter state). Catalog pages use ISR, and product images reserve aspect-ratio boxes to keep CLS at 0.
Architecture
- 01Product catalog → ISR pages
- 02Filter state → URL search params
- 03Detail page → next/image + aspect-ratio locks
- 04Optimistic cart on variant switch
Results
- CLS
- 0.00
- LCP
- < 1.2s
- Filters
- URL-driven
- SEO
- Fully SSR
Lessons learned
- URL state is the most underrated filter pattern — users can share exactly what they see.
- aspect-ratio beats every JS-based image-reservation trick.
- Optimistic UI on variant switch closes the perceived latency gap.