🌐 Frontend Dev

What is a Svelte Action? Write a simple logging action.

Define a function receiving the node, log a message, and optionally return destroy.

How to create a singleton Angular auth service

Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.

How do you implement a data-fetching Composable in Vue 3?

Write useFetch accepting a URL, exposing data, loading, and error refs, then return them.

How do you manage router scroll behavior and history position restoration?

Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays.

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.

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 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 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.

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.

How do you create a dynamic route and access the id parameter?

This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.

Create a template link to a route without a full page reload

Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.

How do you define a basic Vue or Angular route?

Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.

Build a reactive data-fetching utility with Svelte stores

Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.

Differentiate client state from server state and their tools

This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.

How would you cache data between a list and detail view?

Use nested keys so detail reads from list cache with staleTime to skip refetches.

Implement optimistic UI for a like button with rollback on failure

Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.

Fetch data on first render and manage loading and error states

Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.

Share state between sibling components without a state library

Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.

What is prop drilling and when is it a problem?

Define it as passing data through components that ignore it; move to global state when unrelated branches need same data.