Architecture scenarioHard~12 min

Interview question

How would you build a shareable modal with Intercepting Routes?

Combines a canonical detail page with an intercepted modal, Parallel Route slot, browser history, and accessible dismissal.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I first create the real detail route so its URL renders a complete standalone page. Then a parallel modal slot intercepts navigation to that route and renders the same content inside an accessible dialog while preserving the current page behind it. Closing uses browser history when appropriate, and loading the URL directly or refreshing shows the full page rather than depending on hidden background state.

Full answer below

Practice focus

Intercepting Routes, Parallel Routes, deep links, refresh behavior, accessibility, and navigation semantics.

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.
Overview
The same URL should work as contextual modal navigation and as a complete page when opened directly.
I first create the real detail route so its URL renders a complete standalone page. Then a parallel modal slot intercepts navigation to that route and renders the same content inside an accessible dialog while preserving the current page behind it. Closing uses browser history when appropriate, and loading the URL directly or refreshing shows the full page rather than depending on hidden background state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
The interception marker is relative to route segments, not raw folder depth, which matters around route groups and slots. The slot gets a default.tsx that returns the intended inactive state, commonly null, and the modal has focus trapping, a labelled title, Escape handling, scroll management, and focus restoration. I keep the content and data-access logic reusable so modal and page variants cannot drift. Browser tests cover click-open, deep link, refresh, back, forward, and close behavior.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
I decide what closing means when the user entered the modal URL directly, because blindly calling back() can leave the site. Authorization and not-found decisions come from the canonical route's server-side data boundary, not from whether the overlay is visible. Analytics distinguishes a contextual modal view from a full-page entry without double-counting one navigation. If the flow has destructive actions, I ensure confirmation and pending state survive the modal composition instead of tying correctness to animation lifecycle.

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

Building only the modal and leaving the shared URL without a full-page route.
Counting folder levels instead of route segments in the interception marker.
Ignoring keyboard focus and browser history.

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

Details

Refreshing the modal URL loses the content or returns 404.
Closing a direct entry sends the user off-site.
Modal and page variants implement different authorization rules.

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.

What happens on a direct URL visit?
Why combine interception with a parallel slot?
How should close behavior handle no in-app history?

Continue practice

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

1 linked

Prerequisite

Review this first if the current drill feels shaky.

Parallel Route stateUses a parallel slot to hold the intercepted modal.

Practice route

Read core answer Review checklist Follow-up prompts Track progress

Finished this drill?

Practice freely. Sign in only when you want to save completion, confidence, notes, or bookmarks.

New to Aporeon? Create account

Drill details

Human editorial direction

Aporeon is shaped by Aleksandar Tomovski, a software developer with experience on both sides of technical interviews. Content is reviewed for accuracy, natural spoken delivery, useful depth, and honest trade-offs.

About the creator Editorial standards

Was this drill useful?

Help improve the interview library.

Found this answer useful?

Say thanks with a standalone, one-time $5 contribution. No account required.

No subscription or perks.Choose another amount

Opening drill

Architecture scenarioHard~12 min

Interview question

How would you build a shareable modal with Intercepting Routes?

Combines a canonical detail page with an intercepted modal, Parallel Route slot, browser history, and accessible dismissal.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Intercepting Routes, Parallel Routes, deep links, refresh behavior, accessibility, and navigation semantics.

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.
Overview
The same URL should work as contextual modal navigation and as a complete page when opened directly.
I first create the real detail route so its URL renders a complete standalone page. Then a parallel modal slot intercepts navigation to that route and renders the same content inside an accessible dialog while preserving the current page behind it. Closing uses browser history when appropriate, and loading the URL directly or refreshing shows the full page rather than depending on hidden background state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
The interception marker is relative to route segments, not raw folder depth, which matters around route groups and slots. The slot gets a default.tsx that returns the intended inactive state, commonly null, and the modal has focus trapping, a labelled title, Escape handling, scroll management, and focus restoration. I keep the content and data-access logic reusable so modal and page variants cannot drift. Browser tests cover click-open, deep link, refresh, back, forward, and close behavior.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
I decide what closing means when the user entered the modal URL directly, because blindly calling back() can leave the site. Authorization and not-found decisions come from the canonical route's server-side data boundary, not from whether the overlay is visible. Analytics distinguishes a contextual modal view from a full-page entry without double-counting one navigation. If the flow has destructive actions, I ensure confirmation and pending state survive the modal composition instead of tying correctness to animation lifecycle.

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

Building only the modal and leaving the shared URL without a full-page route.
Counting folder levels instead of route segments in the interception marker.
Ignoring keyboard focus and browser history.

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

Details

Refreshing the modal URL loses the content or returns 404.
Closing a direct entry sends the user off-site.
Modal and page variants implement different authorization rules.

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.

What happens on a direct URL visit?
Why combine interception with a parallel slot?
How should close behavior handle no in-app history?

Continue practice

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

1 linked

Prerequisite

Review this first if the current drill feels shaky.

Parallel Route stateUses a parallel slot to hold the intercepted modal.

How would you build a shareable modal with Intercepting Routes?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

How would you build a shareable modal with Intercepting Routes?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite