Loading
Back to Projects
Headless E-CommerceSub-300ms Transitions
Nazaqa.com
Headless storefront for a premium brand, built on Next.js + PayloadCMS with a Stripe checkout and sub-300ms page transitions.
Full-Stack Engineer (Freelance)
Dec 2024 – Present
Lighthouse98/100
Performance score (mobile)
Page Transitions<300ms
Pre-fetched navigation
Mobile Bounce−18%
After asset optimization
Overview
Nazaqa is a high-end e-commerce storefront built for a boutique brand. Owning the frontend end-to-end meant building the product catalog UI, the role-aware checkout flow, responsive layouts across breakpoints, and proper loading / error / empty states. I also designed the PostgreSQL schema and REST APIs alongside the frontend work.
Key Features
Headless CMS for dynamic catalog and content
Custom Stripe checkout with webhook-based order state
Real-time inventory syncing
Dynamic OG image generation for SEO
Custom 'Quick Add' cart that never triggers a page reload
What Changed for the User
- Sub-300ms page-to-page transitions using pre-fetching
- Lighthouse performance score of 98/100
- Mobile bounce rate reduced by 18% via optimized asset delivery
Technical Challenges
Near-instant page transitions while the catalog keeps growing.
Resolution
Next.js Incremental Static Regeneration (ISR) plus CDN-optimized image delivery. Pages stay warm and load instantly even on cold paths.Sync complex checkout state (cart, coupons, discounts) with a headless backend without losing orders.
Resolution
Server-side Stripe webhook handler that drives every order state transition. Zero lost orders even under load.