Design an Autocomplete / Search UI
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Step 1 — Constraints
Search volume? 100M queries per day on Google scale? Latency target for suggestions? 50ms? 200ms? Mobile-first or desktop? How many results to show? 5? 10?
Interviewer: 100M queries per day, P99 latency less than 100ms, mobile-first, show 5 results, debounce 300ms.
Step 2 — Architecture
Input field → Debounce 300ms → Request /api/search?q=... → Cache recent searches → UI renders 5 results
Step 3 — Decision: Debounce delay
| Delay | Network Load | Latency | UX |
|---|---|---|---|
| Immediate | High (spam API) | Slow | Very responsive |
| 300ms | Low | Fast | Good balance |
| 1000ms | Very low | Very fast | Feels laggy |
Winner: 300ms balances freshness and network load.
Step 4 — Implementation approach
Debounce the user's input: wait 300ms after they stop typing before fetching. Cancel any in-flight requests from previous queries so results always appear in the right order.
When not to use debounce: form validation (validate on blur, not keystroke).
At 100M queries per day, every 100ms of debounce saves massive API load. A user typing slowly is 10 separate keystrokes. Without debounce, that's 10 API requests. With debounce, it's 1. At scale, that's 90% traffic reduction.
Step 5 — Gotchas
Without debounce: 100M DAU typing slowly = 500M API requests per day.
Without canceling in-flight requests: User types "j", "ja", "jam" very fast. Results for "j" arrive last, overwriting "jam" results with wrong suggestions.
Cache expiring too slowly: Show stale results. User searches "pizza restaurants", gets results from 2 weeks ago.
Step 6 — Anti-patterns
Junior: Fetch on every keystroke. Result: Spam the API server.
Mid: Debounce but don't cancel old requests. Result: Results appear in wrong order.
Senior: Build perfect ranking algorithm upfront without user feedback. Result: Suggestions are irrelevant.
Step 7 — 30-minute interview
0–5 min: "What's the search volume? Latency target? Mobile?"
5–15 min: Draw a simple diagram. Input → Debounce → API → Cache → Results. Explain debounce strategy.
15–30 min: "How do you handle out-of-order results? What if the API is slow? How do you rank suggestions?"
Step 8 — Interview simulation
Interviewer: "Design autocomplete for 100M queries per day, less than 100ms latency"
You: "Debounce input 300ms to avoid spamming the API. Cancel any in-flight requests from previous queries so results always appear in the right order. Serve suggestions from local cache instantly while fetching fresh in background."
Interviewer: "What if the API is slow?"
You: "Set a 500ms timeout. If results don't arrive within 500ms, show 'Loading...' instead of stale data."
Interviewer: "How do you decide what to rank at the top?"
You: "Start simple: frequency plus recency. Then instrument clicks and measure which suggestions users pick. Use that as a ranking signal."
Step 9 — Tiered answer
| Level | Time | What You Say |
|---|---|---|
| Junior (15 min) | Fetch suggestions from API, show results | |
| Mid (25 min) | Debounce 300ms, cancel old requests, cache recent | |
| Senior (30 min) | Hybrid cache (stale + fresh), AbortController, ranking via click feedback |
Step 10 — Final checklist
| Issue | Solution |
|---|---|
| Network spam | Debounce 300ms on client |
| Results out of order | Cancel old in-flight requests (AbortController) |
| Stale suggestions | Fetch fresh in background while showing cache |
| Slow API | Timeout after 500ms, show loading state |
| Bad ranking | Measure clicks, use as ranking signal |
| Mobile UX | Close dropdown on blur, handle virtual keyboard |
| Accessibility | aria-live region, keyboard nav with arrow keys |
"For 100M queries per day, I'd debounce input 300ms to avoid spamming the API. Cancel old in-flight requests so results always appear in order. Serve suggestions from local cache instantly while fetching fresh data in background. If the API is slow (greater than 500ms), show a loading indicator. For ranking, start simple with frequency and recency, then instrument click-through to improve ranking over time."