The Question
FE Design

Design a Scalable High-Performance E-commerce Marketplace

Design a frontend architecture for a large-scale e-commerce marketplace focusing on high conversion and SEO. The system must support millions of products, high-traffic events (e.g., Black Friday), and a seamless shopping cart experience across sessions. Address how you would handle performance bottlenecks like image-heavy grids, SEO requirements for product discovery, and complex state synchronization between the product catalog and the shopping cart.
Next.js
React
TypeScript
Tailwind CSS
TanStack Query
Zustand
Radix UI
ISR
SSR
Questions & Insights

Clarifying Questions

What is the primary target device? Assumption: Mobile-first responsive web, as the majority of e-commerce traffic originates from mobile devices.
Is SEO a critical requirement for this MVP? Assumption: Yes. Product discovery via search engines is the primary acquisition channel, necessitating Server-Side Rendering (SSR) or Incremental Static Regeneration (ISR).
How many SKUs (Stock Keeping Units) are we handling in the MVP? Assumption: Thousands to millions. This requires efficient list virtualization and robust search filtering rather than simple client-side sorting.
What is the checkout flow complexity? Assumption: A single-page guest-friendly checkout to maximize conversion, integrating with a 3rd party payment processor (e.g., Stripe).
Are we supporting multi-vendor storefronts in the MVP? Assumption: No, we will focus on a centralized marketplace experience (Amazon-style) rather than individual vendor customization (Shopify-style) to maintain MVP simplicity.

Crash Strategy

Core Bottleneck: Balancing heavy SEO requirements (SSR) with high-performance client-side interactivity (Cart management/Filtering).
Strategy: Use a hybrid rendering approach (Next.js) to provide instant SEO-friendly hits while maintaining a highly responsive "App-like" feel for the cart and checkout.
Progressive Design Questions:
How do we ensure the Product Detail Page (PDP) loads in <2s globally? (Answer: ISR + Edge Caching).
How do we manage shared state (Cart) across different page transitions without redundant API calls? (Answer: Global Client Store + Optimistic Updates).
How do we handle large product grids without crashing the browser? (Answer: Windowing/Virtualization and Image Optimization).
How do we secure the checkout while maintaining a low-friction UX? (Answer: Tokenized payment components and server-side validation).

Elite Bonus Points

Edge UI Composition: Using Edge Middleware to personalize content (e.g., currency, geo-targeted banners) without the latency of standard SSR.
Speculative Prefetching: Utilizing hover or viewport signals to prefetch product data/bundles before the user clicks, achieving "instant" transitions.
Atomic Design System: Implementing a headless UI library (e.g., Radix) to ensure 100% WCAG 2.1 compliance while maintaining a unique brand identity.
Micro-Interactions for Conversion: Using Framer Motion for layout transitions between the Product Grid and PDP to reduce perceived latency.
Design Breakdown

Requirements

Functional Requirements:
Search and Filter: Users can find products by keywords and attributes.
Product Detail Page (PDP): Display high-res images, descriptions, and reviews.
Shopping Cart: Add/remove items and adjust quantities.
Checkout: Secure address entry and payment processing.
User Authentication: Simple Login/Sign-up.
Non-Functional Requirements:
Performance: LCP < 2.5s, TBT < 300ms.
Scalability: Support 10k+ concurrent users and millions of products.
SEO: Meta tags, JSON-LD schema, and server-rendered HTML for all public pages.
Responsiveness: Fluid layout across mobile, tablet, and desktop.
Accessibility: Screen-reader friendly navigation and keyboard-operable checkout.

Design Summary

Concise Summary: A Next.js-based architecture leveraging ISR for high-traffic product pages and a lightweight client-side state manager for the cart, ensuring a fast, SEO-optimized, and scalable marketplace.
Major Components:
Product Discovery Engine: Manages SSR/ISR product listings and complex filtering logic.
Cart State Manager: A resilient client-side store handling cross-page persistence and optimistic UI updates.
Checkout Orchestrator: A secure, multi-step form handler that interfaces with payment gateways and order APIs.
Image Optimization Pipeline: Automates WebP conversion and responsive sizing to protect the LCP.
CUJ Walkthrough:
Search: User enters query -> Server returns pre-rendered grid (ISR) -> Client hydrates filters.
Cart Add: User clicks "Add" -> Client store updates immediately (Optimistic) -> Background sync with API.
Checkout: Multi-step form validates locally -> Final submission hits Order Domain Service.
Simplicity Audit: This architecture avoids Micro-frontends or complex GraphQL schemas in favor of a Monolith-to-BFF (Backend-for-Frontend) approach, which is faster to deploy and easier to debug for an MVP.
Architecture Decision Rationale:
Why this architecture?: Next.js is the industry standard for SEO-driven e-commerce. It solves the SSR/CSR hybrid problem out-of-the-box.
Requirement Satisfaction: ISR handles scalability (static files are served via CDN); TanStack Query handles performance (caching); Radix UI handles accessibility.

System Diagram

Architecture Deep Dive

Presentation Layer

Component Hierarchy: The App Shell provides global elements like the Header and Footer. Layouts handle the sidebar for search or centered views for checkout. Pages are the entry points (Home, Search, PDP). Feature Containers (e.g., ProductDiscoveryEngine) fetch and manage their own local business logic, while Leaf Components (Buttons, Inputs) remain stateless.
Interaction Layer: All inputs use controlled components with React Hook Form for validation. Interaction logging is piped through a central AnalyticsProvider.
Rendering Layer: We use ISR (Incremental Static Regeneration) for PDPs to keep them static but updated. The Search page uses SSR to handle dynamic query params. Heavy grids use react-window for virtualization.
UI Frameworks / Tools: Tailwind CSS for atomic styling (utility-first), Lucide React for icons, and Radix UI for accessible primitives.

Application Layer

Data Fetching Layer: TanStack Query handles all server-state. It provides automatic deduplication, retries, and a stale-while-revalidate caching strategy.
State Management Layer: Zustand is used for the Shopping Cart. It is lightweight and allows for persistence via the persist middleware, ensuring the user's cart survives page refreshes or tab closures.
Routing & Navigation: Handled by Next.js App Router. We use Parallel Routes for modals (e.g., Quick View) and Intercepting Routes to maintain context.

Domain Layer

Business Rules / Use Cases: Logic for discount application, tax calculation, and SKU validation is extracted into pure JS functions (Services). This ensures that price formatting is consistent across the UI.
Entities / Models: We map raw API DTOs (Data Transfer Objects) into UI-friendly Models. For example, converting a variety of currency formats into a unified Price object { amount: number, symbol: string }.

Infrastructure Layer

API / Network: Standard REST API calls using fetch. We implement a Request Manager to handle Bearer token injection and global error catching (e.g., 401 redirects).
Storage: IndexedDB (via Zustand) for large cart persistence and sessionStorage for ephemeral search filters.
Wrap Up

Wrap-up

The proposed design prioritizes SEO and Performance—the two pillars of e-commerce—using Next.js and ISR. By keeping the Cart state in a decoupled client store (Zustand), we avoid the "flicker" associated with page transitions in traditional MPAs.
Trade-off: ISR means a user might see a slightly outdated price for a few minutes if it changes; we mitigate this by "re-validating" price data on the client side once the PDP is mounted.
Scalability: The system is globally scalable because most pages are served as static files from a CDN (Vercel/Cloudflare).