Frontend Developer Mid-Level Interview Preparation Guide (FAANG Standards)

Frontend Developer

Mid Level

7 rounds

Updated 6/20/2026

This guide is based on general FAANG interview practices and may not reflect specific company procedures.

FAANG companies typically conduct 6-8 interview rounds for mid-level frontend developers, progressing from recruiter screening through multiple technical evaluations (coding, UI implementation, and system design), behavioral assessment, and leadership conversations. Mid-level candidates are expected to demonstrate strong technical proficiency, ability to own projects end-to-end, mentorship of junior developers, and alignment with company culture. The interview process emphasizes problem-solving approach, communication, code quality, and growth trajectory.

Interview Rounds

Recruiter Screening

30 min3 focus topicsbehavioral

Technical Phone Screen (JavaScript Fundamentals)

60 min4 focus topicstechnical

What to Expect

First technical round conducted via video call, focusing on core JavaScript knowledge and basic problem-solving. Expect 1-2 coding problems of medium difficulty that test understanding of JavaScript fundamentals, data structures, and algorithms. May include live coding on a shared platform (CodePen, CoderPad, or similar). This round assesses whether you have strong foundational JavaScript knowledge required for more advanced rounds.

Tips & Advice

Think aloud throughout the problem-solving process. Start by clarifying the problem and edge cases before writing code. Write clean, readable code with meaningful variable names. Test your solution mentally with examples. If stuck, communicate your thinking and ask for hints rather than sitting silently. Optimize after getting a working solution if time permits. Practice on LeetCode medium-level problems and JavaScript-specific challenges (implementing Array methods, Promise polyfills, etc.).

Focus Topics

DOM Manipulation and Browser APIs

Understanding of DOM structure, methods for selecting and manipulating elements (querySelector, getElementById, etc.), event handling, and browser APIs relevant to frontend development.

Practice Interview

Study Questions

Array and Object Manipulation

Proficiency with array methods (map, filter, reduce, sort, find, etc.), object manipulation techniques, and common data transformation patterns. Understand time and space complexity of these operations.

Practice Interview

Study Questions

Problem Solving and Algorithm Thinking

Ability to break down problems into smaller steps, consider edge cases, and optimize solutions. Understand basic algorithmic concepts like sorting, searching, and time complexity analysis.

Practice Interview

Study Questions

JavaScript ES6+ Fundamentals

Master modern JavaScript syntax and features including arrow functions, destructuring, spread operator, template literals, let/const scoping, classes, async/await, Promises, and modules. Understand the event loop, closure, prototypal inheritance, and the this keyword in different contexts.

Practice Interview

Study Questions

Technical On-site Round 1 (Advanced JavaScript & Framework Expertise)

60 min5 focus topicstechnical

What to Expect

Second technical round (typically on-site or extended video interview) focusing on deeper JavaScript knowledge and framework expertise. Expect 1-2 coding problems that may involve implementing utilities, understanding framework concepts, or solving real-world frontend challenges. Questions may explore state management patterns, component lifecycle, hooks (if React), reactivity (if Vue), or dependency injection (if Angular).

Tips & Advice

Before the interview, review your most recent framework project in detail. Be prepared to discuss architectural decisions and trade-offs. Practice implementing utility functions commonly found in production (debounce, throttle, memoization, etc.). Understand async patterns deeply—how Promises chain, error handling in async/await, and race conditions. Prepare to explain how your chosen framework handles reactivity, component updates, and performance. Code with production quality in mind: error handling, edge cases, maintainability.

Focus Topics

Closures and Scope in Practical Context

Deep understanding of JavaScript closures, lexical scope, and how they apply to real patterns like event handlers, callbacks, custom hooks, and module patterns. Ability to identify and fix closure-related bugs.

Practice Interview

Study Questions

Performance Optimization Techniques

Practical techniques for optimizing frontend performance: memoization, React.memo, useMemo, useCallback hooks, code splitting, lazy loading, bundle optimization, and understanding rendering performance issues. Knowledge of tools like Chrome DevTools and Lighthouse.

Practice Interview

Study Questions

State Management Patterns

Understanding of different state management approaches: local component state, lifting state up, Context API, Redux/Vuex patterns, or other state libraries. Knowledge of when to use each approach and trade-offs between complexity and scalability.

Practice Interview

Study Questions

Asynchronous Programming and Promises

Complete mastery of Promises, async/await, error handling, race conditions, and common patterns like Promise.all(), Promise.race(), Promise.allSettled(). Understanding of callback patterns, event-driven architecture, and how async operations integrate with component lifecycle.

Practice Interview

Study Questions

React Fundamentals (or Vue/Angular depending on expertise)

Deep understanding of component architecture, hooks (useState, useEffect, useContext, useReducer, custom hooks), lifecycle methods, rendering optimization, and component composition patterns. Knowledge of controlled vs uncontrolled components, prop drilling vs context API, and when to use each pattern.

Practice Interview

Study Questions

Technical On-site Round 2 (UI Component Implementation & Practical Coding)

60 min6 focus topicstechnical

What to Expect

Third technical round focused on practical UI component implementation. You'll be asked to build a UI component or small application feature from scratch using HTML, CSS, and JavaScript (typically in your chosen framework). Examples include building an autocomplete dropdown, carousel, pagination component, form with validation, or similar. This round tests your ability to translate requirements into working code, handle edge cases, and produce production-quality UI.

Tips & Advice

Read the requirements carefully and ask clarifying questions before starting. Plan your approach: break the component into smaller pieces, think through state and event handling, then implement. Write semantic HTML first, then add styling and interactivity. Consider accessibility from the start (ARIA labels, keyboard navigation, screen reader compatibility). Test your implementation mentally or in the browser with edge cases. Write clean CSS—organize styles logically, avoid inline styles, consider responsiveness. For the JavaScript, handle events properly, manage component state clearly, and write reusable code. Leave time to refactor or optimize if the basic implementation is working.

Focus Topics

Cross-browser Compatibility and Testing

Knowledge of common browser compatibility issues, progressive enhancement, polyfills when needed, and testing across different browsers and devices. Understanding of how to use browser DevTools to debug issues.

Practice Interview

Study Questions

Component State Management and Props

Managing component state effectively, understanding when to use local state vs lifted state, prop passing, handling prop changes, and avoiding common pitfalls like stale closures or missing dependency arrays.

Practice Interview

Study Questions

Form Handling and Validation

Building forms with proper validation, error messaging, disabled states, and user feedback. Handling form submission, preventing double-submission, and integrating with backend APIs. Understanding controlled vs uncontrolled components in React context.

Practice Interview

Study Questions

Event Handling and User Interaction

Proper implementation of click handlers, form submissions, keyboard events, touch events, and event delegation. Understanding of event bubbling, event target, and how to handle events efficiently.

Practice Interview

Study Questions

Semantic HTML and Accessibility

Writing semantic, accessible HTML using appropriate elements (form, button, nav, article, etc.), ARIA attributes where needed, keyboard navigation support, screen reader compatibility, and inclusive design principles. Understanding of WCAG guidelines at a practical level.

Practice Interview

Study Questions

Responsive CSS and Layout

Mastery of CSS Grid, Flexbox, media queries, and responsive design principles. Understanding of CSS specificity, cascading, box model, and how to write maintainable CSS. Knowledge of CSS-in-JS approaches if using them. Ability to style components to match design specifications.

Practice Interview

Study Questions

System Design Round (Frontend Architecture & Scalability)

60 min5 focus topicssystem design

What to Expect

Focused on architectural thinking, scalability, and design patterns at the frontend level. You may be asked to design a system for a feature (e.g., designing a real-time notification system UI, building an infinite scroll implementation, architecting a complex form with multiple steps, or designing state management for a large application). This round tests your ability to think about scalability, performance, maintainability, and trade-offs. Unlike backend system design, frontend system design emphasizes user experience, performance, state management, and component architecture.

Tips & Advice

Start by understanding the requirements and constraints. Ask clarifying questions about scale, user expectations, performance requirements, and device support. Sketch your approach on a whiteboard or document—show component structure, data flow, state management approach. Discuss trade-offs: simplicity vs scalability, client-side vs server-side rendering, caching strategies, performance optimization techniques. Consider edge cases like network failures, loading states, error handling, and accessibility. Be prepared to dive deeper into specific areas (e.g., state management library selection, performance monitoring, testing strategy). For mid-level, demonstrate that you've thought about scaling beyond a simple solution.

Focus Topics

Testing Strategy and Error Handling

Planning a testing strategy for frontend systems: unit tests, integration tests, E2E tests, and the testing pyramid. Error boundaries, error recovery, graceful degradation, and user feedback mechanisms.

Practice Interview

Study Questions

Handling Real-time Data and Server Communication

Strategies for managing real-time updates (WebSockets, Server-Sent Events, polling), synchronizing state with backend, handling offline scenarios, conflict resolution, and optimistic UI updates. Understanding of caching and data consistency.

Practice Interview

Study Questions

Frontend Performance and Optimization

Strategies for optimizing performance: code splitting, lazy loading, caching (browser cache, CDN, memoization), bundling optimization, critical rendering path optimization, and monitoring tools. Understanding of Core Web Vitals and real user monitoring.

Practice Interview

Study Questions

State Management Strategy

Choosing appropriate state management solutions for different scenarios: local state for isolated components, lifted state for multiple components, Context API for shared state, or external libraries like Redux/Vuex for complex applications. Understanding when each approach is suitable.

Practice Interview

Study Questions

Component Architecture and Design Patterns

Designing scalable component hierarchies, understanding container vs presentational components, composition over inheritance, render props, higher-order components, or hooks patterns. Ability to break down complex UIs into manageable, reusable components.

Practice Interview

Study Questions

Behavioral Round (Project Ownership & Collaboration)

45 min5 focus topicsbehavioral

What to Expect

Focused on your past experiences, leadership qualities, teamwork, project ownership, and ability to mentor junior developers. Expect behavioral questions using the STAR method (Situation, Task, Action, Result). Questions typically explore: a challenging technical problem you solved, a time you took ownership of a project, conflict with a team member, mentoring a junior developer, learning something new, and handling ambiguous requirements. For mid-level, emphasize examples showing you own projects end-to-end, collaborate effectively, and develop others.

Tips & Advice

Prepare 5-7 concrete stories from your actual experience that demonstrate different competencies (ownership, learning, collaboration, problem-solving, mentorship). Use the STAR method: clearly set up the situation, explain your specific task/responsibility, describe the action you took (focus on 'I' not 'we'), and quantify the result. Be specific with metrics where possible (e.g., 'improved page load time by 40%', 'mentored 2 junior developers'). Practice telling these stories concisely—each should take 2-3 minutes. Show self-awareness: acknowledge mistakes honestly and explain what you learned. For mid-level, show examples of ownership (leading features, making technical decisions), not just individual contribution.

Focus Topics

Handling Ambiguity and Taking Initiative

Examples of working on projects with unclear requirements, how you clarified ambiguity, took initiative to propose solutions, and drove clarity in ambiguous situations.

Practice Interview

Study Questions

Technical Problem-Solving and Learning Agility

Examples of difficult technical problems you solved, your approach to understanding complex systems, how you troubleshoot issues, and examples of learning new technologies or frameworks on the job.

Practice Interview

Study Questions

Collaboration and Cross-functional Teamwork

Examples of working closely with designers, backend engineers, product managers, or other teams. How you communicate, handle disagreements professionally, and find solutions that balance different perspectives.

Practice Interview

Study Questions

Mentorship and Developing Others

Specific examples of mentoring junior developers: code reviews you led, teaching moments, helping someone grow technically, or onboarding them to projects. Show how you provide feedback, support growth, and improve code quality.

Practice Interview

Study Questions

Project Ownership and End-to-End Delivery

Examples of projects where you took ownership from design through deployment, made technical decisions, managed scope, handled setbacks, and delivered results. Demonstrate ability to see projects through completion and take accountability.

Practice Interview

Study Questions

Hiring Manager Round

45 min4 focus topicsbehavioral

What to Expect

Final round with the hiring manager or senior team member to assess overall fit, career aspirations, growth mindset, and alignment with team culture. This round is more conversational and less about technical testing. Expect questions about your career goals, what kind of problems interest you, how you prefer to work, your approach to code quality, and your understanding of the role's responsibilities. The hiring manager is assessing whether you'll be a good long-term fit and how you'll grow in the role.

Tips & Advice

Research the team, products, and impact they're working on. Prepare thoughtful questions about the role, team dynamics, growth opportunities, and company culture. Be authentic about your career interests and growth areas—this is not a time to oversell or pretend to be someone you're not. Show curiosity about the work and genuine enthusiasm. Listen carefully to the manager's description of the role and respond thoughtfully. Ask about the biggest technical challenges the team faces, the team's culture and working style, and opportunities for growth. Be honest about your strengths and areas for development.

Focus Topics

Understanding of Role Responsibilities

Demonstrate that you understand what mid-level frontend developers do at FAANG: own features end-to-end, mentor juniors, contribute to architectural decisions, and drive code quality. Show realistic expectations about the role.

Practice Interview

Study Questions

Cultural Fit and Values Alignment

Understanding and genuine alignment with company values (e.g., Amazon's Leadership Principles, Meta's values, Google's philosophy). Examples from your experience that demonstrate these values.

Practice Interview

Study Questions

Career Goals and Growth Mindset

Clear articulation of your career trajectory, where you want to go (senior IC, tech lead, architect), what skills you're developing, and how this role fits into your growth plan. Show commitment to continuous learning and improving.

Practice Interview

Study Questions

Code Quality and Engineering Excellence

Your philosophy on code quality, testing, refactoring, and continuous improvement. How you approach technical debt, code reviews, and maintaining high standards while shipping features.

Practice Interview

Study Questions

Frequently Asked Frontend Developer Interview Questions

JavaScript Scope, Closures and ContextEasyTechnical

32 practiced

Describe how JavaScript determines the value of this at runtime. Cover the common call-sites: global/function call, method call, constructor call (new), and explicit binding using call/apply/bind. For each case give a short code example and explain the resolved this value.

Sample Answer

**Global / Function call**- Rule: in non-strict mode, this -> global object (window). In strict mode, this -> undefined.

javascript

function fn() { console.log(this); }
fn(); // non-strict: window, strict: undefined

Explanation: plain function invocation sets no owner, so default binding applies.

**Method call**- Rule: this -> the object before the dot (the receiver).

javascript

const obj = { x: 1, getX() { return this.x; } };
obj.getX(); // this -> obj
const f = obj.getX;
f(); // this -> window/undefined (lost receiver)

Explanation: when called as obj.method(), the method's receiver is obj.

**Constructor call (new)**- Rule: new creates a fresh object; this -> the new instance.

javascript

function Person(name) { this.name = name; }
const p = new Person('Amy'); // this -> p

Explanation: new overrides other bindings and returns the constructed object (unless a different object is returned).

**Explicit binding (call / apply / bind)**- Rule: call/apply set this to the first arg; bind returns a function with permanently bound this.

javascript

function show() { console.log(this.id); }
const obj = { id: 42 };
show.call(obj); // logs 42
const bound = show.bind({ id: 7 });
bound(); // logs 7

Notes on precedence: new has higher precedence than call/apply when combined (new (f.bind(obj)) still creates a new this). Explicit call wins over default and method bindings; constructor binding wins over explicit unless you call bind then new (the new instance wins).

CSS Styling and Responsive DesignEasyTechnical

34 practiced

Explain the CSS box model and how margin, border, padding, and content area contribute to an element's total size and layout. Show a small CSS example that sets an application to use the 'border-box' sizing model globally and explain why border-box is often recommended for responsive layouts. Consider how percentage widths behave when padding and borders are present.

Example snippet:

css

*, *::before, *::after { box-sizing: border-box; }
.container { width: 50%; padding: 16px; border: 4px solid #000; }

Describe the expected computed width behavior for .container.

Sample Answer

**Explain the box model (brief)**

- The CSS box model composes an element from inside out: content → padding → border → margin.- The content area holds text/children. Padding adds space inside the border. Border wraps padding. Margin is outer spacing and does not affect the element’s internal width calculation.

**box-sizing and global rule**

css

/* Make sizing predictable: width includes padding and border */
*, *::before, *::after { box-sizing: border-box; }

.container { width: 50%; padding: 16px; border: 4px solid #000; }

**Why border-box is recommended for responsive layouts**- With border-box the declared width/height includes padding and border, so layout math is simpler: a 50% width stays 50% of the containing block regardless of padding/border.- Prevents accidental overflow and makes fluid layouts and grid gutters easier to reason about.

**How percentages behave**- Percentage widths are calculated relative to the containing block’s width.- Percentages used for horizontal padding/margins are also relative to the containing block width (not the element’s content).- With border-box, padding and border are subtracted from the declared width to produce the content width.

**Expected computed width for .container**- If the containing block is 1000px wide, width: 50% → total outer box (content + padding + border) = 500px.- Subtract horizontal padding (16px + 16px = 32px) and borders (4px + 4px = 8px): - content width = 500 - 32 - 8 = 460px.- Margin (if any) would sit outside that 500px and could affect layout/flow.

State Management and Data FlowMediumTechnical

32 practiced

Problem solving: Design a caching and staleness policy for a user dashboard that displays: (1) user profile (rarely changes), (2) notifications (frequently changing), and (3) real-time metrics (highly dynamic). Describe TTLs, revalidation strategies (stale-while-revalidate, cache-first, network-first), and when to refetch vs rely on cache. Include UX considerations for perceived latency.

Sample Answer

**Approach (brief)** I treat the dashboard as three data classes with different staleness requirements and choose a mix of cache strategies (cache-first, stale-while-revalidate, network-first) plus background revalidation and optimistic UI where appropriate. I'll use patterns available in SWR/react-query.

**Per-item policy**- **User profile (rarely changes)** - TTL: long (24h) in-memory + persistent (localStorage/indexedDB) for cold starts. - Strategy: cache-first with background revalidate on app launch or when user explicitly refreshes. - Refetch: only on profile-edit success or manual refresh.

- **Notifications (frequent)** - TTL: short (30–60s) in-memory. - Strategy: stale-while-revalidate — show cached list immediately, trigger background fetch; use web sockets / SSE for push to avoid polling when available. - Refetch: on visibility change (tab focus), on open of notifications panel, and via push events.

- **Real-time metrics (highly dynamic)** - TTL: effectively zero for hard metrics; use in-memory latest snapshot. - Strategy: network-first / streaming via WebSocket or Server-Sent Events; fall back to short-polling (5s) if streaming unavailable. - Refetch: continuous stream updates; if stream disconnects, attempt exponential backoff reconnection.

**Revalidation details**- Use stale-while-revalidate for medium-latency APIs (notifications): immediate UI then replace when fresh arrives.- For cache-first (profile): mark stale only after TTL; revalidate in background to keep startup snappy.- For metrics: prioritize network-first/stream to ensure accuracy.

**UX considerations**- Skeleton loaders for network-first content; keep profile instantly visible from cache to avoid layout shift.- Show subtle “updating” indicators during background refresh for notifications/metrics.- Use optimistic updates for actions (mark read) with rollback on failure.- Graceful degraded UX when offline: profile + last-known notifications visible; metrics show “stale at {time}”.

**Implementation hints**- Use react-query or SWR hooks with configured staleTime/cacheTime, and use WebSocket hooks for metrics. Expose timestamps for last refresh to aid user trust.

Semantic HTML and AccessibilityMediumTechnical

33 practiced

Show the HTML markup and ARIA attributes needed to create a sortable data table header. Explain how to expose sort direction with aria-sort, how to mark header scope, and what keyboard interactions should be supported to allow users to change the sort via keyboard and screen readers to perceive the change.

Sample Answer

**Approach**Use semantic <table> with <th scope="col"> containing a focusable control (button or link). Manage aria-sort on the th and support Enter/Space (activate) and Arrow keys for moving focus between headers. Optionally use an aria-live region to announce changes.

**HTML (markup + ARIA)**

html

<table>
  <thead>
    <tr>
      <th scope="col" aria-sort="none">
        <button class="sort-btn" aria-label="Sort by Name">Name</button>
      </th>
      <th scope="col" aria-sort="none">
        <button class="sort-btn" aria-label="Sort by Age">Age</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- rows -->
  </tbody>
</table>

<div id="sort-announcer" aria-live="polite" class="visually-hidden"></div>

**JS (keyboard + update)**

javascript

// attach handlers to buttons
const buttons = document.querySelectorAll('.sort-btn');
buttons.forEach(btn => {
  btn.addEventListener('click', toggleSort);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSort(e); }
    if (e.key === 'ArrowRight') focusAdjacent(btn, 1);
    if (e.key === 'ArrowLeft') focusAdjacent(btn, -1);
  });
});

function toggleSort(e){
  const th = e.currentTarget.closest('th');
  const current = th.getAttribute('aria-sort') || 'none';
  const next = current === 'ascending' ? 'descending' : 'ascending';
  // clear other headers
  document.querySelectorAll('th[scope="col"]').forEach(h => h.setAttribute('aria-sort','none'));
  th.setAttribute('aria-sort', next);
  document.getElementById('sort-announcer').textContent = `Sorted by ${e.currentTarget.textContent} ${next}`;
  // perform sorting of tbody here...
}

function focusAdjacent(btn, dir){
  const list = Array.from(buttons);
  const i = list.indexOf(btn);
  const next = (i + dir + list.length) % list.length;
  list[next].focus();
}

**Explanation & best practices**- Use scope="col" to declare header semantics for assistive tech and table navigation.- aria-sort values: "none" | "ascending" | "descending" | "other". Update on state change so screen readers announce sort when header has focus.- Put an interactive element (button) inside th so it is keyboard-focusable and exposed to screen readers.- Support Enter/Space to activate, ArrowLeft/ArrowRight to move between headers (WAI-ARIA Authoring Practices for grid-like tables). Optionally support Home/End.- Use an aria-live region to announce the new sort when focus remains elsewhere (helpful for some screen readers).- Ensure visible focus styles, and update table rows after sorting for visual users.

Cross Functional Collaboration and CoordinationMediumSystem Design

48 practiced

Design a release plan for a UI feature that requires coordinated DB migration, backend changes, frontend code, and ops deployment to multiple regions. Include timeline, cutover steps, rollback plan, verification steps, and who signs off at each stage.

Sample Answer

**Overview & Assumptions**Feature requires DB schema change (add nullable column + backfill), backend API v2, frontend UI + feature flag, and ops deployment to 4 regions. Goal: zero-downtime, reversible rollout.

**Timeline (3 weeks)**- Week 0–1: Design, API contract, migration plan, feature-flag gating- Week 1: DB migration (add column), backend v2 behind flag, frontend behind flag (staging)- Week 2: Canary region rollout (region A), verification 48–72h- Week 3: Progressive rollout to remaining regions (B → C → D) with 24h gaps

**Cutover steps**1. Create migration that adds nullable column + no destructive changes. Run on all DB replicas.2. Deploy backend v2 with feature flag OFF; keep v1 serving.3. Deploy frontend referencing v2 shapes but gated behind feature flag; push to staging, run E2E.4. Backfill data asynchronously (low priority).5. Enable feature flag in Canary region; route subset of users.6. Monitor metrics and logs; if good, enable per-region sequentially.

**Rollback plan**- Immediate: Turn feature flag OFF (frontend/backend revert to v1 behavior).- If DB change must be reverted: ensure reversible migration path; restore from backup and stop writes to new column; escalate to SRE/DB owner.- Maintain fast rollback scripts for backend and CDN invalidation.

**Verification**- Automated: E2E smoke tests, integration tests against staging.- Runtime: Key KPIs (error rate, latency, 5xxs), frontend UX checks, synthetic transactions, logs for API contract mismatches.- Manual: QA exploratory in canary region, UX sign-off on visuals, accessibility checks.

**Sign-offs**- DB Owner: migration plan + backup strategy (pre-migration)- Backend Lead: API contract & backwards compatibility- Frontend Lead (you): staging UI, responsive + accessibility checks- QA Lead: test coverage & pass on staging- SRE/Operations: deployment playbook, rollback scripts, monitoring- Product Manager: business acceptance for each region go/no-go

**Notes (frontend specifics)**- Use feature flag + client-side gating to avoid hard release.- Ship UI behind flags and toggle without redeploy.- CDN invalidation plan and client cache TTLs considered to prevent stale bundles.

Document Object Model and Event HandlingHardTechnical

22 practiced

Design an event instrumentation and analytics pipeline for recording user interactions (clicks, form submissions, scroll positions) that minimizes impact on UI responsiveness. Discuss batching, sampling, navigator.sendBeacon, use of web workers, data privacy (PII), offline persistence, retries, and how to measure and minimize instrumentation overhead.

Sample Answer

**Approach summary**Design a low-latency, low-overhead client pipeline that captures events in the page, queues & batches them in a worker, persists to IndexedDB when offline, and sends via navigator.sendBeacon or fetch-from-worker with exponential retry. Protect PII by client-side scrubbing and schema/versioning.

**Architecture & components**- Page (main thread): lightweight capture only — collect minimal fields, timestamp, event-type, element-id (no innerText), sessionId.- Web Worker: receives events via postMessage, performs batching, sampling, compression, and sends.- Persistence: IndexedDB in worker for offline buffer and resume after reconnect.- Transport: navigator.sendBeacon for unload/visibilitychange; fetch from worker for regular sends with retry/backoff.

**Implementation patterns**- Capture: use passive listeners, debounce high-frequency events (scroll) and sample (e.g., 1% or dynamic). Use requestAnimationFrame for scroll sampling.- Batching: batch by time (e.g., 5s) or size (e.g., 50 events); flush on important triggers.- sendBeacon example:

javascript

// from main thread or worker (if supported)
const payload = JSON.stringify(batch);
navigator.sendBeacon('/ingest', new Blob([payload], { type: 'application/json' }));

**Retries & offline**- Worker persists batches to IndexedDB; on network failure schedule exponential backoff and retry; mark failed batches to avoid clogging.- On reconnect or app resume, flush stored batches.

**Privacy & PII**- Enforce a strict schema: allowed fields only. Strip text content, input values, and any identifiers unless hashed/salted.- Provide client opt-out and respect Do Not Track; store minimal user identifiers and rotate/expire session IDs.- Use TLS, signed payloads, and server-side validation.

**Measuring & minimizing overhead**- Instrument and measure: - CPU: measure event handler execution time (performance.now()) and log if > threshold. - Latency: track time from user action to handler return. - Network: payload sizes, compression ratio, send times. - RUM and synthetic tests to compare with instrumentation off.- Minimize overhead: - Keep handlers micro (push to worker only). - Use passive listeners and requestIdleCallback when appropriate. - Sample and aggregate high-frequency events. - Limit batch size and compress payloads (gzip at server or use compact binary format). - Feature-flag instrumentation to roll out gradually.

**Trade-offs**- sendBeacon is reliable on unload but limited in size; fetch-from-worker gives more control/error handling.- Aggressive sampling reduces fidelity but improves responsiveness and cost.

This design keeps UI work minimal, moves heavy tasks off-thread, safeguards privacy, and ensures reliable delivery with measurable, controllable overhead.

Individual Mentoring and CoachingEasyTechnical

32 practiced

You have a limited mentorship bandwidth and three mentees who want frontend guidance on different topics. Describe a framework you would use to prioritize which topics to address first and how you would allocate your time over a month.

JavaScript Scope, Closures and ContextEasyTechnical

25 practiced

Given the following JavaScript code:

for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 10);}

Explain the observed output. Then rewrite the loop so the callbacks log 0, 1, 2 (in any order) without changing the timeout. Implement the fix in vanilla JavaScript and explain why your solution works.

Sample Answer

**Brief explanation**The loop prints "3" three times because var is function-scoped. By the time the setTimeout callbacks run, the loop finished and i === 3; each callback closes over the same i.

**Fix — using let (block scope)**

javascript

for (let i = 0; i < 3; i++) {
  setTimeout(function () { console.log(i); }, 10);
}

**Fix — using an IIFE (closure)**

javascript

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(function () { console.log(j); }, 10);
  })(i);
}

**Why it works**let creates a fresh binding per iteration so each callback sees the correct i. The IIFE captures the current i as j (function argument), creating a stable copy for each callback. Both preserve values without changing the timeout.

CSS Styling and Responsive DesignEasyTechnical

30 practiced

Describe how the srcset and sizes attributes work for responsive images and when to use the <picture> element for art-direction. Provide an example using srcset to serve 1x/2x images and a picture fallback for a different crop on small screens.

Sample Answer

**How srcset and sizes work (brief)**

- srcset lists candidate images with descriptors (w for width or x for pixel density). The browser picks the best candidate based on device DPR and layout.- sizes tells the browser the image’s rendered width in CSS units for different viewport conditions so it can choose the correct w candidate before layout.

**When to use <picture> (art-direction)**

- Use <picture> when you need different crops/compositions or formats per breakpoint (not just different resolutions). <picture> sources are evaluated in order; the first matching media+type is used.

**Example: 1x/2x srcset + picture fallback for a different crop on small screens**

html

<picture>
  <!-- Small screens: different crop -->
  <source media="(max-width:600px)"
          srcset="img-small-1x.jpg 1x, img-small-2x.jpg 2x">
  <!-- Default: same crop but serve 1x/2x based on DPR -->
  <img src="img-default-1x.jpg"
       srcset="img-default-1x.jpg 1x, img-default-2x.jpg 2x"
       alt="Product shot"
       width="800" height="600">
</picture>

Notes:- Use w descriptors + sizes when image width varies; use x descriptors for simple 1x/2x DPR swaps.- Always include a fallback <img> for older browsers and accessibility.

State Management and Data FlowEasyTechnical

71 practiced

Technical coding (JavaScript/React): Implement a reducer function for a todo-list app. The reducer should handle actions: 'ADD_TODO' (adds an item with id and text), 'TOGGLE_TODO' (toggles completed boolean by id), and 'REMOVE_TODO'. Write the reducer as a pure function that updates state immutably. No UI required—just the reducer implementation in JavaScript.

Sample Answer

**Approach (brief)** Write a pure reducer that accepts current state (array of todos) and an action. Return a new array; never mutate inputs. Use map/filter for immutable updates and ensure IDs are unique when adding.

**Reducer implementation**

javascript

// todosReducer.js
// state: Array of { id: string|number, text: string, completed: boolean }
export default function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO': {
      const { id, text } = action.payload;
      if (id == null || typeof text !== 'string') return state; // validation
      // return new array with new todo appended
      return [...state, { id, text, completed: false }];
    }

    case 'TOGGLE_TODO': {
      const { id } = action.payload;
      return state.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      );
    }

    case 'REMOVE_TODO': {
      const { id } = action.payload;
      return state.filter(todo => todo.id !== id);
    }

    default:
      return state;
  }
}

**Notes / Complexity / Tests**- Time: O(n) per action (map/filter). Space: O(n) for returned array.- Edge cases: invalid payloads, duplicate ids (ADD doesn't check uniqueness), removing non-existent id (no-op).- Unit tests: ensure immutability (original array unchanged), correct toggling, adding, removing.

Practice Frontend Developer questions across all topics

Additional Information

Want to create your own tailored preparation guide using our deep research?

Get Started for Free

Interview-Ready Courses

Visual-first, interactive, structured learning paths

Browse Frontend Developer jobs

AI-enriched listings across hundreds of company career pages

Explore Jobs

Frontend Developer Mid-Level Interview Preparation Guide (FAANG Standards)

Interview Process Overview

Interview Rounds

Recruiter Screening

What to Expect

Tips & Advice

Focus Topics

Technical Stack Familiarity

Practice Interview

Study Questions

Motivation and Company Alignment

Practice Interview

Study Questions

Career Background and Progression

Practice Interview

Study Questions

Technical Phone Screen (JavaScript Fundamentals)

What to Expect

Tips & Advice

Focus Topics

DOM Manipulation and Browser APIs

Practice Interview

Study Questions

Array and Object Manipulation

Practice Interview

Study Questions

Problem Solving and Algorithm Thinking

Practice Interview

Study Questions

JavaScript ES6+ Fundamentals

Practice Interview

Study Questions

Technical On-site Round 1 (Advanced JavaScript & Framework Expertise)

What to Expect

Tips & Advice

Focus Topics

Closures and Scope in Practical Context

Practice Interview

Study Questions

Performance Optimization Techniques

Practice Interview

Study Questions

State Management Patterns

Practice Interview

Study Questions

Asynchronous Programming and Promises

Practice Interview

Study Questions

React Fundamentals (or Vue/Angular depending on expertise)

Practice Interview

Study Questions

Technical On-site Round 2 (UI Component Implementation & Practical Coding)

What to Expect

Tips & Advice

Focus Topics

Cross-browser Compatibility and Testing

Practice Interview

Study Questions

Component State Management and Props

Practice Interview

Study Questions

Form Handling and Validation

Practice Interview

Study Questions

Event Handling and User Interaction

Practice Interview

Study Questions

Semantic HTML and Accessibility

Practice Interview

Study Questions

Responsive CSS and Layout

Practice Interview

Study Questions

System Design Round (Frontend Architecture & Scalability)

What to Expect

Tips & Advice

Focus Topics

Testing Strategy and Error Handling

Practice Interview

Study Questions