Interview questions in Frontend Dev, page 16
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly.
Explain navigation guards and provide an auth use case
Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard.
Write a generic CreateSetters<T> that maps properties to setter methods
This tests TypeScript mapped types with key remapping and template literals. It iterates keyof T, remaps via as set plus Capitalize of string and K, and types values as setter methods. Red flag: manually typing setters or omitting string and K in Capitalize.
How do you create a /dashboard route in Next.js App Router?
Tests App Router file-system routing and the page.js convention. Good answer: create app/dashboard/page.js with a default export, note that only page.js creates an addressable route, and layouts do not.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input.
How do you configure a route for lazy loading?
Tests route-level code splitting and initial bundle control. Outline: dynamic imports in route config, on-demand chunk fetching, and measurable load-time wins versus eager loading. Red flag: treating lazy loading as just images or components, not route code.
What is the core difference between localStorage and sessionStorage?
SessionStorage dies with its tab; localStorage survives restarts and shares across tabs. Example: checkout form versus theme preference.
What is layout.js and how does it differ from shared headers?
Layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state.
CSS Modules versus Styled Components
CSS Modules scope via build-time hashed class names with near-zero runtime; Styled Components scope via runtime CSS-in-JS with easy dynamics but a runtime cost.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content.
How do you store and retrieve a TypeScript object in localStorage?
This tests your knowledge of Web Storage string constraints and JSON serialization. A strong answer covers JSON.stringify on write, JSON.parse on read, and typing the result with a TypeScript interface.
How do you create a /blog/[slug] route and access the slug value?
Use a [slug] directory with page.js; in App Router read the params prop in server components or useParams in client components.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both.
What is the purpose of an Angular Resolve guard vs ngOnInit?
Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.
What are localStorage's capacity and synchronous blocking limitations?
This tests Web Storage API trade-offs and main-thread blocking. A strong answer notes synchronous calls block the main thread; cites a finite per-origin quota; and names IndexedDB for async needs. Red flag: calling it a database or ignoring UI freezes.
How do loading.js and error.js integrate with Suspense and Error Boundaries?
Tests grasp of App Router conventions wrapping React primitives. loading.js suspends its segment for instant navigation feedback; error.js adds a client Error Boundary for child segment crashes. Wrong: assuming they are server-only or replace manual usage.
The polymorphic 'as' prop pattern
Render the element from an as prop, infer props from the chosen element, and forward refs.
Contrast SvelteKit file-system routing with Vue/Angular router configs
Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration.
Design a type-safe generic localStorage wrapper in TypeScript
Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety.
What are Next.js Route Groups and a practical use case?
Tests App Router conventions organizing routes without changing URLs. A good answer names parenthesized folders like (shop) removed from the path, cites multiple layouts per section, and keeps URLs clean. Red flag: confusing them with dynamic [slug] segments.
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