Skip to curriculum
ThinkFE
Back to home

Your learning path

Understand the pieces.Design the system.

From how a browser works to how a collaborative editor stays in sync. Build your understanding one concept, one experiment, and one design decision at a time.

Curriculum preview

Explore the full syllabus for free. Open any unit to see what it covers; labels show which lessons you can read today.

Open a tier to explore its units.

Tier 0114 units

Foundations

Understand what the browser does, what it costs, and how to measure it.

Concept + DevTools experiment

Build the cost intuition behind frontend decisions. Reproduce the measurements yourself.

  1. 1.1

    How a page loadsFree preview

    DNS, connections, parsing, rendering, and what blocks the waterfall.

  2. 1.2

    Rendering pipelineMembers only

    Style, layout, paint, compositing, and the cost of visual changes.

  3. 1.3

    Event loopMembers only

    Tasks, microtasks, animation frames, long tasks, and yielding work.

  4. 1.4

    Memory modelMembers only

    Heap, garbage collection, retained objects, detached DOM, and leaks.

  5. 1.5

    HTTP/1.1 vs 2 vs 3Members only

    Multiplexing, head-of-line blocking, connection reuse, and delivery trade-offs.

  6. 1.6

    Caching headersMembers only

    Cache-Control, validators, freshness, hashed assets, and Vary.

  7. 1.7

    CDN & edgeUpcoming

    Cache keys, purging, edge compute, and personalized responses.

  8. 1.8

    Browser storageUpcoming

    Cookies, Web Storage, IndexedDB, Cache API, OPFS, and quotas.

  9. 1.9

    Security modelUpcoming

    Same-origin policy, CORS, CSP, XSS, CSRF, and token storage.

  10. 1.10

    Core Web VitalsUpcoming

    LCP, CLS, INP, supporting timing metrics, and lab versus field measurements.

  11. 1.11

    Images & fontsUpcoming

    Image formats, responsive sources, loading priorities, and font delivery.

  12. 1.12

    JavaScript deliveryUpcoming

    Parse and compile costs, script loading, tree shaking, and bundle budgets.

  13. 1.13

    Accessibility fundamentalsUpcoming

    Accessibility trees, roles, focus order, keyboard interaction, and announcements.

  14. 1.14

    Mobile & device constraintsUpcoming

    CPU and network limits, viewport units, touch input, and battery.

Tier 0249 units

Primitives

Learn the small tools that solve recurring frontend problems.

Problem → snippet → trade-off

Recognize the problem, choose a primitive, and explain when not to use it.

2A · Controlling frequency
  1. 2A.1

    DebounceUpcoming

    Leading and trailing calls, maxWait, cancellation, and flushing.

  2. 2A.2

    ThrottleUpcoming

    Leading and trailing calls, time-based throttling, and animation frames.

  3. 2A.3

    rAF batchingUpcoming

    Read/write separation and avoiding layout thrashing.

  4. 2A.4

    Idle schedulingUpcoming

    Idle callbacks, task priorities, deadlines, and work that cannot wait.

  5. 2A.5

    Microtask batchingUpcoming

    Coalescing updates, queueMicrotask, and React batching.

2B · Controlling async
  1. 2B.1

    AbortControllerUpcoming

    Propagating cancellation, timeouts, and combined signals.

  2. 2B.2

    Race-condition guardsUpcoming

    Latest-wins ordering, stale responses, and cleanup guards.

  3. 2B.3

    Retry & backoffUpcoming

    Jitter, retry budgets, idempotency, and deciding what to retry.

  4. 2B.4

    Timeouts & deadlinesUpcoming

    Per-request limits, end-to-end deadlines, and Promise.race.

  5. 2B.5

    Concurrency limitsUpcoming

    Pools, semaphores, queues, and priorities.

  6. 2B.6

    Request dedupUpcoming

    In-flight request keys, shared promises, and deduplication windows.

  7. 2B.7

    Promise combinatorsUpcoming

    all, allSettled, race, any, and partial failures.

  8. 2B.8

    Async iteration & streamsUpcoming

    ReadableStream, async iteration, decoding, and chunked rendering.

  9. 2B.9

    Web WorkersUpcoming

    Moving work off the main thread, transferables, RPC, and worker pools.

2C · Controlling state transitions
  1. 2C.1

    Finite state machinesUpcoming

    States, events, transitions, guards, and impossible states.

  2. 2C.2

    StatechartsUpcoming

    Hierarchy, parallel states, and history.

  3. 2C.3

    Reducers & actionsUpcoming

    Pure transitions, normalized actions, and choosing a state container.

  4. 2C.4

    Undo/redoUpcoming

    Commands, snapshots, patches, grouping, and memory limits.

  5. 2C.5

    Derived state & selectorsUpcoming

    Computed versus stored values and memoized selectors.

  6. 2C.6

    Optimistic updatesUpcoming

    Apply, confirm, reconcile, or roll back.

  7. 2C.7

    Client-side event sourcingUpcoming

    Append-only logs, replay, and offline queues.

2D · Controlling memory
  1. 2D.1

    LRU / LFU cacheUpcoming

    Eviction policies, size limits, and TTL.

  2. 2D.2

    WeakMap / WeakRef / FinalizationRegistryUpcoming

    Ephemeral metadata and references that do not keep objects alive.

  3. 2D.3

    Cleanup disciplineUpcoming

    Listeners, timers, observers, subscriptions, and cancellation.

  4. 2D.4

    Object pooling & recyclingUpcoming

    DOM reuse, typed-array pools, and allocation trade-offs.

  5. 2D.5

    Memory profilingUpcoming

    Heap snapshots, retainers, and allocation timelines.

2E · Controlling the DOM
  1. 2E.1

    IntersectionObserverUpcoming

    Thresholds, root margins, and choosing native lazy loading.

  2. 2E.2

    ResizeObserverUpcoming

    Box sizes, observer loops, and container-query alternatives.

  3. 2E.3

    MutationObserverUpcoming

    Subtrees, attributes, batching, and appropriate use cases.

  4. 2E.4

    Virtualization mathUpcoming

    Row heights, overscan, scroll anchoring, and measurement caches.

  5. 2E.5

    Portals & stackingUpcoming

    Stacking contexts, modals, tooltips, inert, and popovers.

  6. 2E.6

    Focus managementUpcoming

    Focus trapping and restoration, roving tabindex, and active descendants.

  7. 2E.7

    Event delegation & propagationUpcoming

    Capture, bubbling, composed paths, and passive listeners.

  8. 2E.8

    DOM diffing (conceptual)Upcoming

    Keys, reconciliation, and identity across updates.

2F · Controlling data
  1. 2F.1

    NormalizationUpcoming

    Entities by ID, relationships, and shared updates.

  2. 2F.2

    Immutable updatesUpcoming

    Structural sharing, Immer, and nested update costs.

  3. 2F.3

    Equality & memoizationUpcoming

    Referential, shallow, and deep equality; memoization costs.

  4. 2F.4

    Pagination modelsUpcoming

    Offset, cursor, keyset, and page-index experiences.

  5. 2F.5

    Cache invalidationUpcoming

    TTL, stale-while-revalidate, targeted invalidation, and refetch policies.

  6. 2F.6

    Serialization boundariesUpcoming

    JSON, structured cloning, DTOs, and mapping API data.

  7. 2F.7

    Schema validationUpcoming

    Runtime validation and fail-soft versus fail-hard behavior.

  8. 2F.8

    Data compression & encodingUpcoming

    gzip, Brotli, binary formats, and base64 overhead.

2G · Controlling delivery
  1. 2G.1

    Code splittingUpcoming

    Route, component, and vendor boundaries in a chunk graph.

  2. 2G.2

    Prefetch / preload / preconnectUpcoming

    Resource hints, speculation rules, and when to fetch ahead.

  3. 2G.3

    Lazy loadingUpcoming

    Components, images, iframes, and critical-path exceptions.

  4. 2G.4

    Service worker basicsUpcoming

    Lifecycle, caching strategies, updates, and stale clients.

  5. 2G.5

    Feature flags & configUpcoming

    Bootstrapping, evaluation boundaries, and kill switches.

  6. 2G.6

    Error boundaries & fallbacksUpcoming

    Failure isolation, retries, reporting, and partial degradation.

  7. 2G.7

    Logging, metrics, RUMUpcoming

    Sampling, beacons, event schemas, and personal-data boundaries.

Tier 0312 units

Building blocks

Compose the primitives into a subsystem you can explain and defend.

Decision matrix + design drill

Compare approaches, define responsibilities, and practise a focused subsystem design.

  1. 3.1

    Rendering strategyUpcoming

    CSR, SSR, SSG, ISR, streaming, islands, RSC, and hydration costs.

  2. 3.2

    Data fetching layerUpcoming

    REST, GraphQL, typed RPC, waterfalls, and backend-for-frontend boundaries.

  3. 3.3

    Client state architectureUpcoming

    Server, UI, URL, and form state; ownership and store topology.

  4. 3.4

    State machines for UIUpcoming

    Statecharts versus flags, typed events, and modelling failure paths.

  5. 3.5

    Lists at scaleUpcoming

    Pagination, virtualization, restoration, deep links, and new items.

  6. 3.6

    Real-time updatesUpcoming

    Polling, SSE, WebSocket, WebTransport, ordering, and backpressure.

  7. 3.7

    Conflict resolutionUpcoming

    Last-write-wins, version vectors, merging, OT, CRDTs, and presence.

  8. 3.8

    Offline & resilienceUpcoming

    Offline policies, service workers, outboxes, and conflict recovery.

  9. 3.9

    Performance engineeringUpcoming

    Budgets, critical paths, long tasks, INP, and production measurement.

  10. 3.10

    Accessibility & i18n as architectureUpcoming

    Focus, announcements, RTL, plurals, formatting, and locale delivery.

  11. 3.11

    Component & design-system architectureUpcoming

    Composition, headless components, tokens, theming, and library versioning.

  12. 3.12

    Codebase architectureUpcoming

    Feature boundaries, monorepos, task graphs, packages, and configuration.

Tier 045 units

Interview method

Turn your reasoning into a clear, structured system-design conversation.

RADIO + worked transcript

Practise a 45-minute round: state the constraints, draw the system, and defend the trade-offs.

  1. 4.1

    RequirementsUpcoming

    Scope, functional needs, quality requirements, exclusions, and scale.

  2. 4.2

    ArchitectureUpcoming

    Component trees, data flow, boundaries, and rendering choices.

  3. 4.3

    Data modelUpcoming

    Entities, normalization, state ownership, and cache keys.

  4. 4.4

    Interface (API)Upcoming

    Endpoint and event shapes, pagination, errors, and real-time contracts.

  5. 4.5

    Optimizations & trade-offsUpcoming

    Prioritize the constraints that matter and explain when your choice changes.

Tier 0513 units

Case studies

Put the pieces together. Each system introduces a new design challenge.

System walkthrough + deeper trade-offs

Work through requirements, scale, architecture, data models, APIs, and trade-offs. Explore a Mid-level pass, then a Senior pass; microfrontends is Senior only.

  1. 5.1

    Autocomplete / typeaheadUpcoming

    Request lifecycle under rapid input, prefix caching, ranking, and keyboard focus.

    Mid-level + Senior
  2. 5.2

    Image carousel / galleryUpcoming

    Media loading, layout stability, and choosing a preload window.

    Mid-level + Senior
  3. 5.3

    Infinite news feedUpcoming

    Lists at scale, normalized caches, new posts, and scroll restoration.

    Mid-level + Senior
  4. 5.4

    E-commerce product listing + filtersUpcoming

    URL state, facets, rendering, personalization, and caching boundaries.

    Mid-level + Senior
  5. 5.5

    Checkout flowUpcoming

    State machines, retries, duplicate submissions, and interrupted payments.

    Mid-level + Senior
  6. 5.6

    Chat applicationUpcoming

    Real-time ordering, optimistic messages, reconnects, and read receipts.

    Mid-level + Senior
  7. 5.7

    Notification systemUpcoming

    Fan-out, deduplication, unread counts, and multi-tab consistency.

    Mid-level + Senior
  8. 5.8

    Analytics dashboardUpcoming

    Heavy datasets, workers, downsampling, and independent widget failures.

    Mid-level + Senior
  9. 5.9

    Video streaming playerUpcoming

    Buffering, adaptive bitrate, player states, and DRM awareness.

    Mid-level + Senior
  10. 5.10

    Collaborative editor (Docs-lite)Upcoming

    Conflict resolution, OT versus CRDTs, presence, and collaborative undo.

    Mid-level + Senior
  11. 5.11

    Email client (Gmail-lite)Upcoming

    Offline sync, outboxes, conflicts, service-worker updates, and local search.

    Mid-level + Senior
  12. 5.12

    Design system / component libraryUpcoming

    Architecture for 40 teams: extensibility, themes, versioning, and migration.

    Mid-level + Senior
  13. 5.13

    MicrofrontendsUpcoming

    Organizational scale, integration boundaries, independent deploys, and when to say no.

    Senior only