The Frontend Interview Landscape

Your 8-Week Study Plan

3 min read

A structured study plan is the difference between wasting months and landing an offer in 8 weeks. This plan assumes 2-3 hours of daily practice alongside a full-time job.

Eight weeks, and what each one is actually buying you

Weeks 1-2 · JS & TS

Closes the gaps that end phone screens: event loop ordering, closures, `this`, async error paths. This block is insurance, not upside — it stops you failing early, it does not make you stand out

Weeks 3-4 · React

Internals over API surface. Anyone can use hooks; the differentiator is explaining reconciliation, the RSC boundary, and when memoisation is the wrong answer

Weeks 5-6 · System design

The highest-variance rounds and the ones most candidates skip. Whiteboarding one problem a day under a timer beats reading ten write-ups

Week 7 · Perf & a11y

The scarcest signal on the list. Most frontend candidates cannot discuss Core Web Vitals or WCAG with any depth, so a week here moves you further than a week of extra LeetCode

Week 8 · Behavioural & mocks

Deliberately last, because your stories should reference what you just practised. Mock interviews expose pacing problems that solo practice hides completely

If you have fewer than eight weeks, cut from the front, not the back. Weeks 1-2 are the block a working engineer can most safely compress; week 8 is the one that most reliably changes an outcome, and it is the one everybody sacrifices.

The Plan

Weeks 1-2: JavaScript & TypeScript Foundations

Goal: Eliminate knowledge gaps in core JS/TS that trip candidates up.

  • Event loop, call stack, microtask vs. macrotask queues
  • Closures — write 5 examples from memory
  • this binding rules (default, implicit, explicit, new)
  • Prototypal inheritance vs. class syntax
  • Promises, async/await, error handling patterns
  • TypeScript generics, utility types, type guards
  • Practice: 3-5 JS coding problems per day on LeetCode (Easy/Medium)

Weeks 3-4: React Deep Dive

Goal: Master React internals and common interview patterns.

  • React Fiber architecture and reconciliation algorithm
  • All hooks: useState, useEffect, useRef, useMemo, useCallback, useReducer
  • Custom hooks — design and implement 3-5
  • State management: Context API, Zustand, Redux Toolkit, TanStack Query
  • Server Components and the "use client" / "use server" directives
  • Next.js App Router, Server Actions, streaming SSR
  • Practice: Build 2 small React apps from scratch (no starter template)

Weeks 5-6: Frontend System Design

Goal: Develop a framework for answering system design questions.

  • Learn the RADIO framework (Requirements → Architecture → Data Model → Interface → Optimization)
  • Practice 5 classic problems:
    • Design an autocomplete/typeahead
    • Design a chat application UI
    • Design a spreadsheet
    • Design a news feed
    • Design a photo gallery with infinite scroll
  • Component library architecture and API design
  • State management at scale
  • Real-time updates (WebSockets, SSE, polling trade-offs)
  • Practice: Whiteboard 1 design problem per day (set a 35-minute timer)

Week 7: Performance & Accessibility

Goal: Be able to discuss and optimize real-world performance issues.

  • Core Web Vitals: LCP, CLS, INP — thresholds and optimization strategies
  • Chrome DevTools Performance tab and Lighthouse
  • Code splitting, lazy loading, prefetching
  • Image optimization (formats, responsive images, lazy loading)
  • WCAG 2.2 AA requirements — focus management, ARIA, keyboard navigation
  • Practice: Audit 2-3 real websites using Lighthouse and identify fixes

Week 8: Behavioral & Mock Interviews

Goal: Polish your story and get live feedback.

  • Prepare 6-8 STAR stories covering: leadership, conflict, failure, impact, collaboration (Module 6 gives you the exact list)
  • Map stories to Amazon LPs if targeting Amazon
  • Salary research on levels.fyi for your target role/level/company
  • Practice negotiation scripts
  • Do at least 2 mock interviews — use Pramp, interviewing.io, or ask a friend
  • Record yourself answering questions and review for filler words, pacing

Daily Schedule Template

Time BlockActivityDuration
Morning1-2 coding problems (LeetCode/Frontend-specific)45 min
LunchRead 1 article on the week's topic15 min
EveningDeep study session (concepts, system design practice, or mock)60-90 min

Adjustments by Target Company

If targeting...Spend more time on...
MetaVanilla JS coding, frontend system design
GoogleAlgorithms/DSA, general coding
AmazonSTAR stories mapped to LPs (dedicate 2+ full days)
AppleApplied/practical problems, accessibility
StartupsPortfolio projects, pair programming practice

Resources

  • Coding practice: LeetCode, GreatFrontEnd, BFE.dev
  • System design: "Frontend System Design" by GreatFrontEnd, Educative
  • Mock interviews: Pramp (free), interviewing.io, Exponent
  • Salary data: levels.fyi
  • Company-specific prep: Glassdoor interview reviews, Blind

Tip: Consistency beats intensity. 2 hours daily for 8 weeks is more effective than 8-hour weekend cramming sessions.

The plan is only as good as the first week you actually run. Module 2 starts where most phone screens end: JavaScript and TypeScript. :::

Quiz

Module 1: The Frontend Interview Landscape

Take Quiz
Was this lesson helpful?

Sign in to rate