Build searchable list and highlight max transaction
StripeSoftware Engineer · Online AssessmentLast updated
This question evaluates competency in frontend UI development, state management, real-time filtering, and aggregate computation (finding and highlighting maximum values) with attention to algorithmic efficiency; domain: frontend UI engineering (Other/Miscellaneous).
Build a small UI component that takes an array of {name: string, amount: number}. Requirements: (
- Render the list of items. (
- Provide a text search bar that filters by name using case-insensitive substring matching, and a numeric filter for minimum amount. (
- Within the currently filtered list, highlight the name(s) whose amount is the maximum; update the highlight in real time as the search/filter changes. If multiple items share the maximum amount, highlight all corresponding names. If the filtered list is empty, display a clear empty state and no highlight. Explain your state management approach, how you compute the maximum efficiently after filtering, and the time/space complexity. Describe test cases for edge conditions such as an empty input list, very large lists, ties, non-ASCII names, and rapid typing in the search bar.
Solution walkthrough is for members
Get the full walkthrough with reference code and complexity analysis, plus Kitty Coach at 300 messages a day. Hints, the code runner and community answers stay free.