E-commerce Product Page

Design an e-commerce product page with images, variants, cart, reviews, and recommendations.

R - Requirements

Key Questions:

• How many product images? (5, 10, 20+)
• Variants? (size, color, material)
• Reviews and ratings?
• Recommendations?
• Cart persistence? (across sessions)
• SEO critical? (yes, for product pages)

Common Answers:

• 5-10 images with zoom
• Multiple variants (size, color)
• Reviews with pagination
• Related products recommendations

Talking Points:

• Product listing pages - Grid/list view, filters, sorting, pagination, virtual scrolling
• Product detail pages - Image gallery, variants, add to cart, reviews, recommendations
• Cart - Persistence, cross-tab sync, optimistic updates
• Checkout - Multi-step form, payment integration, order confirmation

A - Architecture

E-commerce Flow:

System Architecture:

Architecture Decisions:

• SSR/ISR for SEO (product pages rank high) - Pre-render for search engines
• Client-side interactivity (cart, variants, reviews) - Fast interactions, optimistic UI
• Microfrontends? (if product team separate) - Independent deployments per team

Relevant Content:

• Pre-rendering - SSG/SSR/ISR
• Microfrontends - Multi-team

D - Data Model

State Management:

• Product data (cached, normalized)
• Selected variants (size, color)
• Cart state (localStorage + server sync)
• Reviews (paginated, cursor-based)

Caching:

• Product cache (SWR pattern)
• Cart persistence (localStorage/IndexedDB)
• Cross-tab sync (BroadcastChannel)

Implementation Example - Cross-Tab Cart Sync:

// Using BroadcastChannel API
const cartChannel = new BroadcastChannel('cart-sync');

// Listen for cart updates from other tabs
cartChannel.onmessage = (event) => {
  if (event.data.type === 'cart-updated') {
    updateCart(event.data.cart);
  }
};

// Broadcast cart changes to other tabs
function addToCart(item: CartItem) {
  const newCart = [...cart, item];
  setCart(newCart);
  
  // Sync to other tabs
  cartChannel.postMessage({
    type: 'cart-updated',
    cart: newCart
  });
  
  // Also persist to localStorage
  localStorage.setItem('cart', JSON.stringify(newCart));
}

Relevant Content:

• Caching Patterns - SWR
• Sync Across Tabs - Cart sync
• Persistence Strategies - Cart storage

I - Interface

Talking Points:

• Product listing pages - Grid/list view toggle, filters sidebar, sorting, pagination, virtual scrolling
• Product detail pages - Image gallery with zoom, variant selector, add to cart, reviews, recommendations
• Cart - Item list, quantity updates, remove items, cross-tab sync
• Checkout - Multi-step form (shipping, payment, review), progress indicator, validation

Features:

• Product listing (grid/list view, filters, sorting, pagination)
• Image gallery (zoom, carousel, thumbnails)
• Variant selector (size, color)
• Add to cart button
• Cart (item list, quantity, remove, sync)
• Reviews list (paginated)
• Recommendations carousel
• Checkout (multi-step form, payment)

Accessibility:

• Keyboard navigation
• Screen reader support
• Form accessibility (variant selection)

Relevant Content:

• Accessible Forms - Variant selection
• Design Systems - Component consistency

O - Optimizations

Performance:

• Image optimization (multiple sizes, formats, lazy load)
• Prefetch related products (on hover)
• Code splitting (reviews lazy load)
• CLS prevention (image dimensions, skeleton screens)

SEO:

• SSR/ISR for product pages
• Structured data (JSON-LD)
• Meta tags (title, description, OG tags)

UX:

• Optimistic cart (add immediately, sync later)
• Cart sync across tabs (consistent state)

Relevant Content:

• Core Web Vitals - LCP, CLS
• Asset Optimization - Images
• Layout Shift Prevention - CLS
• Prefetching Strategies - Related products

Implementation Checklist

• SSR/ISR for SEO
• Image gallery with zoom
• Variant selection
• Add to cart (optimistic)
• Cart persistence (localStorage)
• Cart sync across tabs
• Reviews pagination
• Recommendations carousel
• Image optimization (sizes, formats)
• CLS prevention (dimensions, skeletons)

Common Pitfalls

❌ No SSR → Poor SEO, slow initial load
✅ SSR/ISR for product pages, CSR for interactivity

❌ No image optimization → Slow LCP, poor UX
✅ Multiple sizes, WebP/AVIF, lazy load, dimensions

❌ No cart persistence → Lost on refresh
✅ localStorage + server sync, cross-tab sync

❌ Layout shifts → Poor CLS score
✅ Image dimensions, skeleton screens, reserved space