Frontend Engineer Interview Questions: Answer Frames That Work

Example output

Illustrative examples only — not real candidate achievements or testimonials.

• Question cue: 'Tell me about a component you built that got reused across the product.' Frame: Open by naming the component and the problem it solved (e.g., inconsistent modal behavior across 12 product surfaces). Describe the API design decisions — controlled vs. uncontrolled, slot-based composition — and how you documented it. Close with adoption and impact.

  Storybook for component documentation and visual regression baseline; TypeScript for strict prop contracts · Reduced modal-related accessibility bugs by 40% after rolling out the shared component to 12 product surfaces over one quarter

• Question cue: 'Walk me through how you improved page performance on a project.' Frame: Start with the user-reported symptom, name the metric you targeted (LCP), describe your diagnostic process, explain the specific change you made, and quantify the improvement. Keep the narrative in the browser — do not drift into server infrastructure.

  Webpack bundle analyzer to identify render-blocking chunks; Next.js dynamic imports for code splitting · Improved LCP from 4.2 s to 1.8 s on the product listing page, moving it from 'Poor' to 'Good' in CrUX data

• Question cue: 'How do you handle accessibility in your day-to-day work?' Frame: Describe accessibility as a design constraint you apply during component authoring, not a checklist at the end. Give a concrete example: a dropdown menu, a date picker, or a modal — name the ARIA pattern you used, how you tested keyboard and screen-reader behavior, and what you caught before it shipped.

  Playwright accessibility assertions combined with axe-core for automated WCAG checks in the CI pipeline · Caught 8 keyboard-navigation regressions in CI before they reached production during a six-month design-system migration

• Question cue: 'Describe a time you pushed back on a design spec.' Frame: Name the specific interaction detail that was technically problematic (e.g., a hover-only affordance with no keyboard equivalent). Explain how you raised it — directly in Figma comments or a design review — and what alternative you proposed. Show that you resolved it collaboratively and shipped something better.

  Figma for annotating the spec gap; Playwright device emulation to reproduce and demonstrate the failure · Eliminated a class of mobile-tap failures affecting ~15% of sessions by replacing a hover-dependent tooltip pattern with a persistent inline label

• Question cue: 'How do you decide what to test end-to-end versus unit test?' Frame: Explain your mental model — unit tests for pure logic and component state, end-to-end tests for flows where the integration between components, routing, and API shape matters. Give a concrete example of a critical flow you covered with Playwright and why a unit test would not have caught the same failure.

  Playwright for critical-path end-to-end coverage; React Testing Library for isolated component behavior · End-to-end checkout flow test suite caught a routing regression that would have blocked 100% of purchases; detected in CI, zero user impact

• Question cue: 'Tell me about a time you onboarded a teammate to a codebase or design system.' Frame: Describe the gap you identified (missing documentation, inconsistent patterns), the artifact you created (Storybook stories, TypeScript generics with inline JSDoc), and how you measured whether it worked. Show that you think about the developer experience of your own code.

  Storybook interactive stories with controls; TypeScript JSDoc annotations for IDE-level guidance · Reduced new-engineer time-to-first-PR on the design system from 9 days to 4 days after adding interactive Storybook examples and TypeScript strict-mode prop documentation

UI Craft & Component Architecture Questions

This loop probes how you design and maintain reusable UI. Interviewers want to know whether you think in systems — not just one-off components — and whether you consider accessibility and interaction quality from the start, not as an afterthought.

A strong answer names the component boundary decision you made, the tradeoff you weighed (composition vs. configuration, controlled vs. uncontrolled), and the measurable outcome. Ground your answer in the browser: talk about DOM structure, ARIA roles, focus management, and how your component behaves across states. Mention tools like Storybook for isolation and documentation, and TypeScript for prop contracts. Avoid drifting into backend API design or infrastructure — this loop is entirely about what ships to the browser.

Client Performance & Core Web Vitals Questions

Expect at least one question that asks you to diagnose or improve a slow page. Interviewers are checking whether you can translate a user-facing symptom — 'the page feels janky' — into a measurable metric like LCP or INP, then trace it to a root cause in the rendering pipeline.

Structure your answer around: (1) how you measured the problem (Lighthouse, Chrome DevTools, real-user monitoring), (2) what you found (render-blocking scripts, unoptimized images, layout thrash), (3) what you changed (code splitting with Webpack, image lazy-loading, moving to Next.js server components), and (4) the before/after metric. Never conflate client performance work with backend latency or cluster scaling — the interviewer is specifically evaluating your browser-side mental model.

Design Collaboration & Interaction Quality Questions

Frontend engineers sit at the intersection of design and engineering, and interviewers probe this seam deliberately. They want to know how you handle a Figma spec that is technically ambiguous, how you push back constructively, and how you maintain interaction quality when timelines compress.

A strong answer describes a specific design-engineering handoff moment: what the spec said, what the browser reality was (motion, focus states, responsive edge cases), how you flagged it, and what you shipped. Reference Figma as the source of truth and Storybook as the bridge between design tokens and production components. Show that you advocate for the user's experience — not just pixel fidelity — and that you can do it without blocking the team.

Testing, Code Review & Observability Questions

This loop surfaces whether you treat quality as a gate or a habit. Interviewers ask about your testing philosophy for UI, how you review others' frontend code, and how you know when something breaks in production.

For testing, anchor your answer in Playwright for end-to-end coverage of critical user flows — explain how you decide which flows are 'critical' and why. For code review, describe what you look for beyond correctness: accessibility regressions, bundle-size impact, TypeScript strictness, and design-system consistency. For observability, explain how you instrument client-side errors and performance degradations — this is distinct from backend observability and shows you own the full frontend surface, not just the code that ships.

Frequently asked questions