90-Day Senior Frontend Interview Plan

javascript core day 1/8

• · Read deeply, take notes

• How would you write a custom implementation of Function.prototype.bind?javascript · easy
• How would you write a polyfill for Function.prototype.bind that supports new?javascript · easy
• What algorithm does Array.prototype.sort use, and what is the output of sorting an array with null and undefined?javascript · easy

javascript core day 2/8

• · Reproduce answers from memory

• What are common interview questions that combine closures and currying?javascript · easy
• What are truthy and falsy values in JavaScript, and what are the common equality quirks?javascript · easy
• What does the new operator do in JavaScript?javascript · easy

javascript core day 3/8

• · Reproduce answers from memory

• What is a closure and where have you used one in practice?javascript · easy
• What is currying in JavaScript and when would you use it?javascript · easy
• What is hoisting in JavaScript and what is the temporal dead zone?javascript · easy

javascript core day 4/8

• · Reproduce answers from memory

• What is the difference between currying and partial application in JavaScript?javascript · easy
• What is the difference between the nullish coalescing operator and logical OR in JavaScript?javascript · easy
• Why do you want to join this company?behavioral · easy

javascript core day 5/8

• · Reproduce answers from memory

• Can you explain how this, call, apply, and bind relate in JavaScript?javascript · medium
• How would you implement a polyfill for Function.prototype.bind?javascript · medium
• What are closures in JavaScript and why are they useful?javascript · medium

javascript core day 6/8

• · Reproduce answers from memory

• What is the difference between a deep copy and a shallow copy, and how do you achieve each?javascript · medium
• What are the differences between var, let, and const in JavaScript?javascript · easy
• Can you explain the prototype chain and prototypal inheritance in JavaScript?javascript · medium

javascript core day 7/8

• · Reproduce answers from memory

• How would you implement currying for an infinite sum like sum(10)(20)(30)()?javascript · medium
• What is the difference between shallow copy and structural sharing?javascript · medium
• How do the spread and rest operators and destructuring work, and where do they bite you?javascript · easy

javascript core day 8/8

• · Reproduce answers from memory

• How would you flatten a deeply nested array of arbitrary depth without using Array.prototype.flat?javascript · easy
• When should you reach for Map versus a plain Object in JavaScript?javascript · easy
• Why does deleting object properties hurt V8 optimization?browser-internals · hard

async javascript day 1/6

• · Read deeply, take notes

• How would you implement limitConcurrency(tasks, limit) using a worker pool pattern?javascript · easy
• How would you implement memoization for an async function with caching, deep equality, and parallel calls?javascript · easy
• How would you write a curried multiplication function where mul(2)(3)(4) equals 24?javascript · easy

async javascript day 2/6

• · Reproduce answers from memory

• How would you implement throttling in JavaScript?javascript · medium
• How would you predict execution order in a snippet that mixes sync code, setTimeout, and Promises?javascript · medium
• What is the difference between npm and yarn?javascript · medium

async javascript day 3/6

• · Reproduce answers from memory

• What is a Promise in JavaScript, how do you resolve one, and what are common use cases?javascript · medium
• When should you not use map, filter, or reduce in JavaScript?javascript · medium
• Can you explain closures, hoisting, the event loop, and currying in JavaScript?javascript · easy

async javascript day 4/6

• · Reproduce answers from memory

• How do you approach output prediction questions involving Promises and async behavior?javascript · easy
• How do you cancel an in flight fetch request in JavaScript?javascript · easy
• How do you handle errors in asynchronous JavaScript code?javascript · easy

async javascript day 5/6

• · Reproduce answers from memory

• How do you use typeof and instanceof, and what is reliable type checking in JavaScript?javascript · easy
• How does object reference comparison differ from primitive comparison in JavaScript?javascript · easy
• How would you execute a list of Promises in series without any parallelism?javascript · easy

async javascript day 6/6

• · Reproduce answers from memory

• How would you find the sum of numbers in an array without using a for loop?javascript · easy
• How would you flatten a nested array with custom ordering, top level first then nested?javascript · easy
• How would you implement a basic debounce function without using any library?javascript · easy

browser rendering day 1/5

• · Read deeply, take notes

• What happens when you hit a URL in the browser, and what is the Critical Rendering Path?browser-internals · medium
• What is client side rendering and when is it the right choice?performance · medium
• What is Largest Contentful Paint, what slows it down, and how do you fix it?performance · medium

browser rendering day 2/5

• · Reproduce answers from memory

• What is Cumulative Layout Shift and how do you control it?performance · medium
• What is the Critical Rendering Path and how does the browser render a page?browser-internals · medium
• What is the difference between reflow and repaint, and when does each happen in the browser?browser-internals · medium

browser rendering day 3/5

• · Reproduce answers from memory

• What triggers garbage collection in JavaScript engines?browser-internals · medium
• When would you reach for absolute, fixed, or sticky positioning in a real layout?css · medium
• Which CSS properties should you avoid animating, and why prefer transform and opacity?performance · medium

browser rendering day 4/5

• · Reproduce answers from memory

• Why does the viewport meta tag matter for mobile UI rendering?css · medium
• Why is transform preferred over animating layout properties for smooth animations?performance · medium
• Why might you choose Tailwind CSS over Bootstrap or traditional CSS?css · medium

browser rendering day 5/5

• · Reproduce answers from memory

• Would you use Flexbox or CSS Grid for an e commerce product layout with three columns?css · medium
• You need to render a large dataset without blocking the main thread. How do you approach it?performance · medium
• Can you walk through the CSS box model from content to margin?css · easy

dom day 1/5

• · Read deeply, take notes

• How do CORS preflight requests and SameSite cookies work together?networking · easy
• How do event delegation and bubbling work together in the DOM?browser-internals · easy
• How does event propagation work in the DOM, and what is bubbling versus capturing?browser-internals · easy

dom day 2/5

• · Reproduce answers from memory

• How does the srcset attribute work and when would you use it for responsive images?html · easy
• How would you implement a DOM like data structure in JavaScript?javascript · easy
• How would you persist cart state across page refreshes using localStorage?machine-coding · easy

dom day 3/5

• · Reproduce answers from memory

• If you store data in localStorage on one domain, can another domain access it?browser-internals · easy
• What are ETag, Cache Control, and DocumentFragment, and where are each used?browser-internals · easy
• What are the differences between localStorage, sessionStorage, cookies, and IndexedDB?browser-internals · easy

dom day 4/5

• · Reproduce answers from memory

• What are the risks of storing an auth token in localStorage, and what should you do instead?security · easy
• What are the web storage APIs, and how do localStorage, sessionStorage, and cookies differ?browser-internals · easy
• What happens in the browser between a button click and the network request leaving the machine?browser-internals · easy

dom day 5/5

• · Reproduce answers from memory

• What is a service worker and what role does it play in the browser?browser-internals · easy
• What is the difference between ReactDOM.render and createRoot in React 18?react · easy
• Which PWA features can you use to improve user experience?browser-internals · easy

react basics day 1/8

• · Read deeply, take notes

• What is the difference between shallow and deep comparison in React's shouldComponentUpdate?react · medium
• Why do array indices make bad keys in React lists?react · medium
• Why do we need the dependency array in useEffect?react · medium

react basics day 2/8

• · Reproduce answers from memory

• When should you avoid reaching for useEffect in React?react · medium
• Why do React keys matter, and how do bad keys break applications?react · medium
• Why do we need the useRef hook in React?react · medium

react basics day 3/8

• · Reproduce answers from memory

• Why do we need keys in React lists?react · medium
• Can you walk through DNS resolution, TCP, and TLS in the HTTP request lifecycle?networking · easy
• Describe a time you took ownership of a project beyond your formal responsibility.behavioral · easy

react basics day 4/8

• · Reproduce answers from memory

• How do class lifecycle methods map to useEffect in React?react · easy
• How do you design good validation UX in complex forms?react · easy
• How do you write clean, maintainable component logic in React?react · easy

react basics day 5/8

• · Reproduce answers from memory

• How would you approach building a To Do app in a machine coding round?machine-coding · easy
• How would you build a custom dropdown component in React?machine-coding · easy
• How would you build a debounced search autocomplete component?machine-coding · easy

react basics day 6/8

• · Reproduce answers from memory

• How would you build a drag and drop feature in a web app?machine-coding · easy
• How would you build a dynamic N by M grid component in React?machine-coding · easy
• How would you build a file explorer UI component?machine-coding · easy

react basics day 7/8

• · Reproduce answers from memory

• How would you build a login form covering structure, state, validation, accessibility, and security?machine-coding · easy
• How would you build a login form with validation and state management?machine-coding · easy
• How would you build a modal component from scratch?machine-coding · easy

react basics day 8/8

• · Reproduce answers from memory

• How would you build a multi step form with validation across steps?machine-coding · easy
• How would you build a priority based modal system?machine-coding · easy
• How would you build a real time cursor tracker component?machine-coding · easy

react internals day 1/6

• · Read deeply, take notes

• How do you use React.lazy and Suspense to load components only when needed?react · medium
• How does React's reconciliation process update the DOM efficiently?react · medium
• How would you lazy load components with React.lazy and Suspense inside protected routes?react · medium

react internals day 2/6

• · Reproduce answers from memory

• What are React synthetic events and how do they differ from native DOM events?react · medium
• What is server side rendering in Next.js and how does it work?nextjs · medium
• How would you build concurrent progress bars for multiple tasks running in parallel?machine-coding · easy

react internals day 3/6

• · Reproduce answers from memory

• What are the benefits of server side rendering in React applications?react · easy
• What are the differences between server side rendering and client side rendering?performance · easy
• What is hydration in server side rendering?react · easy

react internals day 4/6

• · Reproduce answers from memory

• Can you explain React Fiber in depth?react · hard
• How do you use React.lazy and Suspense for component level code splitting?react · medium
• How does React's reconciliation and Virtual DOM decide what to update?react · medium

react internals day 5/6

• · Reproduce answers from memory

• What causes hydration mismatches in Next.js and how do you fix them?nextjs · medium
• How do concurrent rendering and transitions work in React 18?react · hard
• What are the concurrent features introduced in React 18 and why do they matter?react · medium

react internals day 6/6

• · Reproduce answers from memory

• Why does React StrictMode behave differently in development versus production?react · medium
• How does event handling work in React, and how does it differ from native DOM events?react · easy
• How does React's Fiber reconciliation algorithm work internally, and how does it improve rendering performance?react · hard

react performance day 1/6

• · Read deeply, take notes

• How would you protect routes based on user roles, for example admin versus user?react · medium
• How would you queue toasts so they do not all stack at once?react · medium
• How would you show a fallback UI on a per route basis in a React app?react · medium

react performance day 2/6

• · Reproduce answers from memory

• How would you re render a React component when the window is resized?react · medium
• How would you structure error boundaries so they exist both per page and at the global level?react · medium
• In an e commerce product listing where multiple users add to cart, how would you use React Query or SWR with optimistic updates to prevent stale UI?react · medium

react performance day 3/6

• · Reproduce answers from memory

• What are React Fragments and why would you use them?react · medium
• What are React Portals and when would you use them?react · medium
• What causes unnecessary re renders in React and how do you prevent them?react · medium

react performance day 4/6

• · Reproduce answers from memory

• What does forwardRef do in React, and when would you reach for useImperativeHandle?react · medium
• What is lazy loading in React and how does it improve application performance?react · medium
• What is React Strict Mode and how does it affect development?react · medium

react performance day 5/6

• · Reproduce answers from memory

• What is state colocation in React and why does it matter?react · medium
• What is the role of React Router, and how does it work with dynamic routing?react · medium
• When do function declarations versus arrow functions actually impact performance?javascript · medium

react performance day 6/6

• · Reproduce answers from memory

• When does memoization help and when does it hurt React performance?react · medium
• When should you use refs instead of state in React?react · medium
• Why do functional state updates matter inside useCallback with empty dependencies?react · medium

state management day 1/5

• · Read deeply, take notes

• How would you pass data between sibling components in React without using Redux?react · medium
• What is RTK Query and how does it differ from Axios or fetch?networking · medium
• What is your strategy for managing global state efficiently in a React app with multiple teams contributing?react · medium

state management day 2/5

• · Reproduce answers from memory

• Have you worked with state management libraries like Zustand, and how do they compare to Redux?react · easy
• How do you structure code and state management in a frontend application?react · easy
• How would you implement a simplified pub sub or selector dispatch state subscription system?javascript · easy

state management day 3/5

• · Reproduce answers from memory

• What are the trade offs between Redux, Zustand, and Context for state management?react · easy
• What is Redux, and how do you create a Redux Toolkit slice?react · easy
• What is the difference between Redux and Redux Toolkit?react · easy

state management day 4/5

• · Reproduce answers from memory

• What is your experience with Redux, Redux Toolkit, or other state management libraries?react · easy
• When should you use React Context, Redux, or Zustand for state management?react · medium
• How would you implement a pub sub or event emitter from scratch?javascript · medium

state management day 5/5

• · Reproduce answers from memory

• How do sibling components communicate in React without prop drilling or Redux?react · easy
• How would you design a client side state management system like Redux Toolkit?system-design · hard
• How would you layer state management across local, URL, server, and shared client state?system-design · hard

networking day 1/5

• · Read deeply, take notes

• Why use WebSockets instead of HTTP polling for real time features?networking · medium
• Have you used Axios, and what are interceptors and when should you use them?networking · easy
• How do you build real time features using WebSockets or Server Sent Events?networking · easy

networking day 2/5

• · Reproduce answers from memory

• What role do HTTP headers play in requests and responses?networking · easy
• When should you use WebSockets, Server Sent Events, or polling?networking · medium
• How do you cancel previous API requests when newer ones supersede them?networking · medium

networking day 3/5

• · Reproduce answers from memory

• How do you cancel stale API calls when a user clicks a button multiple times?networking · medium
• How do you handle API rate limits gracefully from the frontend?networking · medium
• How do you handle rate limiting and large payloads when consuming AI services?networking · medium

networking day 4/5

• · Reproduce answers from memory

• What is CORS and how does it work in the browser?networking · medium
• Why use WebSockets instead of HTTP polling for real time features?networking · medium
• Why use WebSockets instead of HTTP polling for real time features?networking · medium

networking day 5/5

• · Reproduce answers from memory

• Why use WebSockets instead of HTTP polling for real time features?networking · medium
• Why use WebSockets instead of HTTP polling for real time features?networking · medium
• Why use WebSockets instead of HTTP polling for real time features?networking · medium

typescript day 1/4

• · Read deeply, take notes

• When should you use interface versus type in TypeScript?typescript · easy
• How does TypeScript enhance React development in practice?react · medium
• How do generics, utility types, and narrowing work together in TypeScript?typescript · medium

typescript day 2/4

• · Reproduce answers from memory

• When should you use interface versus type in TypeScript?typescript · easy
• When should you use interface versus type in TypeScript?typescript · easy
• How does TypeScript enhance React development in practice?react · medium

typescript day 3/4

• · Reproduce answers from memory

• When should you use interface versus type in TypeScript?typescript · easy
• When should you use interface versus type in TypeScript?typescript · easy
• How does TypeScript enhance React development in practice?react · medium

typescript day 4/4

• · Reproduce answers from memory

• When should you use interface versus type in TypeScript?typescript · easy
• When should you use interface versus type in TypeScript?typescript · easy
• How does TypeScript enhance React development in practice?react · medium

performance optimization day 1/7

• · Read deeply, take notes

• What challenges have you faced when building frontends for large user traffic?performance · medium
• What is lazy loading and how would you implement it?performance · medium
• What is Total Blocking Time, and how do you reduce main thread blocking?performance · medium

performance optimization day 2/7

• · Reproduce answers from memory

• Your app feels slow but Lighthouse score is good. Why might that be?performance · medium
• How do preload, prefetch, and lazy loading differ in browser behavior?performance · easy
• How would you implement debounced inputs to improve perceived performance?performance · easy

performance optimization day 3/7

• · Reproduce answers from memory

• How would you return an array of sorted unique elements from an input array?dsa-algorithms · easy
• How would you safely serialize user input before inserting it into the DOM?security · easy
• What are resource hints such as preload, prefetch, dns prefetch, and preconnect?performance · easy

performance optimization day 4/7

• · Reproduce answers from memory

• What are the differences between CSR, SSR, and streaming rendering?performance · easy
• What do preload, preconnect, prefetch, and prerender do for page load performance?performance · easy
• What HTTP caching strategies do you use to keep a frontend fast?performance · easy

performance optimization day 5/7

• · Reproduce answers from memory

• What is Time to First Byte and how do you measure and improve it?performance · easy
• What strategies would you use to improve page load time for a global audience?performance · easy
• Which frontend performance metrics do you track in production?performance · easy

performance optimization day 6/7

• · Reproduce answers from memory

• How do you optimize Core Web Vitals on a production site?performance · medium
• What are the Core Web Vitals (LCP, INP, CLS) and how do you optimize each?performance · medium
• When should you use SSR, SSG, or CSR for a web application?performance · medium

performance optimization day 7/7

• · Reproduce answers from memory

• How do you defend against CSRF and implement a token refresh flow?security · medium
• How do you optimize the loading of third party scripts on your site?performance · medium
• How do you reduce Time to Interactive on a page?performance · medium

security day 1/5

• · Read deeply, take notes

• How would you implement token based authentication (such as JWT) and handle token expiry?security · medium
• Why are noopener and noreferrer important on anchor tags with target blank?security · medium
• How do you avoid common XSS pitfalls in modern frontend frameworks?security · easy

security day 2/5

• · Reproduce answers from memory

• What breaks when a strict CSP blocks inline scripts and frame sources?security · easy
• How do you prevent XSS in React applications?security · medium
• How do you ensure secure handling of sensitive user data on the client side?security · medium

security day 3/5

• · Reproduce answers from memory

• How do you handle authentication and authorization in frontend applications?security · medium
• How do you implement role based access control on the frontend?security · medium
• How do you prevent a malicious parent page from spoofing a payment success event in an embedded widget?security · medium

security day 4/5

• · Reproduce answers from memory

• How do you secure a frontend application against common attacks?security · medium
• How would you implement token based authentication (such as JWT) and handle token expiry?security · medium
• Why are noopener and noreferrer important on anchor tags with target blank?security · medium

security day 5/5

• · Reproduce answers from memory

• How would you implement token based authentication (such as JWT) and handle token expiry?security · medium
• Why are noopener and noreferrer important on anchor tags with target blank?security · medium
• Why are noopener and noreferrer important on anchor tags with target blank?security · medium

accessibility day 1/4

• · Read deeply, take notes

• How would you build an accessible modal with focus trapping and ARIA?accessibility · easy
• What are the common variants of binary search you should know for interviews?dsa-algorithms · easy
• What is the purpose of the alt attribute on images?accessibility · easy

accessibility day 2/4

• · Reproduce answers from memory

• Why does using semantic HTML improve accessibility?accessibility · easy
• What are the key accessibility practices every frontend engineer should know?accessibility · medium
• How would you implement accessibility at scale across a large React application?accessibility · hard

accessibility day 3/4

• · Reproduce answers from memory

• How do you ensure a web application is accessible to screen reader users?accessibility · medium
• How should screen readers announce new toast notifications?accessibility · medium
• How would you enforce WCAG compliance across multiple frontend teams?accessibility · medium

accessibility day 4/4

• · Reproduce answers from memory

• What is WCAG and how do you apply it in a production frontend codebase?accessibility · medium
• What are the common variants of binary search you should know for interviews?dsa-algorithms · easy
• What are the common variants of binary search you should know for interviews?dsa-algorithms · easy

testing day 1/4

• · Read deeply, take notes

• How would you approach end to end testing with Cypress or Playwright?testing · medium
• How would you implement A/B testing on the frontend without affecting current users?system-design · medium
• What tools would you use for frontend testing, and why?testing · medium

testing day 2/4

• · Reproduce answers from memory

• How do you cancel old API calls using the take latest pattern in React?react · medium
• How would you design a testing strategy for a frontend application?testing · medium
• How do pure functions help you write testable frontend code?system-design · hard

testing day 3/4

• · Reproduce answers from memory

• How do you run A/B tests in React applications?react · medium
• How do you test React components and API flows using Jest and React Testing Library?testing · medium
• How do you write unit tests in React using Jest and React Testing Library?testing · medium

testing day 4/4

• · Reproduce answers from memory

• How would you approach end to end testing with Cypress or Playwright?testing · medium
• How would you approach end to end testing with Cypress or Playwright?testing · medium
• How would you approach end to end testing with Cypress or Playwright?testing · medium

build tools day 1/4

• · Read deeply, take notes

• How do you maintain backward compatibility for a published JavaScript package?system-design · easy
• How should a published JavaScript library handle ESM versus CJS output?system-design · easy
• What are dynamic imports in JavaScript, and what do they enable?javascript · easy

build tools day 2/4

• · Reproduce answers from memory

• What are the different JavaScript script loading strategies (defer, async, modulepreload)?performance · easy
• What are the strategies for publishing type definitions for a JavaScript library?typescript · easy
• What is the difference between code splitting and chunking in modern bundlers?performance · easy

build tools day 3/4

• · Reproduce answers from memory

• Would you use an existing library or build your own virtual scroll logic, and why?react · easy
• How do you reduce JavaScript bundle size in production?performance · medium
• How do code splitting and lazy loading improve frontend performance?performance · medium

build tools day 4/4

• · Reproduce answers from memory

• How do tree shaking and bundling work in modern JavaScript builds?performance · medium
• What are common code splitting strategies across route, component, and vendor chunks?performance · medium
• What is the difference between ESM and CommonJS modules?javascript · medium

frontend architecture day 1/6

• · Read deeply, take notes

• How would you design a release strategy for a JavaScript library using semver and changesets?system-design · easy
• How would you implement a reusable feature toggle system with multiple conditions?system-design · easy
• How would you migrate a legacy app to a modern frontend stack?system-design · easy

frontend architecture day 2/6

• · Reproduce answers from memory

• What are the limitations of React when building large scale applications?react · easy
• What are the SOLID principles and how do they apply to frontend code?system-design · easy
• You need to migrate a legacy frontend codebase to a modern framework. What is your plan?system-design · easy

frontend architecture day 3/6

• · Reproduce answers from memory

• How would you roll out feature flags safely in production?system-design · medium
• How do independent deploys work in a micro frontend setup?system-design · hard
• How do you scale a design system across multiple teams?system-design · hard

frontend architecture day 4/6

• · Reproduce answers from memory

• How do you structure a large scale React application?system-design · hard
• How would you structure a modular frontend application that scales across teams?system-design · hard
• What is micro frontend architecture and when would you use it?system-design · hard

frontend architecture day 5/6

• · Reproduce answers from memory

• A component breaks when upgrading a library version. How do you manage dependencies?system-design · medium
• How do you expose an SDK API such as open() and close() without polluting the host page's global namespace?system-design · medium
• How do you manage shared dependencies in a frontend monorepo?system-design · medium

frontend architecture day 6/6

• · Reproduce answers from memory

• How do you share common functions or libraries across a micro frontend application?system-design · medium
• How would you implement a robust frontend monitoring and logging system?system-design · medium
• How would you structure and optimize a large scale React codebase for scalability and readability?system-design · medium

frontend system design day 1/12

• · Read deeply, take notes

• How would you build a collapsible folder tree with nested checkboxes?machine-coding · easy
• How would you build a debounced search box in React?machine-coding · easy
• How would you build a Google Calendar style week view?machine-coding · easy

frontend system design day 2/12

• · Reproduce answers from memory

• How would you build a grid light box in React where lights deactivate in the reverse order of activation?machine-coding · easy
• How would you build a priority based data fetching system on the frontend?system-design · easy
• How would you build a product listing page with search, multi select filters, and a cart in React?machine-coding · easy