Machine coding and UI coding

Frontend Machine Coding Interview Questions

Practice frontend machine coding questions with React UI prompts, async widgets, forms, tables, accessibility checks, and a guided strategy for timed rounds.

Start UI coding practice Start 30-day plan
506practice questions
3guided plans
May 2026updated
Liveeditor + checks

Most asked prompts

Start with these frontend machine coding interview questions with requirements signals for async state, forms, tables, keyboard behavior, accessibility, and tradeoff explanation.

#1Must knowIntermediate

React Debounced Search with Fake API

Controlled input, request timing, loading states, and stale-response handling.

Debounce input, call the fake API, show loading/error states, and prevent stale results.

async UIdebouncestale responses
#2Must knowIntermediate

Contact Form (Component + HTTP)

Validation, submit state, API feedback, and clean form ownership.

Collect contact details, validate required fields, submit over HTTP, and surface API feedback.

formsHTTPvalidation
#3Must knowIntermediate

Autocomplete Search Bar (Hooks)

Keyboard behavior, async suggestions, focus state, and accessible listbox UX.

Fetch suggestions, debounce typing, support keyboard selection, and recover from empty/error states.

autocompletekeyboarda11y
#4Must knowIntermediate

Multi-step Signup Form

Step ownership, validation flow, partial progress, and navigation state.

Persist step data, validate before advancing, support back navigation, and show completion state.

formswizardrecovery
#5Must knowIntermediate

React Nested Checkbox Tree

Parent-child sync, recursive updates, and indeterminate state correctness.

Sync parent, child, and indeterminate states across a recursive nested checkbox tree.

tree stateindeterminateevents
#6Must knowIntermediate

React Paginated Data Table

Derived data, page controls, empty results, and stable list rendering.

Paginate rows, handle empty pages, keep controls stable, and explain client vs server paging.

tablespaginationempty states
#7High leverageIntermediate

React Shopping Cart Mini

Collection updates, totals, item quantity logic, and immutable state changes.

Add/remove items, update quantities, derive totals, and prevent invalid cart states.

cart statederived totalsimmutability
#8High leverageIntermediate

React Nested Comments

Tree rendering, one active reply input, recursive data, and edit state boundaries.

Render nested replies, add comments at the right level, and keep edit/reply state scoped.

recursive UIreplieslocal state
#9High leverageIntermediate

Invite Chips Input

Dense event handling, token state, keyboard removal, and accessible suggestions.

Create chips from suggestions, reject duplicates, support Backspace removal, and preserve focus.

chips inputautocompletekeyboard
#10High leverageEasy

Todo List

Basic local state, list updates, filtering, editing, and simple edge cases.

Add, edit, complete, filter, and delete todos without mutating list state.

listslocal stateCRUD
#11High leverageIntermediate

React Filterable User List

Search state, derived collections, empty results, and input responsiveness.

Filter users by query and facets, show empty states, and keep derived data predictable.

filteringsearchempty states
#12High leverageIntermediate

React Transfer List

Selection state, disabled actions, bulk moves, and list ownership boundaries.

Move selected items between lists, support bulk actions, and disable invalid controls.

selectionbulk actionslists
#13High leverageIntermediate

React Accordion / FAQ Component

Disclosure state, keyboard expectations, semantic buttons, and ARIA basics.

Open one or many panels, use semantic controls, and keep disabled/keyboard states clear.

disclosurea11ystate
#14High leverageIntermediate

React Tabs / Multi-View Switcher

State transitions, keyboard navigation, active panels, and component boundaries.

Switch views, preserve active tab state, support arrow keys, and connect tab panels correctly.

tabskeyboardcomponent API
#15High leverageIntermediate

React Theme Toggle

Local storage, OS preference defaults, visual state, and side-effect cleanup.

Respect system preference, persist user choice, update the document theme, and avoid flicker.

persistencethemepreferences
#16High leverageEasy

React Progress Bar

Prop constraints, value clamping, threshold colors, and predictable rendering.

Clamp progress values, render threshold states, label progress accessibly, and avoid layout shift.

propsvisual stateconstraints

Evaluation rubric

How interviewers evaluate machine coding rounds

Frontend machine coding is not generic LeetCode. Strong answers prove visible behavior, clean state ownership, edge-case handling, accessibility, and clear tradeoff narration.

State ownership

The solution keeps source-of-truth state small, derived data derived, and updates predictable.

Controlled inputsImmutable updatesNo duplicated derived state

Component boundaries

The UI is split into clear pieces without over-abstracting the first working version.

Readable propsLocal vs shared stateSimple public contracts

Async behavior

Loading, error, empty, cancellation, and stale responses are handled intentionally.

Race protectionDebounce/takeLatestRetry or recovery path

Edge cases

The candidate tests the states interviewers use to break shallow implementations.

Empty dataDuplicate actionsBoundary values

Accessibility

Interactive UI works with keyboard, focus, labels, announcements, and semantic controls.

Keyboard pathVisible focusARIA only where needed

Testing and explanation

The final answer proves behavior and explains tradeoffs without hiding behind code volume.

Manual checksUnit-level scenariosTradeoff narration

60-minute strategy

60-minute machine coding strategy

Use the clock to protect correctness first, then add polish and explanation only after the core interaction works.

  1. 0-10 min

    Clarify scope

    Confirm required states, data shape, interactions, accessibility expectations, and stretch goals before coding.

  2. 10-30 min

    Ship baseline UI

    Render the smallest correct version with clear state ownership and working primary interactions.

  3. 30-45 min

    Add edge cases and a11y

    Cover empty, loading, error, keyboard, focus, mobile, and repeated-action behavior.

  4. 45-55 min

    Verify behavior

    Run available checks or manual scenarios, then fix the highest-risk failures first.

  5. 55-60 min

    Explain tradeoffs

    Summarize state choices, async policy, performance limits, and what you would improve next.

Worked example

Worked example: React autocomplete search bar interview question

Autocomplete is a compact React UI coding interview question because it combines async state, keyboard control, focus management, and accessible suggestions in one component.

Open Autocomplete Search Bar (Hooks)

Requirements to clarify

  • Fetch suggestions from an async source as the user types.
  • Debounce keystrokes and ignore stale responses.
  • Support keyboard navigation, selection, loading, no-results, and error states.

State model

  • query, debouncedQuery, status, results, highlightedIndex, selectedItem.
  • requestId or AbortController for takeLatest behavior.
  • Optional cache for repeated queries when the API contract allows it.

Edge cases

  • Empty query clears suggestions and resets highlight state.
  • Older slow responses cannot replace newer results.
  • Escape, blur, and click selection behave predictably.

Stretch goals

  • Use combobox/listbox semantics only when the custom UI needs them.
  • Add tests around stale responses and keyboard navigation.
  • Explain when virtualization or server-side ranking becomes necessary.

Choose your focus

Use a clean route for the format you need next

Start broad here, then jump into the exact framework, UI format, JavaScript utility, system design follow-up, or company prep route without creating thin keyword pages.

JavaScript utility roundsDebounce, throttle, Promise utilities, deep clone, currying, and async reasoning.React machine codingTimed React UI prompts for hooks, state, lists, forms, and component boundaries.Angular machine codingComponent, forms, RxJS, service, and template-state prompts for Angular interviews.Vue machine codingComposition API, reactivity, forms, events, and component communication practice.HTML/CSS UI codingLayout, semantics, responsive UI, accessibility, and visual-state implementation prompts.System design follow-upMove from working UI into architecture, state, caching, performance, and tradeoffs.30-day guided planUse the full prep sequence when you need daily practice instead of random prompt browsing.Company prepAdd company-specific round structure after your implementation baseline is stable.

Practice sequence

Turn frontend machine coding into guided practice

Use this order when a prompt feels too open-ended or when you keep jumping between resources.

  1. 1

    Pick the round format

    Start with UI coding if the interview asks for widgets, or JavaScript utilities if the round is function-first.

  2. 2

    Build the smallest correct UI

    Render the required states first, then add edge cases, keyboard behavior, and failure handling.

  3. 3

    Run checks and explain tradeoffs

    Use tests or preview behavior to verify the solution, then explain state ownership and performance decisions.

  4. 4

    Move into a guided plan

    When misses repeat, stop browsing and use the 7-day or 30-day plan to rebuild the weak area.

FAQ

Frontend machine coding FAQ

Use these answers to choose the right practice format and understand what interviewers are scoring.

What is a frontend machine coding round?

A frontend machine coding round is a timed implementation interview where you build a working UI component, JavaScript utility, or small product slice, then explain state ownership, edge cases, accessibility, and tradeoffs.

What are the most common frontend machine coding questions?

Common frontend machine coding questions include autocomplete, debounced search, contact forms, multi-step forms, nested checkbox trees, paginated data tables, shopping carts, nested comments, chips inputs, transfer lists, accordions, tabs, theme toggles, and progress bars.

Should I practice React machine coding or vanilla JavaScript first?

Start with the format your target interviews use. React machine coding is common for UI rounds, but vanilla JavaScript still matters because debounce, throttle, promises, DOM events, and state timing show up inside React UI coding interview questions.

How are frontend UI coding interviews evaluated?

Frontend UI coding interviews are evaluated on visible correctness, component boundaries, state design, async behavior, empty/loading/error states, accessibility, tests or manual verification, and how clearly you explain tradeoffs.

How should I prepare for a 60-minute machine coding round?

Use a 60-minute machine coding strategy: clarify scope first, ship the smallest working UI, add edge cases and accessibility, verify behavior with checks, then summarize tradeoffs and production hardening.