Front end interviews

Work in the tool while you explain your decisions.

Choose a role and level. Each interview has a new task, follow-up questions and a report that checks your work and your explanation.

Take the assessment Choose an interview

Speak or type. Sign in to save your results across devices.

Timed assessment

12 practical questions
60 minutes
Mid level

Questions are drawn from a bank of 36. Your report includes a skill breakdown and lessons to practice next.

Start assessment

Practice interviews

Junior tasks cover the fundamentals. Mid and senior tasks add debugging, changing requirements and review decisions.

Position

10 interviews

Frontend engineer
Junior
20 min

Validate a dispatch contact

Alder Payments needs this behavior: The native label names its input, the submitted field has a name, and whitespace-only input produces a visible linked error before a valid value can submit. Use the supplied fixture rather than hardcoding the visible records. Submit spaces first, then a padded valid contact. The first attempt must show an error and the second must report the trimmed value.

Start interview

Skills and rubricValidate a dispatch contact

The native label names its input, the submitted field has a name, and whitespace-only input produces a visible linked error before a valid value can submit.
Traces a concrete input and user event before coding.
Checks the named boundary with an expected screen state.

Software engineer
Junior
20 min

Fit a dispatch card grid

Birch Learning needs this behavior: Three equal tracks fit a wide viewport, one track fits a phone, and long unbroken labels cannot force the document wider than the viewport. Use the supplied fixture rather than hardcoding the visible records. Measure the same cards at 1024 and 390 pixels, including the unbroken reference in the fixture.

Start interview

Skills and rubricFit a dispatch card grid

Three equal tracks fit a wide viewport, one track fits a phone, and long unbroken labels cannot force the document wider than the viewport.
Traces a concrete input and user event before coding.
Checks the named boundary with an expected screen state.

Test automation engineer
Junior
20 min

Handle nested queue actions

Finch Supply needs this behavior: One listener resolves the closest action button, keeps stable item identity, and handles items added after the listener was installed. Use the supplied fixture rather than hardcoding the visible records. Click the nested span in the second button, add a new queue item, then click its nested span.

Start interview

Skills and rubricHandle nested queue actions

One listener resolves the closest action button, keeps stable item identity, and handles items added after the listener was installed.
Traces a concrete input and user event before coding.
Checks the named boundary with an expected screen state.

Frontend engineer
Mid
30 min

Build keyboard service tabs

Willow Archive needs this behavior: Exactly one tab is selected and in the Tab sequence, its associated panel is visible, and arrow keys wrap focus and selection together. Use the supplied fixture rather than hardcoding the visible records. Move left from the first tab to the last, then right back to the first. Hidden panels must leave the displayed content.

Start interview

Skills and rubricBuild keyboard service tabs

Exactly one tab is selected and in the Tab sequence, its associated panel is visible, and arrow keys wrap focus and selection together.
Explains why both realistic mistakes fail.
Separates browser state, data identity, and the rendered result.

Software engineer
Mid
30 min

Contain an appointment dialog

Juniper Parcel needs this behavior: Opening a modal moves focus inside, Tab stays within its controls, Escape closes it, and closing restores focus to the original trigger. Use the supplied fixture rather than hardcoding the visible records. Open, tab around both controls, close with Escape, and verify the exact trigger regains focus.

Start interview

Skills and rubricContain an appointment dialog

Opening a modal moves focus inside, Tab stays within its controls, Escape closes it, and closing restores focus to the original trigger.
Explains why both realistic mistakes fail.
Separates browser state, data identity, and the rendered result.

Test automation engineer
Mid
30 min

Search a route combobox

Mallow Tickets needs this behavior: The query filters case-insensitive labels, arrow keys choose a matching option, Enter commits only that active option, and Escape closes the popup. Use the supplied fixture rather than hardcoding the visible records. Choose a result by keyboard, then enter a query with no matches. Enter must not select an old option.

Start interview

Skills and rubricSearch a route combobox

The query filters case-insensitive labels, arrow keys choose a matching option, Enter commits only that active option, and Escape closes the popup.
Explains why both realistic mistakes fail.
Separates browser state, data identity, and the rendered result.

Frontend engineer
Mid
30 min

Choose a service rating

Cedar Clinic needs this behavior: The rating is one named native radio group. Choosing a new value replaces the previous value, and the visible result follows the selected numeric rating. Use the supplied fixture rather than hardcoding the visible records. Choose the highest value and then the second value. Exactly one radio remains checked and the output changes to the second value.

Start interview

Skills and rubricChoose a service rating

The rating is one named native radio group. Choosing a new value replaces the previous value, and the visible result follows the selected numeric rating.
Explains why both realistic mistakes fail.
Separates browser state, data identity, and the rendered result.

Software engineer
Senior
40 min

Append a bounded delivery page

Tern Travel needs this behavior: Each page appends unique items in source order, loading stops at exhaustion, and a labeled Load more control remains an alternative to automatic loading. Use the supplied fixture rather than hardcoding the visible records. Load every batch including a short final batch. The list must contain each item once, and the exhausted control must be disabled.

Start interview

Skills and rubricAppend a bounded delivery page

Each page appends unique items in source order, loading stops at exhaustion, and a labeled Load more control remains an alternative to automatic loading.
An insertion shifts later offsets, so the same offset can name different rows. I use a stable ordering with a cursor tied to a snapshot or an explicit feed consistency policy. I preserve item identities, reader position, and a separate indication that newer content is available.
Defines evidence for the changed contract and states an unresolved trade-off.

Test automation engineer
Senior
40 min

Debounce a shipment search

Copper Market needs this behavior: Only the last query after the quiet interval creates a search entry. A whitespace-only query clears pending work and displays no results. Use the supplied fixture rather than hardcoding the visible records. Type two queries within one quiet interval, wait once, then clear with spaces. Only the second query may be logged.

Start interview

Skills and rubricDebounce a shipment search

Only the last query after the quiet interval creates a search entry. A whitespace-only query clears pending work and displays no results.
The effect cleanup cancels the pending timer and cancels or ignores an in-flight request. Timer cancellation prevents new work; request identity prevents an already running old response from committing. Unmount releases both resources instead of relying on an eventual render.
Defines evidence for the changed contract and states an unresolved trade-off.

Frontend engineer
Senior
40 min

Render a collapsible review tree

Linden Audio needs this behavior: Each reply renders under its own parent, collapse affects only that branch, and reopening restores the same descendants without duplicating siblings. Use the supplied fixture rather than hardcoding the visible records. Collapse the first parent while another root stays visible, then reopen and check its grandchild remains under the correct branch.

Start interview

Skills and rubricRender a collapsible review tree

Each reply renders under its own parent, collapse affects only that branch, and reopening restores the same descendants without duplicating siblings.
Index keys attach component state to a position. Moving or inserting a reply can transfer an editor draft or collapse state to a different comment. I key each node by its stable comment identity and decide explicitly whether a cross-parent move preserves or resets its local editor state.
Defines evidence for the changed contract and states an unresolved trade-off.

Choose your character

Front end interviews

Timed assessment

Practice interviews

Validate a dispatch contact

Fit a dispatch card grid

Handle nested queue actions

Build keyboard service tabs

Contain an appointment dialog

Search a route combobox

Choose a service rating

Append a bounded delivery page

Debounce a shipment search

Render a collapsible review tree

Interview Hub access

Your Work Gym account