Build a sortable, searchable movie list UI
Frontend Movie List with Sort and Search
Build a small user interface that displays a list of movies. The movie data should be loaded from a provided JSON endpoint and the UI must support search and sorting functionalities while remaining responsive for a reasonably large dataset.
Data Source
- Load movie data from a
db.jsonURL. Assume this endpoint returns an array of movie objects. - Each movie object will include at least the following properties:
name: The movie title.year: The release year of the movie.
Requirements
- Display: Present the movie
nameandyearin a list or table format. - Search: Implement a search feature that filters movies by their
name. The candidate should define whether the search is substring-based and case-insensitive. - Sorting: Provide sorting capabilities. At a minimum, movies should be sortable by
nameand/oryear. The candidate should define whether the sorting is ascending or descending. - Performance: Ensure the UI remains responsive and performant when handling a reasonably large list of items (e.g., thousands of movies).
Deliverables
- A clear component structure and robust state handling.
- Implementation of data loading, including appropriate error and loading states.
- Clearly defined sorting and search behaviors.
- Basic user experience (UX) considerations, such as an empty results state.
AI interview prep
Core dilemma
Balancing immediate client-side UI responsiveness and development simplicity against the scalability challenges of processing and rendering potentially large datasets, without prematurely optimizing for server-side solutions.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Build a sortable, searchable movie list UI
Frontend Movie List with Sort and Search
Build a small user interface that displays a list of movies. The movie data should be loaded from a provided JSON endpoint and the UI must support search and sorting functionalities while remaining responsive for a reasonably large dataset.
Data Source
- Load movie data from a
db.jsonURL. Assume this endpoint returns an array of movie objects. - Each movie object will include at least the following properties:
name: The movie title.year: The release year of the movie.
Requirements
- Display: Present the movie
nameandyearin a list or table format. - Search: Implement a search feature that filters movies by their
name. The candidate should define whether the search is substring-based and case-insensitive. - Sorting: Provide sorting capabilities. At a minimum, movies should be sortable by
nameand/oryear. The candidate should define whether the sorting is ascending or descending. - Performance: Ensure the UI remains responsive and performant when handling a reasonably large list of items (e.g., thousands of movies).
Deliverables
- A clear component structure and robust state handling.
- Implementation of data loading, including appropriate error and loading states.
- Clearly defined sorting and search behaviors.
- Basic user experience (UX) considerations, such as an empty results state.