All plans
30-day plan
5 questions/day
advanced
30-Day Preparation Plan
Thirty days of theory and applied practice, organized into weekly themes — foundations, React, depth, architecture — with weekly mock interviews and revision days built in.
Milestones
- Day 7: Foundations complete
- Day 14: React + state complete
- Day 21: Depth (perf, security, testing, a11y) complete
- Day 28: Architecture + system design complete
- Day 30: Interview-ready signoff
Revision strategy
Friday of each week is a revision day: write summaries from memory and drill the topics where you missed the most. Saturday is a timed mock with five unseen questions.
Overall progress0/29 days · 0%
Day 1
0/5JS core: closures, scope, this
- · Read 5 questions deeply
- How would you implement a polyfill for JSON.parse?javascript · easy
- How would you implement a polyfill for JSON.stringify?javascript · easy
- How would you implement a polyfill for Object.assign?javascript · easy
- How would you implement a polyfill for Object.create?javascript · easy
- How would you implement a polyfill for setInterval?javascript · easy
Day 2
0/5Async JS + event loop
- · Trace microtask/macrotask
- How would you write a custom implementation of Function.prototype.bind?javascript · easy
- 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 Fetcher class with get(id) and post(id, x) methods that throw on missing or duplicate ids?javascript · easy
- How would you implement a flatten array function in JavaScript?javascript · easy
Day 3
0/5Browser rendering pipeline
- · Explain CRP end to end
- 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
- 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
Day 4
0/5DOM, events, storage
- · Pick correct storage primitive
- 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
- 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
Day 5
0/5Foundations checkpoint
- · Self-quiz on week 1
- How would you write a polyfill for Function.prototype.bind that supports new?javascript · easy
- How would you implement a basic debounce function without using any library?javascript · easy
- How do CSS methodologies like BEM work alongside responsive media queries?css · easy
- What are the differences between localStorage, sessionStorage, cookies, and IndexedDB?browser-internals · easy
- What are the risks of storing an auth token in localStorage, and what should you do instead?security · easy
Day 6
0/5Week 1 mock
mock
- · Pick 5 cold questions, time yourself
- 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 a polyfill for setTimeout?javascript · easy
- How do you build a fully responsive web application?css · easy
- What are the web storage APIs, and how do localStorage, sessionStorage, and cookies differ?browser-internals · easy
- How would you build a real time cursor tracker component?machine-coding · easy
Day 7
0/5Week 1 revision
revision
- · Write answers from memory
- What are common interview questions that combine closures and currying?javascript · easy
- How would you implement an async scheduler that respects a max concurrency limit?javascript · easy
- How would you build a grid toggle UI with immutable state and predictable re renders?machine-coding · easy
- What happens in the browser between a button click and the network request leaving the machine?browser-internals · easy
- What is a service worker and what role does it play in the browser?browser-internals · easy
Day 8
0/5React fundamentals
- · Hooks decision tree
- 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
- How would you build a login form covering structure, state, validation, accessibility, and security?machine-coding · easy
- How would you build a multi step form with validation across steps?machine-coding · easy
- How would you build a reusable Button component with variants and sizes like Material UI?machine-coding · easy
Day 9
0/5React internals start
- · Fiber + reconciliation
- How would you build a drag and drop feature in a web app?machine-coding · easy
- How would you build a file explorer UI component?machine-coding · easy
- How would you lazy load components with React.lazy and Suspense inside protected routes?react · medium
- 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 10
0/5React performance
- · When memo helps vs hurts
- How does React's Fiber reconciliation algorithm work internally, and how does it improve rendering performance?react · hard
- How would you design a global error boundary system for catching and displaying frontend errors?react · hard
- How would you debounce user input to avoid unnecessary re renders or API calls?react · medium
- How would you debug a performance bottleneck in a React app using DevTools?react · medium
- How would you handle drag events and optimize their performance in the browser?performance · medium
Day 11
0/5State management
- · Server vs client state
- How do you manage global state efficiently in a React application?react · medium
- How do you subscribe to a Redux store from a React component?react · medium
- How would you implement protected routes with authentication using Context API or Redux?react · medium
- How would you implement Redux Toolkit in a React application?react · medium
- How would you implement the React Context API for a real feature?react · medium
Day 12
0/5Networking
- · Cancellation + caching
- 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
- 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
- When should you use interface versus type in TypeScript?typescript · easy
Day 13
0/5Week 2 mock
mock
- · React deep-dive mock
- How would you manage form validation, error handling, and state for dynamic inputs?react · medium
- Can you explain the concurrent features introduced in React 18?react · medium
- How would you debug and fix a memory leak in a React application?react · medium
- How would you implement the React Context API for global state management?react · medium
- Have you used Axios, and what are interceptors and when should you use them?networking · easy
Day 14
0/5Week 2 revision
revision
- · Identify weak topics
- How would you manage navigation between steps and handle validation in a multi step form?react · medium
- How do you handle SSR and hydration in complex React applications?react · medium
- How would you handle dynamic row heights in a virtualized list?react · medium
- How would you pass data between sibling components in React without using Redux?react · medium
- How do you build real time features using WebSockets or Server Sent Events?networking · easy
Day 15
0/5Performance engineering
- · CWV + bundle work
- How do you optimize assets, and what is the difference between WebP, PNG, and JPG?performance · medium
- How do you optimize bundle splitting for faster page loads?performance · medium
- How do you optimize images in a large web application?performance · medium
- How do you optimize web performance and reduce page load times?performance · medium
- How do you prevent XSS and CSRF attacks in a web application?security · medium
Day 16
0/5Security
- · XSS, CSRF, cookies
- How do you prevent a malicious parent page from spoofing a payment success event in an embedded widget?security · medium
- 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
- How do you avoid common XSS pitfalls in modern frontend frameworks?security · easy
Day 17
0/5A11y + testing
- · WCAG essentials
- How would you enforce WCAG compliance across multiple frontend teams?accessibility · medium
- What is WCAG and how do you apply it in a production frontend codebase?accessibility · medium
- How would you build an accessible modal with focus trapping and ARIA?accessibility · easy
- 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
Day 18
0/5Testing strategy
- · Unit vs integration vs E2E
- How do you run A/B tests in React applications?react · medium
- 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
- How have you implemented code splitting in a real project?performance · medium
- How would you build and publish your own npm package?system-design · medium
Day 19
0/5Build tools + TS
- · Tree shaking + types
- How does the webpack build process work, from entry to output bundle?performance · medium
- How does tree shaking remove unused code in modern bundlers?performance · medium
- How would you implement route based code splitting with role based access control in a React app?react · medium
- How does TypeScript enhance React development in practice?react · medium
- How do generics, utility types, and narrowing work together in TypeScript?typescript · medium
Day 20
0/5Week 3 mock
mock
- · Cross-topic mock
- How would you improve Interaction to Next Paint (INP) on a page?performance · medium
- What breaks when a strict CSP blocks inline scripts and frame sources?security · easy
- What are the common variants of binary search you should know for interviews?dsa-algorithms · easy
- What tools would you use for frontend testing, and why?testing · medium
- Why is code splitting better than shipping everything in a single bundle?performance · medium
Day 21
0/5Week 3 revision
revision
- · Drill weak topics
- How would you optimize the filtering process for very large datasets?performance · medium
- How do you prevent XSS in React applications?security · medium
- What is the purpose of the alt attribute on images?accessibility · easy
- How do you cancel old API calls using the take latest pattern in React?react · medium
- How do dynamic imports enable code splitting in a frontend app?performance · easy
Day 22
0/5Architecture
- · Monorepo, micro-FE, SDK
- How do you manage shared dependencies in a frontend monorepo?system-design · medium
- 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
- Why would you migrate from Angular to React, and what challenges have you faced?react · medium
Day 23
0/5System design start
- · Scope-tradeoff-rollout frame
- How would you design browser like features such as tabs, history, and shortcuts?system-design · hard
- How would you design infinite scroll for a list with millions of items?system-design · hard
- How would you design the frontend for a product listing page including components, state, data flow, and scalability?system-design · hard
- How would you design the three column functionality of a Jira board (Open, In Progress, Done)?system-design · hard
- How would you design WhatsApp Web at a high level?system-design · hard
Day 24
0/5System design depth
- · Pick 5 designs, draft out loud
- How would you design the data model for a chat application UI in React?system-design · hard
- How would you design the Send Message feature in a Slack style app, covering UI and client logic?system-design · hard
- What are good design and naming conventions for REST APIs?networking · hard
- What design decisions should you consider when building a library API?system-design · hard
- What kind of fallback UI would you design for different error types such as 404, 500, and network errors?react · hard
Day 25
0/5Capstone mock
mock
- · Full senior loop simulation
- How do you manage feature flags at scale across a frontend organization?system-design · easy
- What problems do Web Workers actually solve in a frontend application?system-design · hard
- How would you reduce the initial page load time of a React application by forty percent?react · medium
- What is RTK Query and how does it differ from Axios or fetch?networking · medium
- How do you use React.lazy and Suspense to load components only when needed?react · medium
Day 26
0/5Final sweep
- · Hit lowest confidence topics
- What is the difference between REST APIs and GraphQL?networking · medium
- How does React's reconciliation process update the DOM efficiently?react · medium
- How would you implement dynamic theming such as light and dark mode in a large web application without performance issues?system-design · medium
- How would you use throttling, debouncing, or other optimizations to prevent excessive requests?performance · medium
- A complex dashboard lags when users apply filters. How do you profile and optimize it?performance · medium
Day 27
0/5Mock #4
mock
- · System design timed
- How do you handle privacy and security for AI powered features?security · medium
- How do you handle rate limits and errors when calling AI APIs from the frontend?networking · medium
- How would you design a release strategy for a JavaScript library using semver and changesets?system-design · easy
- What are the different layers of caching you can use on a website?performance · medium
- How would you build concurrent progress bars for multiple tasks running in parallel?machine-coding · easy
Day 28
0/5Final revision
revision
- · Write summaries from memory
- Why do you want to join this fintech company?behavioral · medium
- How would you architect a search bar with debounced input and async suggestions?machine-coding · medium
- What are Higher Order Components in React and how are they used?react · medium
- What are the benefits of server side rendering in React applications?react · easy
- What challenges have you faced when building frontends for large user traffic?performance · medium
Day 29
0/5Ship-day prep
- · Light read, rest the brain
- Can you bind this in an arrow function, and what happens if you use the new operator with one?javascript · easy
- What are the differences between server side rendering and client side rendering?performance · easy
- How would you isolate which React component is re rendering unnecessarily and fix it?react · medium
- How would you implement a reusable feature toggle system with multiple conditions?system-design · easy
- How do you integrate an AI API such as OpenAI or Claude into a frontend application?system-design · medium