Katkat

Build searchable list and highlight max transaction

StripeSoftware Engineer · Online Assessment

Last 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: (

  1. Render the list of items. (
  2. Provide a text search bar that filters by name using case-insensitive substring matching, and a numeric filter for minimum amount. (
  3. 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.