Interview questions in Frontend Dev, page 23
Architecting multi-brand, dark-mode theming
Tier tokens into primitive, semantic, and component layers; components consume semantic tokens; themes swap by remapping semantic-to-primitive on a scope like data-theme.
Compare Angular Zone.js and Vue 3 Proxy reactivity
This tests update granularity. Contrast Vue 3 Proxy tracking, targeting only affected components, with Angular Zone.js patching async APIs to trigger top-down dirty checking across tree. Vue binds deps at render; Angular compares values each cycle.
How do you configure a dual ESM/CommonJS package?
Use exports.require for .cjs and exports.import for .mjs, keep type unset or explicit, and compile separate artifacts.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
Clickable card: div onClick versus anchor tag
Use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work.
How does Svelte compile count += 1 into DOM updates?
Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.
Explain TypeScript Project References in a monorepo and their configuration
This tests monorepo build scaling. Good answers: split into composite projects with references arrays, use tsc --build for incremental compilation, and consume .d.ts outputs for boundaries. Red flag: calling it path mapping or omitting --build.
Implement A/B testing with Middleware rewrites and cookies
Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics.
The role of Storybook in a design system
Storybook renders components in isolation across states, serving as living documentation, a development sandbox, and a base for visual and accessibility testing.
Explain patch flags and static hoisting in Vue 3's compiler
Tests your grasp of compiler-informed virtual DOM optimizations. A strong answer covers patch flags as bitmap hints for dynamic bindings and static hoisting as extracting static nodes to skip diffing. Red flag: claiming Vue 3 removes the virtual DOM.
How do you add TypeScript types for a library without bundled types?
This tests the DefinitelyTyped @types workflow. Install @types/package as a dev dependency via npm or yarn, skipping it when the library already bundles .d.ts files. A red flag is suggesting manual declarations or extra tooling before checking DefinitelyTyped.
Implement a custom next/image loader for a self-hosted service
Tests next/image loader contract and URL construction. A strong answer defines a function taking src, width, and quality; returns a URL string for your service; and wires it via the loader prop or loaderFile config.
Tokens as a single source of truth pipeline
Define tiered tokens in standardized JSON, transform per platform with a build tool, publish versioned packages, and automate in CI.
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
How do you write a minimal dom-utils.d.ts for a JS function?
Tests bridging untyped JavaScript into TypeScript via ambient module declarations. A strong answer declares a module matching the file path and exports the function with a typed signature. Red flag: suggesting rename to .ts or using any.
How do you manage Next.js env variables on Vercel and use NEXT_PUBLIC_?
Set DB strings in Vercel dashboard without NEXT_PUBLIC_; consume in server code only. NEXT_PUBLIC_ inlines values into the browser JS bundle, leaking them to all users.
Contributing a new component variant
Align with maintainers first, follow guidelines, implement with API and tokens, add stories, docs, and tests, then open a PR for review.
What is the purpose of +page.server.js in SvelteKit?
Exclusively server-side load feeding the data prop, used for secrets like DB queries and private env vars.
How do you globally add a property to a third-party ButtonProps interface?
Tests TypeScript declaration merging and module augmentation. A strong answer uses a .d.ts file that declares the same module and interface name to merge the missing property globally. Red flag: suggesting edits inside node_modules or local wrapper types.
How would you implement a basic protected route in React?
Hold auth in useState, pass user to protected components, and return Navigate to login when absent.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles