Concept questionMedium~7 min

Interview question

How would you implement a master-detail page where a list item opens a detail panel or detail route?

Design master-detail data fetching

Explains list/detail API boundaries, route state, prefetching, selected item behavior, and avoiding over-fetching.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would keep the list endpoint optimized for scanning and the detail endpoint optimized for one selected item. The list returns summary fields, status, and ids. The detail route or panel fetches full data for the selected id and handles loading, not found, and forbidden states. The selected id can live in the route so refresh and deep links work, especially when the detail view is important enough to share.

Full answer below

Practice focus

List/detail contracts, route state, prefetching, selection behavior, caching, over-fetching, and permission checks.

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
Master-detail screens are common in admin tools, dashboards, and productivity apps. The design exposes whether the API gives the UI the right shape without over-fetching everything.
I would keep the list endpoint optimized for scanning and the detail endpoint optimized for one selected item. The list returns summary fields, status, and ids. The detail route or panel fetches full data for the selected id and handles loading, not found, and forbidden states. The selected id can live in the route so refresh and deep links work, especially when the detail view is important enough to share.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would avoid loading full detail data for every row unless the dataset is tiny and the UX justifies it. The UI can prefetch details for likely selections or keep recently viewed details cached. The API still checks authorization on both list and detail because seeing an item in a list does not automatically prove access to every detail field. If the detail can change independently, cache invalidation after mutations needs a deliberate plan.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would tune for perceived performance and data privacy. A split route can support SSR for detail pages, while a side panel can feel faster for admin workflows. The design needs clear behavior when filters remove the selected item, when another user deletes it, or when permissions change. I would monitor list latency, detail latency, cache hit rate, 404/403 detail responses, and over-fetching through payload size. I would add regression coverage for deep links and permission changes because those are the cases that often break after route or cache refactors.

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

Returning full detail payloads for every list row by default.
Keeping selected item only in hidden component state when deep linking matters.
Skipping authorization on the detail endpoint.
No behavior for deleted or forbidden selected items.

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

Details

Cannot explain list summary versus detail payloads.
Over-fetching makes the list slow as data grows.
No cache invalidation plan after detail edits.
Selection behavior breaks on refresh or back navigation.

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 selected id belong in the URL?
What fields belong in the list response?
How would you handle a detail item that was deleted?

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.

Read Models API Compatibility

Opening drill

Concept questionMedium~7 min

Interview question

How would you implement a master-detail page where a list item opens a detail panel or detail route?

Design master-detail data fetching

Explains list/detail API boundaries, route state, prefetching, selected item behavior, and avoiding over-fetching.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

List/detail contracts, route state, prefetching, selection behavior, caching, over-fetching, and permission checks.

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
Master-detail screens are common in admin tools, dashboards, and productivity apps. The design exposes whether the API gives the UI the right shape without over-fetching everything.
I would keep the list endpoint optimized for scanning and the detail endpoint optimized for one selected item. The list returns summary fields, status, and ids. The detail route or panel fetches full data for the selected id and handles loading, not found, and forbidden states. The selected id can live in the route so refresh and deep links work, especially when the detail view is important enough to share.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would avoid loading full detail data for every row unless the dataset is tiny and the UX justifies it. The UI can prefetch details for likely selections or keep recently viewed details cached. The API still checks authorization on both list and detail because seeing an item in a list does not automatically prove access to every detail field. If the detail can change independently, cache invalidation after mutations needs a deliberate plan.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would tune for perceived performance and data privacy. A split route can support SSR for detail pages, while a side panel can feel faster for admin workflows. The design needs clear behavior when filters remove the selected item, when another user deletes it, or when permissions change. I would monitor list latency, detail latency, cache hit rate, 404/403 detail responses, and over-fetching through payload size. I would add regression coverage for deep links and permission changes because those are the cases that often break after route or cache refactors.

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

Returning full detail payloads for every list row by default.
Keeping selected item only in hidden component state when deep linking matters.
Skipping authorization on the detail endpoint.
No behavior for deleted or forbidden selected items.

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

Details

Cannot explain list summary versus detail payloads.
Over-fetching makes the list slow as data grows.
No cache invalidation plan after detail edits.
Selection behavior breaks on refresh or back navigation.

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 selected id belong in the URL?
What fields belong in the list response?
How would you handle a detail item that was deleted?

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.

Read Models API Compatibility

How would you implement a master-detail page where a list item opens a detail panel or detail route?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

How would you implement a master-detail page where a list item opens a detail panel or detail route?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper