Back to practice Practice this problem
FE System DesignBeginner45 minutes
Client-Side Search with Autocomplete
Design an accessible autocomplete system with debouncing, caching, offline fallback, and race-condition handling.
LLM-friendly summary
A frontend system design problem about fast autocomplete UX with caching, accessibility, and resilient async control flow.
Scenario
An e-commerce search box must feel instant, accessible, and resilient even when the API slows down or fails.
What you need to design
- 1Explain when to debounce and when to throttle.
- 2Design a useful cache with invalidation rules.
- 3Implement the WAI-ARIA combobox interaction model.
- 4Handle API errors and offline states gracefully.
- 5Compare client-side prefix matching with server-side search.
Concepts
DebouncingCachingAccessibilityTrie Data Structures
Skills
Search UXAPI DesignKeyboard NavigationARIA Patterns
What good solutions are evaluated on
- - Component and state-machine design
- - Accessibility completeness
- - Error handling and offline behavior
- - Search trade-offs and caching depth
Ready to practice this yourself?
Open the interactive AlgoReason workspace to sketch the architecture, write notes, and submit for AI evaluation.