Concept questionMedium~7 min

Interview question

How would you implement a list page with search, filters, sorting, and pagination from UI to API?

Build a filtered and paginated list page

Explains URL-backed filters, API query parameters, pagination, sorting, empty states, and shareable list views.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would keep list state in the URL query string so the page is shareable and survives refresh. The UI reads search, filters, sort, and page cursor from the URL and calls an API endpoint with explicit query parameters. The API validates allowed filters and sort fields, applies stable ordering, returns items plus paging metadata, and the UI renders loading, empty, and error states without losing the current filter state.

Full answer below

Practice focus

Query-state design, API parameters, pagination strategy, stable sorting, URL state, empty states, and performance.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
List pages look ordinary, but they are one of the densest full-stack features. The UI, API, and database all need to agree on filtering, sorting, pagination, and state persistence.
I would keep list state in the URL query string so the page is shareable and survives refresh. The UI reads search, filters, sort, and page cursor from the URL and calls an API endpoint with explicit query parameters. The API validates allowed filters and sort fields, applies stable ordering, returns items plus paging metadata, and the UI renders loading, empty, and error states without losing the current filter state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would choose pagination based on data size and user expectations. Offset pagination is simple for small admin lists, while cursor or keyset pagination is better for large or changing datasets. The API should not accept arbitrary column names or raw filter expressions. The frontend needs debounced search, reset behavior when filters change, and clear display of active filters. The response shape can include total count only when the database can provide it cheaply enough.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch query cost and user behavior. Expensive filters may need indexes, precomputed read models, or search infrastructure. The UI should avoid triggering duplicate requests for every small state change and cancel or ignore stale responses. I would add telemetry for slow queries, no-result searches, popular filters, page depth, and API errors. Accessibility matters too: pagination controls, filter labels, and result count announcements should work without mouse-only interaction.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Keeping filter state only in component memory.
Accepting arbitrary sort fields directly from the query string.
Using offset pagination for every high-volume list.
Forgetting empty and no-results states.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot connect UI query state to API contract.
No stable ordering for paged results.
Ignores database cost of filters and totals.
Stale responses can overwrite newer search results.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would you use cursor pagination?
Which filters belong in the URL?
How would you handle a total count that is expensive?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

Pagination & Filtering Offset vs Cursor

Opening drill

Concept questionMedium~7 min

Interview question

How would you implement a list page with search, filters, sorting, and pagination from UI to API?

Build a filtered and paginated list page

Explains URL-backed filters, API query parameters, pagination, sorting, empty states, and shareable list views.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Query-state design, API parameters, pagination strategy, stable sorting, URL state, empty states, and performance.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
List pages look ordinary, but they are one of the densest full-stack features. The UI, API, and database all need to agree on filtering, sorting, pagination, and state persistence.
I would keep list state in the URL query string so the page is shareable and survives refresh. The UI reads search, filters, sort, and page cursor from the URL and calls an API endpoint with explicit query parameters. The API validates allowed filters and sort fields, applies stable ordering, returns items plus paging metadata, and the UI renders loading, empty, and error states without losing the current filter state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would choose pagination based on data size and user expectations. Offset pagination is simple for small admin lists, while cursor or keyset pagination is better for large or changing datasets. The API should not accept arbitrary column names or raw filter expressions. The frontend needs debounced search, reset behavior when filters change, and clear display of active filters. The response shape can include total count only when the database can provide it cheaply enough.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch query cost and user behavior. Expensive filters may need indexes, precomputed read models, or search infrastructure. The UI should avoid triggering duplicate requests for every small state change and cancel or ignore stale responses. I would add telemetry for slow queries, no-result searches, popular filters, page depth, and API errors. Accessibility matters too: pagination controls, filter labels, and result count announcements should work without mouse-only interaction.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Keeping filter state only in component memory.
Accepting arbitrary sort fields directly from the query string.
Using offset pagination for every high-volume list.
Forgetting empty and no-results states.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot connect UI query state to API contract.
No stable ordering for paged results.
Ignores database cost of filters and totals.
Stale responses can overwrite newer search results.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would you use cursor pagination?
Which filters belong in the URL?
How would you handle a total count that is expensive?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

Pagination & Filtering Offset vs Cursor

How would you implement a list page with search, filters, sorting, and pagination from UI to API?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

How would you implement a list page with search, filters, sorting, and pagination from UI to API?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper