All plans
60-day plan
4 questions/day
advanced
60-Day Deep Preparation Plan
The same shape as the 30-day plan, paced over two months with paired depth days. Built for engineers who want to internalize the material, not just review it.
Milestones
- Day 14: Foundations + async fully internalized
- Day 28: React + state + networking complete
- Day 42: Depth (perf, security, testing, a11y, build) complete
- Day 56: Architecture + system design complete
- Day 60: Interview-ready signoff
Revision strategy
Each topic gets two consecutive days: a learning day and a depth day where you reproduce the answer from memory and write code by hand. Mock + revision pairs anchor each week.
Overall progress0/58 days · 0%
Day 1
0/4JS core: closures, scope, this
- · Read 5 questions deeply
- What are closures in JavaScript and why are they useful?javascript · medium
- 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
Day 2
0/4JS core: closures, scope, this — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- How would you flatten a deeply nested array of arbitrary depth without using Array.prototype.flat?javascript · easy
Day 3
0/4Async JS + event loop
- · Trace microtask/macrotask
- When should you reach for Map versus a plain Object in JavaScript?javascript · easy
- What gets hoisted in JavaScript and how does it actually work?javascript · easy
- How would you implement Promise from scratch in JavaScript?javascript · hard
- Can you explain how call, apply, and bind work in JavaScript?javascript · medium
Day 4
0/4Async JS + event loop — depth day
- · Practice from memory
- · Write code, don't just read
- Why does deleting object properties hurt V8 optimization?browser-internals · hard
- What is the difference between arrow functions and regular JavaScript functions?javascript · easy
- How do you handle multiple asynchronous operations using Promises?javascript · medium
- How would you implement a polyfill for Promise.allSettled?javascript · medium
Day 5
0/4Browser rendering pipeline
- · Explain CRP end to end
- When do you use Promise.all, allSettled, race, or any?javascript · medium
- How do you safely render dynamic HTML and prevent XSS?security · medium
- How does CSS specificity and the cascade decide which rule wins?css · medium
- What happens during the critical rendering path when a browser loads a page?browser-internals · medium
Day 6
0/4Browser rendering pipeline — depth day
- · Practice from memory
- · Write code, don't just read
- How would you implement a task queue that runs at most K tasks in parallel?javascript · medium
- What is the difference between repaint, reflow, and composite, and what triggers each?performance · medium
- How do you approach responsive design with a mobile first mindset, breakpoints, and container queries?css · easy
- What are the CSS position values and when would you use each?css · easy
Day 7
0/4DOM, events, storage
- · Pick correct storage primitive
- When should you use cookies, localStorage, or sessionStorage?browser-internals · easy
- How do you debug JavaScript and React applications effectively?browser-internals · medium
- What are service workers and how do they enable PWA features?browser-internals · medium
- What are the differences between JWTs and session cookies for authentication?security · medium
Day 8
0/4DOM, events, storage — depth day
- · Practice from memory
- · Write code, don't just read
- Why are HttpOnly cookies preferred for storing auth tokens?security · medium
- How does event delegation work in the DOM, and why is it efficient?browser-internals · medium
- How does React handle event delegation under the hood?react · medium
- How would you approach DOM manipulation, event listeners, and styling using vanilla JavaScript?browser-internals · medium
Day 9
0/4Foundations checkpoint
- · Self-quiz on week 1
- Can you explain hoisting in JavaScript with a code example?javascript · medium
- How would you create a debounced search feature in React?machine-coding · easy
- What is the CSS box model and how does content box differ from border box?css · easy
- How would you create a React hook that syncs component state with localStorage or sessionStorage?react · medium
Day 10
0/4Foundations checkpoint — depth day
- · Practice from memory
- · Write code, don't just read
- How would you implement a chainable Driver class in JavaScript?javascript · easy
- How do you use typeof and instanceof, and what is reliable type checking in JavaScript?javascript · easy
- Why does the viewport meta tag matter for mobile UI rendering?css · medium
- How does the srcset attribute work and when would you use it for responsive images?html · easy
Day 11
0/4Week 1 mock
mock
- · Pick 5 cold questions, time yourself
- How would you implement a polyfill for Array.prototype.reduce?javascript · easy
- How does object reference comparison differ from primitive comparison in JavaScript?javascript · easy
- Why is transform preferred over animating layout properties for smooth animations?performance · medium
- How would you implement a DOM like data structure in JavaScript?javascript · easy
Day 12
0/4Week 1 mock — depth day
- · Practice from memory
- · Write code, don't just read
- How would you implement a polyfill for JSON.parse?javascript · easy
- How would you execute a list of Promises in series without any parallelism?javascript · easy
- Why might you choose Tailwind CSS over Bootstrap or traditional CSS?css · medium
- How would you persist cart state across page refreshes using localStorage?machine-coding · easy
Day 13
0/4Week 1 revision
revision
- · Write answers from memory
- How would you implement a polyfill for JSON.stringify?javascript · easy
- How would you find the sum of numbers in an array without using a for loop?javascript · easy
- Would you use Flexbox or CSS Grid for an e commerce product layout with three columns?css · medium
- If you store data in localStorage on one domain, can another domain access it?browser-internals · easy
Day 14
0/4Week 1 revision — depth day
- · Practice from memory
- · Write code, don't just read
- How would you implement a polyfill for Object.assign?javascript · easy
- How would you flatten a nested array with custom ordering, top level first then nested?javascript · easy
- You need to render a large dataset without blocking the main thread. How do you approach it?performance · medium
- What are ETag, Cache Control, and DocumentFragment, and where are each used?browser-internals · easy
Day 15
0/4React fundamentals
- · Hooks decision tree
- Describe a time you took ownership of a project beyond your formal responsibility.behavioral · easy
- How do you design good validation UX in complex forms?react · easy
- How would you build a custom dropdown component in React?machine-coding · easy
- How would you build a drag and drop feature in a web app?machine-coding · easy
Day 16
0/4React fundamentals — depth day
- · Practice from memory
- · Write code, don't just read
- How do class lifecycle methods map to useEffect in React?react · easy
- How do you write clean, maintainable component logic in React?react · easy
- How would you build a debounced search autocomplete component?machine-coding · easy
- How would you build a dynamic N by M grid component in React?machine-coding · easy
Day 17
0/4React internals start
- · Fiber + reconciliation
- How would you approach building a To Do app in a machine coding round?machine-coding · easy
- How would you build a file explorer UI component?machine-coding · easy
- 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
Day 18
0/4React internals start — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- 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
Day 19
0/4React performance
- · When memo helps vs hurts
- How do you use React.lazy and Suspense to load components only when needed?react · medium
- How would you build concurrent progress bars for multiple tasks running in parallel?machine-coding · easy
- What are React Fragments and why would you use them?react · medium
- What causes unnecessary re renders in React and how do you prevent them?react · medium
Day 20
0/4React performance — depth day
- · Practice from memory
- · Write code, don't just read
- 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 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
Day 21
0/4State management
- · Server vs client state
- 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
- Have you worked with state management libraries like Zustand, and how do they compare to Redux?react · easy
Day 22
0/4State management — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- 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
Day 23
0/4Networking
- · Cancellation + caching
- 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
- What role do HTTP headers play in requests and responses?networking · easy
Day 24
0/4Networking — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- 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
Day 25
0/4Week 2 mock
mock
- · React deep-dive mock
Day 26
0/4Week 2 mock — depth day
- · Practice from memory
- · Write code, don't just read
- How would you build a multi step form with validation across steps?machine-coding · easy
- Can you explain React Fiber in depth?react · hard
- What is state colocation in React and why does it matter?react · medium
- What is your experience with Redux, Redux Toolkit, or other state management libraries?react · easy
Day 27
0/4Week 2 revision
revision
- · Identify weak topics
- How would you build a priority based modal system?machine-coding · easy
- How do you use React.lazy and Suspense for component level code splitting?react · medium
- What is the role of React Router, and how does it work with dynamic routing?react · medium
- When should you use React Context, Redux, or Zustand for state management?react · medium
Day 28
0/4Week 2 revision — depth day
- · Practice from memory
- · Write code, don't just read
- How would you build a real time cursor tracker component?machine-coding · easy
- How does React's reconciliation and Virtual DOM decide what to update?react · medium
- When do function declarations versus arrow functions actually impact performance?javascript · medium
- How would you implement a pub sub or event emitter from scratch?javascript · medium
Day 29
0/4Performance engineering
- · CWV + bundle work
- 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
- Your app feels slow but Lighthouse score is good. Why might that be?performance · medium
Day 30
0/4Performance engineering — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- 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
Day 31
0/4Security
- · XSS, CSRF, cookies
- 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
- What breaks when a strict CSP blocks inline scripts and frame sources?security · easy
Day 32
0/4Security — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- 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
Day 33
0/4A11y + testing
- · WCAG essentials
- 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
- How would you approach end to end testing with Cypress or Playwright?testing · medium
Day 34
0/4A11y + testing — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- How would you implement A/B testing on the frontend without affecting current users?system-design · medium
Day 35
0/4Testing strategy
- · Unit vs integration vs E2E
- What tools would you use for frontend testing, and why?testing · medium
- 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 you maintain backward compatibility for a published JavaScript package?system-design · easy
Day 36
0/4Testing strategy — depth day
- · Practice from memory
- · Write code, don't just read
- How do pure functions help you write testable frontend code?system-design · hard
- 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 should a published JavaScript library handle ESM versus CJS output?system-design · easy
Day 37
0/4Build tools + TS
- · Tree shaking + types
- How do dynamic imports enable code splitting in a frontend app?performance · easy
- What are dynamic imports in JavaScript, and what do they enable?javascript · easy
- What are the different JavaScript script loading strategies (defer, async, modulepreload)?performance · easy
- How does TypeScript enhance React development in practice?react · medium
Day 38
0/4Build tools + TS — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- Would you use an existing library or build your own virtual scroll logic, and why?react · easy
- How do generics, utility types, and narrowing work together in TypeScript?typescript · medium
Day 39
0/4Week 3 mock
mock
- · Cross-topic mock
- What are resource hints such as preload, prefetch, dns prefetch, and preconnect?performance · easy
- How do you prevent a malicious parent page from spoofing a payment success event in an embedded widget?security · medium
- How do you ensure a web application is accessible to screen reader users?accessibility · medium
- How do you write unit tests in React using Jest and React Testing Library?testing · medium
Day 40
0/4Week 3 mock — depth day
- · Practice from memory
- · Write code, don't just read
- What are the differences between CSR, SSR, and streaming rendering?performance · easy
- How do you secure a frontend application against common attacks?security · medium
- How should screen readers announce new toast notifications?accessibility · medium
- How would you approach end to end testing with Cypress or Playwright?testing · medium
Day 41
0/4Week 3 revision
revision
- · Drill weak topics
- What do preload, preconnect, prefetch, and prerender do for page load performance?performance · easy
- Why are noopener and noreferrer important on anchor tags with target blank?security · medium
- How would you enforce WCAG compliance across multiple frontend teams?accessibility · medium
- How would you approach end to end testing with Cypress or Playwright?testing · medium
Day 42
0/4Week 3 revision — depth day
- · Practice from memory
- · Write code, don't just read
- What HTTP caching strategies do you use to keep a frontend fast?performance · easy
- Why are noopener and noreferrer important on anchor tags with target blank?security · medium
- What is WCAG and how do you apply it in a production frontend codebase?accessibility · medium
- How would you approach end to end testing with Cypress or Playwright?testing · medium
Day 43
0/4Architecture
- · Monorepo, micro-FE, SDK
- How do you manage feature flags at scale across a frontend organization?system-design · easy
- 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
Day 44
0/4Architecture — depth day
- · Practice from memory
- · Write code, don't just read
- 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
- How would you roll out feature flags safely in production?system-design · medium
Day 45
0/4System design start
- · Scope-tradeoff-rollout frame
- Can you walk me through the high level design of your current or past frontend system?system-design · easy
- How do you design components for scalability and reuse across teams?system-design · easy
- How would you build a collapsible folder tree with nested checkboxes?machine-coding · easy
- How would you build a complete frontend application that consumes APIs, manages state, and is fully responsive?machine-coding · easy
Day 46
0/4System design start — depth day
- · Practice from memory
- · Write code, don't just read
- How do you design a monitoring and error tracking strategy for a frontend application?system-design · easy
- How would you build a capital and country matching game in React?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
Day 47
0/4System design depth
- · Pick 5 designs, draft out loud
- 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
- How would you build a React list with collapse and expand functionality?react · easy
Day 48
0/4System design depth — depth day
- · Practice from memory
- · Write code, don't just read
- How would you build a search feature with debounce and live API calls?machine-coding · easy
- How would you build a shopping cart UI in React?machine-coding · easy
- How would you build a simple task management interface?machine-coding · easy
- How would you build a To Do app with add, edit, delete, and filters?machine-coding · easy
Day 49
0/4Capstone mock
mock
- · Full senior loop simulation
- How do independent deploys work in a micro frontend setup?system-design · hard
- How would you build a transaction confirmation flow?machine-coding · easy
- What is Time to First Byte and how do you measure and improve it?performance · easy
- How do sibling components communicate in React without prop drilling or Redux?react · easy
Day 50
0/4Capstone mock — depth day
- · Practice from memory
- · Write code, don't just read
- How do you scale a design system across multiple teams?system-design · hard
- How would you build a virtualized list for very large datasets?machine-coding · easy
- What strategies would you use to improve page load time for a global audience?performance · easy
- How would you design a client side state management system like Redux Toolkit?system-design · hard
Day 51
0/4Final sweep
- · Hit lowest confidence topics
- How would you implement a polyfill for setInterval?javascript · easy
- What causes hydration mismatches in Next.js and how do you fix them?nextjs · medium
- Why do functional state updates matter inside useCallback with empty dependencies?react · medium
- Which frontend performance metrics do you track in production?performance · easy
Day 52
0/4Final sweep — depth day
- · Practice from memory
- · Write code, don't just read
Day 53
0/4Mock #4
mock
- · System design timed
- How would you build an embeddable checkout widget loaded into any merchant site via a script tag?system-design · easy
- How would you design 2D data structures for grids, matrices, or sparse maps?system-design · easy
- How do you structure a large scale React application?system-design · hard
- What are the Core Web Vitals (LCP, INP, CLS) and how do you optimize each?performance · medium
Day 54
0/4Mock #4 — depth day
- · Practice from memory
- · Write code, don't just read
- How would you design a phone style web app with multiple screens and apps (low level design)?system-design · easy
- How would you design an autocomplete like Flipkart's search bar at high level?system-design · easy
- How would you structure a modular frontend application that scales across teams?system-design · hard
- When should you use SSR, SSG, or CSR for a web application?performance · medium
Day 55
0/4Final revision
revision
- · Write summaries from memory
- How would you write a polyfill for Function.prototype.bind that supports new?javascript · easy
- How would you implement an event emitter from scratch?javascript · easy
- How would you build a stopwatch or timer component?machine-coding · easy
- What are the concurrent features introduced in React 18 and why do they matter?react · medium
Day 56
0/4Final revision — depth day
- · Practice from memory
- · Write code, don't just read
- What algorithm does Array.prototype.sort use, and what is the output of sorting an array with null and undefined?javascript · easy
- How would you implement fetch with a timeout and abort capability?networking · easy
- How would you build a tab based form with two sections?machine-coding · easy
- Why does React StrictMode behave differently in development versus production?react · medium
Day 57
0/4Ship-day prep
- · Light read, rest the brain
- What are common interview questions that combine closures and currying?javascript · easy
- How does event handling work in React, and how does it differ from native DOM events?react · easy
- Why does setCount(count + 1) inside useCallback with empty dependencies capture stale state?react · medium
- What is micro frontend architecture and when would you use it?system-design · hard
Day 58
0/4Ship-day prep — depth day
- · Practice from memory
- · Write code, don't just read
- What are truthy and falsy values in JavaScript, and what are the common equality quirks?javascript · easy
- How does React's Fiber reconciliation algorithm work internally, and how does it improve rendering performance?react · hard
- Why should you avoid mutating state directly in React?react · medium
- A component breaks when upgrading a library version. How do you manage dependencies?system-design · medium