Design an E-commerce Cart + Product Page
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Step 1 — Constraints
1M concurrent shoppers. Race conditions on inventory. Checkout flow. Payment processing?
Step 2 — Decision: Optimistic vs pessimistic cart
| Approach | UX | Accuracy | Complexity |
|---|---|---|---|
| Optimistic (update UI first) | Fast | Can oversell | Low |
| Pessimistic (check first) | Slow | Accurate | High |
Winner: Hybrid. Optimistic UI plus background inventory check.
Step 3 — Inventory reserve during checkout
When user enters checkout, reserve inventory for 5 minutes. If they abandon, release it.
If they complete payment, lock it permanently.
Step 4 — Idempotent payments
Payment must be safe to retry. If network fails mid-request, retrying must not charge twice.
Server treats payment as upsert: if order_id already exists, return same result.
Step 5 — Gotchas
Overselling: Multiple users buy last item, both succeed.
Lost cart on refresh: User spent 10 minutes building cart, refreshes page, it's gone.
Payment race: User clicks pay twice by accident.
Step 6 — Anti-patterns
Junior: No optimistic update. Result: Slow, bad UX.
Mid: No inventory hold. Result: Overselling.
Senior: Synchronous payment processing. Result: Timeout on slow networks.
Step 7 — 30-minute interview
0–5 min: "1M concurrent? Inventory sync? Payment?"
5–15 min: Explain optimistic cart + inventory hold.
15–30 min: "How do you handle overselling? Payment failures?"
Step 8 — Interview simulation
Interviewer: "Design e-commerce cart for 1M concurrent"
You: "Optimistic cart updates for fast UX. During checkout, reserve inventory for 5 minutes. Payment is idempotent: retry with same order ID returns same result. Persist cart to localStorage. Async payment processing."
Interviewer: "What if inventory runs out while user is in checkout?"
You: "Hold inventory during checkout. If it runs out, show 'Sorry, out of stock' and remove from cart. Release the hold."
Interviewer: "User clicks pay twice by accident. What happens?"
You: "First request charges card. Second request with same order ID returns first result—no double charge. Idempotency key prevents it."
Step 9 — Tiered answer
| Level | Time | What You Say |
|---|---|---|
| Junior (15 min) | Simple cart, checkout form | |
| Mid (25 min) | Inventory checks, optimize UX | |
| Senior (30 min) | Optimistic + reserve + async payment + idempotency |
Step 10 — Final checklist
| Issue | Solution |
|---|---|
| Fast UX | Optimistic cart updates |
| Overselling | Inventory hold during checkout |
| Lost cart | localStorage persistence |
| Payment safety | Idempotent with order ID |
| Async processing | Queue payments, webhook for confirmation |
| Network failures | Retry with exponential backoff |
| Refunds | Webhook triggers refund logic |
| Analytics | Track cart abandonment, checkout funnel |
"Optimistic cart updates for fast UX. During checkout, reserve inventory for 5 minutes. Payment is idempotent: retry with same order ID returns same result (no double charge). Persist cart to localStorage. Async payment processing via queue. Monitor checkout funnel and cart abandonment rate."