The Question
FE Design

Design a High-Performance Retail Marketplace Frontend

Design the frontend architecture for a large-scale retail marketplace (e.g., an Amazon-style storefront). The system must handle millions of products with a focus on SEO, high-performance discovery, and a seamless multi-step checkout process. Address how you would manage complex faceted search, global cart state, and diverse rendering strategies (SSR/SSG/CSR) to balance crawlability with interactivity. Detail your approach to image optimization, accessibility, and state persistence for guest and authenticated users.
Next.js
React
TypeScript
Tailwind CSS
Zustand
TanStack Query
ISR
SSR
Service Workers
Questions & Insights

Clarifying Questions

What is the primary target audience and device priority?
Assumption: Consumer-facing, mobile-first, global audience requiring strong SEO and localization.
Should the MVP include the Seller Dashboard and Admin Panel?
Assumption: No. The MVP focuses exclusively on the Buyer's journey: Discovery, Search, Product Details, and Checkout.
What are the scale and performance targets?
Assumption: Millions of SKUs. We need < 2.5s Largest Contentful Paint (LCP) and robust SEO for product indexing.
How is the Shopping Cart managed across sessions?
Assumption: Guest checkout is supported via LocalStorage, but logged-in users sync carts via API for cross-device persistence.

Crash Strategy

Core Bottleneck: Balancing high-performance SEO (thousands of product pages) with a highly interactive checkout experience.
Strategy: Use a Hybrid Rendering approach (SSG for static content, SSR for dynamic product data, CSR for the cart/checkout) to maximize speed and indexability.
Progressive Logic:
How do we ensure "instant" product discovery? (Edge-cached SSR + URL-driven filtering).
How do we manage complex cart state without performance lag? (Atomic state management with optimistic UI).
How do we guarantee a resilient checkout? (Step-based state machine + error boundaries).
How do we scale the UI? (Atomic Design System to ensure brand consistency).

Elite Bonus Points

Image Optimization Pipeline: Use Next/Image or specialized CDNs (Cloudinary/Imgix) for automated WebP/Avif conversion and responsive resizing to minimize payload.
Predictive Prefetching: Implement hover-based or viewport-based prefetching for product detail pages to make transitions feel instantaneous.
Resilient Offline Cart: Use a Redux-Persist or Zustand-persist strategy with a Service Worker to allow users to add items to the cart even during momentary network drops.
Design Breakdown

Requirements

Functional Requirements:
Product Discovery (Category navigation, Search with autocomplete).
Product Details (Gallery, Variants selection, Reviews).
Cart Management (Add/Remove, Quantity updates).
Checkout Flow (Address, Payment, Order Summary).
Non-Functional Requirements:
Performance: LCP < 2.5s, TBT < 300ms.
SEO: Valid Schema.org markup, semantic HTML, and server-side metadata.
Scalability: Handle 10k+ concurrent users and millions of indexed products.
Accessibility: WCAG 2.1 Level AA compliance (Keyboard nav, Screen readers).

Design Summary

Concise Summary: A Next.js-based hybrid application leveraging Edge-side rendering for speed and a centralized state machine for secure checkout.
Major Components:
App Shell: The persistent container managing global Navigation and Footer.
Search Engine Interface: A URL-synchronized component handling complex filtering and faceted search.
Product Engine: Manages variant selection, inventory checks, and media galleries.
Cart & Checkout Coordinator: A secure state-managed workflow for transactional integrity.
CUJ Walkthrough:
Discovery: User hits Search Page (SSR), filters are read from the URL, results are fetched and displayed.
Selection: User clicks Product; Page loads via SSG/ISR with fresh data. User selects a size (Local State) and clicks "Add to Cart" (Global State + API).
Purchase: User enters Checkout; a multi-step form validates inputs and submits to the Payment Gateway.
Simplicity Audit: Avoids Micro-frontends or complex GraphQL setups in favor of a Monolithic Next.js app with REST to reduce operational overhead for the MVP.
Architecture Decision Rationale:
Hybrid Rendering: Essential for E-commerce SEO while maintaining SPA-like speed.
URL-as-State: Allows users to share specific filtered search results easily.

System Diagram

Architecture Deep Dive

Presentation Layer

Component Hierarchy: Follows a standard App Shell pattern. The App Shell contains the Global Header (with Cart count). Layout handles responsive constraints. Page Containers act as the data-fetching entry points.
Interaction Layer: All buttons have ARIA labels. Search inputs use debouncing (300ms) to prevent excessive API calls. Cart actions use optimistic UI updates to provide immediate feedback.
Rendering Layer:
Home/Category: ISR (Incremental Static Regeneration) for high performance.
Product Details: SSR to ensure real-time inventory and price accuracy.
Checkout: Pure CSR (Client-Side Rendering) as it is highly dynamic and user-specific.
UI Frameworks: Tailwind CSS for rapid, low-bundle-size styling. Headless UI for accessible components (modals, dropdowns).

Application Layer

Data Fetching Layer: TanStack Query handles caching and deduplication. Product lists are paginated (cursor-based) to handle large datasets.
State Management Layer:
Zustand: Lightweight global state for the Cart and User Auth.
URL State: Filter parameters (color, size, price range) are stored in the URL query string to enable deep linking.
Routing: Next.js file-system routing. Protected routes for /checkout and /account use Middleware for authentication checks.

Domain Layer

Business Rules: The Price Calculator handles tax and discount logic client-side for UI display (though re-validated on the server). Cart Logic Service ensures a user cannot add more items than the available inventory.
Entities: Clear TypeScript interfaces for Product, SKU, CartItem, and Order.
Inter-layer Contracts: Domain services are injected into Application hooks, decoupling business logic from React's lifecycle.

Infrastructure Layer

API / Network: Standard REST API consumption. Use of an apiClient abstraction with interceptors for attaching JWT tokens and handling 401/403 errors globally.
Storage: LocalStorage is used via a sync-hook to persist the Cart ID for guest users, allowing cart recovery after page refreshes.
Wrap Up

Wrap-up

Evaluation: The design meets all functional needs while prioritizing SEO and performance via Next.js.
Trade-offs: Chose REST over GraphQL to simplify the MVP, though GraphQL's fragment approach would scale better for very complex product graphs later.
Future Optimizations: Implement a Service Worker for a "Heartbeat" check on inventory and price drops while the user is on the Product Detail page.