Frontend Engineering interview guide

Every question carries the same frame: the production situation behind it, what it is actually testing, what a strong answer sounds like, and the flags on both sides. The red flags are specific wrong answers a confident engineer really gives — not 'has not heard of the API'.

24 of 24 questions
A side panel slides in when the user opens filters. It is animated by changing `left` from `-320px` to `0`, and on a mid-range Android phone it visibly stutters. Explain what the browser is doing, and what you would change.Pipeline

A dashboard with a dense results table behind the panel. The animation is smooth on the developer's laptop and on the reviewer's laptop. It was shipped, and support started getting "the filters are laggy" reports from field staff on company-issued phones.

Clicking "Export" locks the tab for about a second — the button does not even show its pressed state, and the spinner never appears. The export is pure JavaScript over data already in memory. Why does the spinner never render?Event Loop

An analytics tool. The handler sets `loading = true`, then formats 40,000 rows into CSV, then sets `loading = false` and triggers a download. Users have learned to click Export twice because "the first click does nothing".

A results page has a search box, three filter dropdowns, a sort order, a page number, a row-selection checkbox per row, and a "saved view" the user can name. Where does each of those live, and why?State

The current implementation puts all of it in one global store, because "then anything can read it". Two bugs are open: sharing a link to filtered results shows unfiltered results, and going back after opening a row loses the filters.

We are building an internal admin tool behind a login, and a public marketing site. Someone proposes server-side rendering for both because "SSR is faster". Do you agree?Strategies

A team standardising on one rendering strategy for everything they build. The admin tool is used all day by 200 staff; the marketing site is mostly first-time visitors arriving from search and social.

A server-rendered page logs a hydration mismatch warning in production, and occasionally a timestamp on the page flickers to a different value. Someone has silenced the warning. What is actually happening, and what do you do?Strategies

A content site rendering "posted 3 hours ago" server-side. The warning appears only for some users, mostly in the evening, and QA cannot reproduce it. The suppression was added in a sprint labelled "cleanup".

Users say "the app is slow". You have no other information. Walk me through how you turn that into a specific, fixable cause.Performance

A B2B application. The complaint arrives through account management as a churn risk. The team has already spent a sprint reducing bundle size and nobody reported an improvement.

Build a modal dialog. It has a title, some content, a Cancel and a Confirm button, and it opens from a "Delete account" button. Tell me everything it has to do that is not visible.Accessibility

A design system team is replacing twelve ad-hoc modals across a product. The existing ones are absolutely-positioned divs with an overlay, and one of them is used for a destructive confirmation.

Product wants users to write rich-text comments with bold, links and images, and see them rendered. An engineer proposes `innerHTML` with a regex that strips `<script>` tags. Convince me either way.Security

A B2B collaboration tool. Comments are visible to everyone in a workspace, including admins. The workspace has SSO and an admin panel on the same origin.

A developer says "CORS is blocking my request, so I set `Access-Control-Allow-Origin: *` on the API and it works now." Walk me through what CORS actually did, and what that change means.Security

An internal API that a new dashboard on a different subdomain needs to call. The API uses cookie-based sessions. The change was made in a config file and shipped the same afternoon.

A user edits an order in a detail view, navigates back to the list, and the list still shows the old value. Then they hard-refresh and it is correct. What is your model of the client cache, and where do you fix this?Caching

A SPA using a data-fetching library with cached queries. The mutation succeeds; the server is correct. The team's current fix in similar cases has been to refetch on window focus.

A search box fires a request per keystroke. A user types "shoes" and the results briefly show matches for "shoe", then flip to "shoes", then back to "sho". Why, and how do you fix it properly?Data

A storefront search. The bug is intermittent, worse on mobile, and the last engineer who looked at it added a debounce, which reduced the frequency without removing it.

You deploy an API change on Tuesday. On Wednesday you get errors from clients sending the old request shape. The frontend was deployed at the same time. What is happening, and whose problem is it?Production

An internal tool people keep open in a background tab for days. The API change renamed a field and dropped the old one. Error rates are low, persistent, and concentrated in a handful of users.

The main JavaScript bundle for a dashboard has grown large enough that first load is visibly slow on a mid-range phone. How do you decide what to split, and how do you know it worked?Bundling

A single-page dashboard with a chart library, a rich-text editor used on one settings page, a date picker, a PDF export, and an internationalisation bundle carrying every locale. Everything is imported at the top of the app entry.

A table has to display 50,000 rows with sorting and inline editing. The current implementation renders all of them and the tab becomes unusable. What do you do, and what do you lose?Performance

A logistics tool. Users sort by column, scroll to find a shipment, edit a cell, and occasionally use the browser's find-in-page to locate an order number. Product will not accept pagination.

A "star this document" button should feel instant. Someone implements it optimistically: flip the icon immediately, send the request, and revert if it fails. What have they not thought about?Caching

A document tool used on office wifi and on trains. The star also appears in a sidebar count, a "starred" filter view, and a recently-starred list on the home page.

A dashboard needs to show job statuses that change every few seconds, and a chat panel. Someone proposes one WebSocket for both. Talk me through the choice.Real-Time

An internal ops tool. It is behind a corporate proxy at some customer sites, deployed behind a load balancer, and users keep it open in a background tab all day.

A `<DataTable>` in your design system is used by nine teams. One team needs a custom cell renderer, another needs multi-select, another needs a sticky footer. The prop list is now 34 entries. What went wrong and what do you do?Components

A shared component library. Each request was reasonable, each was implemented as a boolean or a callback prop, and the component now has branches that only one consumer exercises. Changing it is frightening.

A 30-field application form re-renders the whole page on every keystroke and the caret lags behind typing. It is implemented with one piece of state holding the whole form object. Fix it, and tell me what you would have done differently from the start.Forms

An insurance quote form with conditional sections, cross-field validation, a repeating address block, and a "save draft" that runs while the user types.

In a client-side routed app, a user activates a link. The URL changes and the new page renders. What has the browser stopped doing for you, and what must you now do by hand?Routing

A documentation site converted from server-rendered pages to a SPA. Nothing looks different. A screen-reader user reports that following a link "does nothing", and a keyboard user reports that Tab after navigating goes to the site header again from the top.

A support tool gets slower the longer it is open. After a morning of use, interactions are sluggish and the tab eventually crashes. Nothing is slow on a fresh load. How do you find it?Debugging

An agent console. Users navigate between hundreds of ticket views in a session, each with a chart, a live-updating status subscription and a resize-aware layout. The team cannot reproduce it in a normal working session.

Explain how React, Svelte and Solid each decide what to update when a value changes. Then tell me what that difference means for a component that re-renders too often.Frameworks

A team choosing a framework for a new data-heavy internal product, with a candidate who has used one of the three professionally.

A page parses a 30 MB CSV the user drops in, validates every row, and renders a preview. Should that go in a web worker? Talk me through the decision and the implementation.Workers

A data import tool. Today the whole thing runs in the drop handler; the tab freezes and users think it crashed. A previous attempt to move it to a worker was abandoned because "it was not any faster".

A field-service app must let technicians complete job forms with no connectivity and sync when they get signal. Design the client side of that, including what happens when the sync conflicts.Offline

Technicians work in basements and rural sites. A job form has a status, notes, parts used and photos. Two technicians occasionally work the same job, and dispatch can also change a job from the office while a technician is offline.

A product streams a model's answer token by token, shows which tools it is calling, and lets the user stop it. Design that UI, including what happens when the user hits Stop or navigates away.Agentic

An assistant panel inside a larger application. Answers can take a while, cite documents, call tools that modify data, and users frequently switch tabs or navigate mid-answer.