03. Design an E-commerce Platform

Difficulty: Medium
Interview Focus: State Management · Caching · Checkout Flow · Performance

Interview Question

Design the frontend for an e-commerce product browsing, cart, and checkout experience.

Requirements

Functional

Browse / search / filter products
Product detail page (PDP)
Add to cart / update quantity / remove
Checkout: address, payment, place order
Handle out-of-stock and price changes
Order confirmation and basic order history

Non-Functional

Fast catalog browsing
Consistent cart across tabs / refresh
Safe checkout (no double charge)
Accessible forms
Scalable catalog and traffic spikes

Solution

1. High-Level Architecture


Catalog / Search
    ↓
Product Detail
    ↓
Cart Service (client + API)
    ↓
Checkout
    ↓
Payment + Order API
    ↓
Confirmation

2. Component / Route Design


App
├── CatalogPage (filters + grid)
├── ProductDetailPage
├── CartDrawer / CartPage
├── CheckoutFlow
│   ├── AddressStep
│   ├── PaymentStep
│   └── ReviewStep
└── OrderConfirmation

Keep cart state shared; keep checkout as an explicit multi-step flow.

3. Cart Flow


Add to Cart
    ↓
Optimistic local cart
    ↓
Sync Cart API
    ↓
Revalidate stock / price
    ↓
Show updated totals

4. Catalog Performance

Paginate or infinite-scroll results
Cache filter query keys
Prefetch PDP on hover / focus when cheap
Image CDN + responsive sizes
Skeleton states for grid

5. Consistency Problems


Tab A: qty = 2
Tab B: qty = 1
Refresh → which wins?

Solution options:

Server cart as source of truth (logged-in)
Version / etag on cart updates
On conflict: refetch and show “cart updated”

6. Checkout Safety


Place Order
    ↓
Idempotency key
    ↓
Create Order
    ↓
Payment Intent
    ↓
Confirm
    ↓
Clear cart / show confirmation

Never fire “pay” twice without an idempotency key. Disable the submit button after first click; still protect on the server.

7. Accessibility

Labeled form fields and error messages
Focus management between checkout steps
Announce price / stock updates
Keyboard-friendly product grid and cart controls

8. Performance & Scale

Client: route-level code split · cart persistence · query cache for catalog · avoid blocking checkout on non-critical widgets.

Backend path:


Browser
   ↓
CDN (assets / images)
   ↓
API Gateway
   ↓
Catalog · Cart · Checkout · Payment services

Key Decisions

Problem	Solution
Slow catalog	Pagination + query cache + CDN images
Cart drift across tabs	Server cart + version / refetch
Double checkout	Idempotency key + disable submit
Stale price / stock	Revalidate before place order
Heavy PDP	Code split + lazy galleries
Form errors	Inline validation + focus first error
Guest users	Local cart → merge on login

Interview Q&A

Q1. Where should cart live?
Guest: local + sync. Logged-in: server cart as source of truth, with local cache for snappy UI.

Q2. How do you prevent double payment?
Client disables submit; server requires an idempotency key on create-order / pay.

Q3. What if stock changes during checkout?
Revalidate inventory before payment; if unavailable, block place-order and offer alternatives.

Q4. How do you structure catalog filters?
URL-driven query params so filters are shareable and cacheable (?color=red&sort=price).

Q5. SSR vs CSR for PDP?
SSR / SSG for SEO and first paint; hydrate interactive pieces (add-to-cart, variants).

Q6. How would you scale flash sales?
CDN + edge cache for catalog, queue or rate-limit checkout, optimistic UI only where rollback is safe.

Interviewer Checklist

State ownership · Cart consistency · Checkout idempotency · Caching · Performance · Accessibility · Scalability · Trade-offs

← News Feed · Next: Real-time Chat →