Katkat
Back

Build a sortable, searchable movie list UI

DisneySoftware Engineer · Onsite
MediumSoftware EngineerOnsiteSoftware Engineering Fundamentals

Last updated

This question tests the ability to design a performant, reactive frontend component that handles data manipulation, asynchronous API integration, and efficient DOM rendering.

Challenge: Movie Browser Component

Build a React component (or a framework-agnostic architectural plan) for a movie browsing UI. The component should fetch a list of movies from a paginated API and allow users to search, filter, and sort the results.

Requirements

  1. Data Fetching: Fetch data from an endpoint GET /api/movies?page={page}. Handle loading and error states.
  2. Search: Implement a search input that filters the current list by movie title. Debounce the input to avoid excessive state updates.
  3. Sorting: Provide a mechanism to sort the visible list by 'Title' (alphabetical) or 'Release Year' (descending).
  4. Efficiency: Ensure that sorting and filtering happen efficiently, especially if the dataset grows.

API Interface

// Returns { data: [{id: 1, title: 'The Lion King', year: 1994}, ...], totalPages: 10 }
async function fetchMovies(page) { ... }

Constraints

  • The component should be responsive and accessible.
  • Consider how to prevent "jank" when the user types rapidly in the search bar.
  • Assume the API returns 50 movies per page.

Example

Input: User searches "Lion" in a list of 500 movies. Output: The UI displays only items where the title includes "Lion", with sorting applied to the filtered subset.

Edge Cases

  • What happens if the API returns an empty list?
  • How do you handle a scenario where a user types a new search query while a previous request is still in flight?

Hints

Hint 1

Use a debounce function or a custom hook to delay the search filtering logic until the user has stopped typing for at least 300ms.

Hint 2

Maintain a separate state for the 'raw' data fetched from the API and 'derived' state for the displayed (filtered and sorted) list to prevent unnecessary re-computations.

Hint 3

Use `useMemo` to cache the sorted and filtered results so that the transformation logic only runs when the input data or search parameters change.

Follow-up questions

  • How would you implement virtual scrolling if the list contained 10,000 movies instead of 500?
  • If the API becomes very slow, what UI patterns (e.g., skeletons, optimistic updates) would you introduce to improve the perceived performance?
  • How would you test this component to ensure the sorting and filtering logic is correct?