Demo kit

Frontend developer interview questions tied to the role you applied for

By role - Guide

UI engineers and frontend specialists preparing for product companies, agencies, and design-forward teams where the posting mentions specific frameworks and user-facing quality bars. Samples below are illustrative. Your kit is traced to the posting you paste.

Overview

  1. Frontend interviews mix UI engineering craft with product judgment.

    The job description decides the weights: a design-system role will probe components and accessibility - a growth team may care about performance and experimentation hooks - an agency-like posting may emphasize pixel fidelity and turnaround.

  2. Underline framework/versions, state management, testing, design-system mentions, performance budgets, and collaboration with design.

    That underline is more important than grinding trivia from a different stack.

  3. Use this guide to build a JD-tied rehearsal plan for coding, component design, and collaboration rounds.

Trivia vs product UI judgment

  1. Trivia: obscure API gotchas disconnected from their app.

  2. Judgment: how you structure components, manage state, prevent layout thrash, handle loading/error/empty states, and keep accessibility intact under deadline.

  3. When time is short, practice judgment with one small feature walkthrough from their domain (checkout step, dashboard widget, editor) using the framework they named.

Perf and a11y as interview signals

  1. If the JD mentions Core Web Vitals, large tables, or mobile, prepare one story with a measurement (LCP/INP/CLS or bundle size) and the fix.

  2. If it mentions accessibility or inclusive design, prepare one concrete fix (focus order, names, contrast, keyboard paths) - not a slogan about caring.

What interviewers usually test

  1. Component design, state management, and rendering performance

  2. Accessibility, responsive layout, and design system usage

  3. Network efficiency, caching, and perceived performance

  4. Working with designers and backend contracts

Signals to read in your job description

  1. Framework requirements (React, Vue, Angular, Svelte)

  2. Design system, Storybook, or Figma handoff mentions

  3. Core Web Vitals, SEO, or mobile-first language

  4. TypeScript and testing library expectations

How rounds differ

  1. Screen

    Stack fit, product surface area, and collaboration with design/product.

  2. Live coding / pair

    Component structure, state, edge cases, and communication while building.

  3. UI architecture / practical

    Data fetching, caching, performance, a11y, and testing strategy for a realistic screen.

  4. HM

    Trade-offs under deadline, design pushback, and ownership of quality.

Common prep mistakes

  1. Preparing a different framework than the one required

  2. Building UI with no loading/error/empty states

  3. Ignoring accessibility when the JD explicitly requires it

  4. Optimizing prematurely without a measurement story

  5. Cannot explain CSS layout or rendering performance in plain language

Last-hour prep playbook

  1. Stack lock

    Confirm framework, routing, data layer, and test tools from the JD.

  2. One feature walkthrough

    Narrate component tree, state, fetching, and failure states for a screen like theirs.

  3. One perf or a11y card

    Problem -> measure -> fix -> regression guard - matched to JD signals.

  4. Design collaboration story

    A time you negotiated scope or quality with design/product.

  5. Last-hour pass

    JD stack list + walkthrough bullets + kit outlines.

Illustrative sample questions

These examples show the type of questions for this path. Your real kit is generated only from the posting you paste - not from this list.

  1. How do you structure a React application so state stays predictable as the product grows?

    • Colocate UI state in components - lift shared domain state into stores or context.
    • Route updates through reducers or query caches so ownership and write frequency stay explicit.
    • Uncontrolled derived state and prop-drilled mutations cause stale UI and untestable data flow.

  2. A page feels slow on mobile. How do you find and fix the bottleneck?

    • Rank LCP, INP, and CLS from RUM plus lab traces before changing code.
    • Split TTFB, JS parse, long tasks, and layout thrash with Performance panel and Web Vitals.
    • Code-split the critical route - confirm field p75 LCP and INP moved, not Lighthouse alone.

  3. Describe a time you pushed back on a design that would hurt accessibility or usability.

    • Flagged missing keyboard focus order and 4.5:1 contrast on the primary checkout CTA.
    • Proposed visible labels, 44px hit targets, and a skip-link instead of icon-only controls.
    • Shipped the WCAG 2.2 AA path - conversion held while screen-reader task success rose.

  4. Product wants a complex interaction shipped this sprint. How do you scope a safe MVP?

    • Ship the happy path with keyboard, focus trap, and error states - defer motion polish.
    • Cut hover-only gestures, nested animations, and unused variants that miss the core job.
    • Gate on INP budget and axe-core - park progressive enhancement behind a follow-up ticket.

  5. What is the virtual DOM, and why do modern frameworks still care about re-render cost?

    • Virtual DOM diffs a tree of descriptors then patches real DOM nodes, not a free lunch.
    • Reconciliation still executes JS, allocates fibers, and can commit expensive layout-thrashing DOM updates.
    • Memo, stable keys, and state locality cut wasted renders - index keys still remount rows.

FAQ

  1. Will they ask CSS theory?

    Sometimes. More often they watch whether you can build a resilient UI. Skim layout fundamentals - spend more time on a feature walkthrough in their stack.

  2. Do I need system design as a frontend engineer?

    If the JD implies complex client state, offline, or microfrontends, yes at an appropriate altitude. Otherwise focus on UI architecture for product screens.

  3. Short prep window?

    Stack lock, one feature walkthrough, one perf/a11y card.

  4. Guide vs kit?

    Guide = frontend interview craft from a JD. Kit = your traced questions and outlines.

  5. Next?

    Paste the posting on the homepage for a free preview.

Related guides

  1. Full-Stack Developer Interview Questions

  2. UX Designer Interview Questions

  3. Technology Industry Interview Prep

When you have a posting

  1. Generate questions from that job description - free preview, $2 for the full kit. No account. Paste a job description.