DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.
DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.
The Question
FE Design

Scalable E-commerce Marketplace Frontend

Design the frontend architecture for a high-traffic E-commerce Marketplace. The system must support millions of products with a focus on SEO (Search Engine Optimization), high-performance faceted search, and a robust shopping cart/checkout workflow. Detail your strategy for handling Server-Side Rendering (SSR) vs Static Site Generation (SSG), state management for the cart across sessions, and techniques to maintain a low Time-to-Interactive (TTI) on mobile devices with heavy image assets.
Next.js
React
Zustand
TanStack Query
TypeScript
Tailwind CSS
Radix UI
Framer Motion
ISR
Questions & Insights

Clarifying Questions

What is the primary traffic source and SEO requirement?Assumption: Traffic is largely organic/external; SEO is critical, necessitating Server-Side Rendering (SSR) or Static Site Generation (SSG) for Product Pages.
Does the marketplace include a Seller Dashboard or just the Buyer experience for the MVP?Assumption: The MVP focus is strictly on the Buyer journey (Discovery to Checkout).
How many products and categories are we targeting?Assumption: Millions of products, requiring robust faceted search, virtualization for listings, and efficient image optimization.
Is the checkout flow multi-step or single-page, and does it involve complex guest checkouts?Assumption: A streamlined multi-step checkout with support for both guest and authenticated users.
What are the expectations for offline or low-connectivity scenarios?Assumption: Basic offline "Read-only" mode for the cart and recently viewed products.

Crash Strategy

Core Bottleneck: Balancing heavy SEO requirements (SSR) with high-interactivity features (Filtering, Cart) while maintaining sub-second performance on mobile.
Progressive Questions:
How do we ensure search engines can index millions of product pages without killing the server? (Hybrid SSG/SSR + ISR).
How do we manage shared state like the Shopping Cart across highly cached pages? (Client-side hydration + Persistence).
How do we prevent UI jank during complex faceted filtering? (Optimistic UI + Debounced API triggers).
How do we optimize the "Hero" experience (Product Images) for Core Web Vitals? (Next/Image + CDN delivery).

Elite Bonus Points

Edge Side Rendering (ESR): Using Vercel/Cloudflare workers to personalize headers/banners based on geolocation without losing SSG benefits.
Micro-Frontend Readiness: Designing the Cart and Checkout as decoupled modules to allow independent team deployments as the scale grows.
Faceted Search Performance: Implementing "Search-as-you-type" using a localized trie or pre-fetching common filter combinations.
Web Vitals Attribution: Custom RUM (Real User Monitoring) hooks to track LCP and FID specifically on product detail pages to correlate with conversion.
Design Breakdown

Requirements

Functional Requirements:
Product Discovery: Home page, Search, and Category/Faceted Filter pages (PLP).
Product Detail: Rich media, specifications, and reviews (PDP).
Cart & Checkout: Persistent cart, multi-step checkout, and payment integration.
User Account: Order history, profile, and wishlist.
Non-Functional Requirements:
Performance: LCP < 2.5s, FID < 100ms.
SEO: 100/100 Lighthouse SEO score.
Scalability: Handle 100k+ concurrent users during peak sales.
Accessibility: WCAG 2.1 Level AA compliance.
Responsiveness: Mobile-first approach (70%+ traffic expected from mobile).

Design Summary

Concise Summary: A Next.js-based architecture leveraging Hybrid Rendering (SSG for static content, SSR for dynamic PDPs) with a decentralized state strategy (TanStack Query for server state, Zustand for Cart).
Major Components:
App Shell: The persistent global wrapper handling TopNav, Footer, and Toast notifications.
Search & Discovery Engine: Orchestrates faceted filtering, sorting, and pagination logic for the PLP.
Cart Manager: A centralized domain service for cart operations (add, remove, persist).
Checkout Flow: A state-machine driven multi-step form handling shipping, payment, and confirmation.
CUJ Walkthrough:
Search: User types -> Debounced API call -> Search Engine updates PLP state -> Results rendered with virtualization.
Checkout: Cart Manager provides data -> Checkout Flow validates inputs via Domain Layer -> Infrastructure Layer hits Payment Gateway.
Simplicity Audit: This architecture avoids Micro-frontends and GraphQL for the MVP, opting for a Monolithic Next.js app with REST to reduce operational complexity while maintaining high performance.
Architecture Decision Rationale:
Why Next.js?: Out-of-the-box SEO (SSR/ISR) and Image Optimization are non-negotiable for E-commerce.
Requirement Satisfaction: SSR meets SEO needs; TanStack Query handles caching for performance; Zustand provides lightweight, scalable state management for the cart.

System Diagram

Architecture Deep Dive

Presentation Layer

Component Hierarchy: The App Shell provides global context (Auth/Theme). Layout manages common headers/footers. Pages (PDP, PLP) act as entry points, delegating logic to Feature Containers (e.g., FilterPanel) which render Leaf Components (e.g., ProductCard, Badge).
Interaction Layer: Uses React Hook Form for checkout validation. Framer Motion is utilized for micro-interactions (e.g., "Add to Cart" animations). Accessibility is enforced using Radix UI primitives for modals and dropdowns.
Rendering Layer:
PLP/PDP: ISR (Incremental Static Regeneration) for fast initial loads and SEO.
Cart/Checkout: CSR (Client-Side Rendering) since these are private, user-specific pages.
Optimization: Image virtualization for product grids; next/image for automatic WebP conversion and lazy loading.

Application Layer

Data Fetching Layer: TanStack Query handles caching and "Stale-While-Revalidate" patterns. Pre-fetching is used on hover for product links to make transitions feel instantaneous.
State Management Layer:
Zustand: Manages the shopping cart and user session state due to its small footprint and simplicity.
Persistence: Cart state is synced to localStorage and reconciled with the server upon user login.
Routing & Navigation: Next.js file-based routing with Middleware for auth-guarded routes (e.g., /account).

Domain Layer

Business Rules: The CartLogic service encapsulates complex operations like "Buy 1 Get 1" or coupon validation, keeping UI components "dumb."
Entities / Models: We map API responses (DTOs) into stable Domain Entities (e.g., Product, Order). This prevents UI breakage if the backend schema changes.
Inter-layer Contracts: Domain services provide clean APIs (e.g., useCart()) that components consume without knowing about the underlying storage or API structure.

Infrastructure Layer

API / Network: Standardized Axios instance with interceptors for JWT injection and 401 handling. Request deduplication is handled at the TanStack Query level.
Storage: IndexedDB is used for caching large search result sets to support limited offline browsing of previously viewed products.
Wrap Up

Wrap-up

The design prioritizes SEO and performance through Next.js and ISR. By using Zustand for cart state and TanStack Query for data fetching, we achieve a highly responsive UX.
Trade-off: ISR might show slightly stale prices for a few minutes; mitigated by a final price check at the checkout stage.
Optimization: Implementing a "Product Image Sprite" or optimized BlurHash for LCP improvements during slow network conditions.