Skip to content

Master Frontend

Main Navigation Trang chủ Lộ trình

Stage 0 — Foundation

Stage 1 — Build & Tooling

Stage 2 — Project 1: SaaS Landing

Stage 3 — Project 2: E-Commerce

Stage 4 — Project 3: Admin Dashboard

Stage 5 — Project 4: Social Feed

Stage 6 — Project 5: Design System

Stage 7 — Project 6: Legacy Migration

Stage 8 — Interview Prep

Appearance

Sidebar Navigation

Introduction

Lộ trình

Stage 0 — Foundation

Overview

🧭 Tư duy & Phương pháp

0.1.0 First Principles Thinking

⚙️ JS Engine & Runtime

0.1.1 V8 Engine & Memory Basics

0.1.2 Event Loop Fundamentals

0.1.3 Scheduler & Browser Task Scheduling

0.1.4 Execution Context

0.1.5 Closure

0.1.6 `this` Binding

0.1.7 Prototype Chain

🎨 Browser Rendering & CSS

0.2.1 Critical Rendering Path

0.2.2 CSS Rendering Deep Dive

🗄️ Browser APIs & Storage

0.3.1 Browser Storage & Persistence

0.3.2 Browser APIs — Observers & Workers

0.3.3 Web Components & Shadow DOM

📘 TypeScript

0.5.1 TypeScript Generics & Advanced Types

0.5.2 TypeScript Utility Types & Zod

🌐 Network & HTTP

0.6.1 HTTP Protocol Evolution

0.6.2 Caching & Resource Hints

0.6.3 Network Security & Infrastructure

0.6.4 API Design & Backend Contract

🐛 Debugging & Engineering

0.7.1 Debugging Methodology Fundamentals

0.7.2 Advanced Debugging & Postmortem

0.8.1 Cost Engineering for Frontend

0.8.2 Technical Writing: RFC, ADR, Runbook

Stage 1 — Build & Tooling

Overview

🔧 Bundler & Build

1.1.1 Bundler Fundamentals

1.1.2 Bundle Analysis & Optimization

📦 Package Manager & Monorepo

1.2.1 Package Manager & Lockfile

1.2.2 Monorepo & Publishing

🌿 Git Workflow

1.3.1 Git Workflow & History

1.3.2 Git Advanced & Recovery

🏗️ Architecture Decision

1.4.1 Monorepo Architecture Decision

Stage 2 — Project 1: SaaS Landing + Blog

Overview

⚛️ React Core & Performance

2.1.1 React Core: Fiber & Reconciliation

2.1.2 React Performance: Memoization

⚡ Next.js App Router

2.2.1 Next.js App Router & RSC

2.2.2 Next.js Caching Strategy

🎨 CSS & UI Components

2.3.1 CSS Modern & Tailwind Config

2.3.2 shadcn/ui & Component Patterns

♿ Accessibility

2.4.1 Accessibility Fundamentals

2.4.2 Accessibility Advanced — Keyboard & Screen Reader

✨ Animation & Motion

2.5.1 CSS Transitions & FLIP

2.5.2 Framer Motion & View Transitions

📱 Mobile Web

2.6.1 Mobile Web Fundamentals

2.6.2 Mobile Web Advanced — Keyboard & Gesture

🔍 SEO & i18n

2.7 SEO Technical + i18n

📝 Form Engineering

2.8.1 Form Engineering with react-hook-form

2.8.2 Form Advanced — Auto-save & Race Condition

🔒 Security

2.9.1 Browser Security — SOP & iframe

2.9.2 Frontend Security — XSS & CSRF

🔐 Authentication

2.11.1 Auth Fundamentals — Session & JWT

2.11.2 Auth Advanced — PKCE & Refresh Token

🧪 Testing

2.12.1 Testing Fundamentals

2.12.2 Testing Advanced — Async & Integration

📊 Performance & Web Vitals

2.13.1 Core Web Vitals & Performance Budget

2.13.2 LoAF API & Real-world Measurement

🔄 CI/CD & Deploy

2.14.1 CI/CD Fundamentals

2.14.2 Preview Deploy & Changesets

2.15.1 Deploy & Custom Domain

2.15.2 Observability Nền tảng

⚙️ Operations & Architecture

2.16.1 Incident Response & On-call Runbook

2.16.2 Feature Flags as Architecture Guardrails

Stage 3 — Project 2: E-Commerce Checkout

Overview

⚛️ State Management

3.1.1 TanStack Query — Server State

3.1.2 Zustand — Client State

3.2 State Machine with XState

💳 Checkout & Payment

3.3.1 Form Engineering — Multi-step & Field Arrays

3.3.2 Form Engineering — i18n & Currency

3.4.1 Stripe Integration & Test Mode

3.4.2 Payment Security & Error Handling

🛡️ Resilience & PWA

3.5.1 Error Boundary & Graceful Degradation

3.5.2 Resilience Patterns

3.6.1 PWA & Service Worker

3.6.2 Background Sync & Offline Cart

⚡ Caching

3.7.1 Caching Patterns

3.7.2 Cache Invalidation & Problems

🎬 Animation & Mobile

3.8.1 Animation UX — Add to Cart & Transitions

3.8.2 Mobile Checkout Optimization

🧪 Testing

3.9.1 Testing — Cart Logic & MSW

3.9.2 E2E Testing — Full Checkout Flow

📜 API Contract Design

3.10 API Contract Design (BFF Perspective)

Stage 4 — Project 3: Admin Dashboard

Overview

⚛️ State Management

4.1.1 Redux Toolkit & RTK Query

4.1.2 Redux Saga & Normalization

📊 Data Visualization

4.2.1 Chart Libraries & Recharts

4.2.2 D3.js Custom & Canvas

⚡ Performance & Threading

4.3.1 Virtual Scroll

4.3.2 Web Workers & Threading

🔄 Data & Real-time

4.4.1 Data Normalization & Offline Sync

4.4.2 Realtime & Streaming

4.4.3 Pagination & Conflict Resolution

🧰 Monorepo & DX

4.5.1 Turborepo & Workspaces

4.5.2 Storybook & Chromatic

🔌 API & Backend-for-Frontend

4.6.1 BFF with Next.js

4.6.2 tRPC & API Comparison

🏗️ Architecture

4.7.1 Frontend Architecture Patterns

4.7.2 Folder Structure & Boundaries

🔐 Enterprise Features

4.8.1 RBAC & Multi-tenancy

4.8.2 Feature Flags & Experimentation

📡 Real-time & SSE

4.9.1 SSE & Real-time Metrics

4.9.2 Role-based UI & Real-time Update

📈 Observability

4.10.1 Observability Fundamentals

4.10.2 OpenTelemetry & Alerting

🚀 Deploy & Release

4.11.1 Deploy Strategies

4.11.2 Release Workflow & Changesets

♿ Accessibility

4.12.1 Data Table Accessibility

4.12.2 Screen Reader & jest-axe

🌟 Staff Skills

4.13 RADIO Practice #1

4.14 Mentoring via Code Review

4.15 Performance Budget as Policy

Stage 5 — Project 4: Real-time Social Feed

Overview

⚡ Real-time & State

5.1 WebSockets & Real-time

5.2 Optimistic Update Nâng Cao

🎬 Animation & Mobile

5.3 Animation Nâng Cao & Motion

5.4 Mobile Web Real-time

🤖 AI Integration

5.5.1 AI Integration Fundamentals

5.5.2 AI Advanced — Function Calling & MCP

📦 Features & SEO

5.6 File Upload & Web Workers

5.7 Dynamic SEO

🎤 Interview Prep

5.8 RADIO Practice #2

Stage 6 — Project 5: Design System

Overview

🎨 Design Tokens

6.1.1 Design Tokens Fundamentals

6.1.2 Style Dictionary & Multi-platform

🧩 Component Primitives & Accessibility

6.2.1 Radix UI Primitives & Accessibility

6.2.2 Shadow DOM in Design System

🧱 Complex Components

6.3.1 Complex Components — Combobox & Date Picker

6.3.2 Data Grid

📚 Documentation, Testing & Visual Regression

6.4.1 Storybook & Documentation

6.4.2 Chromatic & Publish

6.7.1 Component Testing

6.7.2 Visual Regression & Coverage

🧩 Micro-frontends & Interop

6.5.1 Micro-frontends Fundamentals

6.5.2 Web Components Interop

🌗 Theme & Animation

6.6 Dark Mode & Animation Tokens

📝 Documentation & Architecture

6.8 Documentation & RFC/ADR

🎤 Interview Prep

6.9 RADIO Practice #3

Stage 7 — Project 6: Legacy Migration

Overview

🧭 Migration Strategy

7.1.1 Migration Strategy & Planning

7.1.2 Risk Assessment & Rollback

🔌 Interop & Implementation

7.2.1 Web Components Interop

7.2.2 CSS & Event Interop

7.3 Implement Migration Thực Chiến

🔐 Security & AI

7.4 Supply Chain Security

7.5.1 AI Coding Agent — Giao Task

7.5.2 AI Verify Workflow

🚨 Production Ops & Incident

7.6.1 Production Ops — RUM & Feature Flags

7.6.2 Incident Response & Runbook

🧠 Judgment & Soft Skills

7.7.1 Judgment — Tình Huống Thực Chiến

7.7.2 Soft Skills & Team Dynamics

🎤 Interview Prep

7.8 RADIO Practice #4

Stage 8 — Interview Prep

Overview

🧱 Portfolio & Storytelling

8.1.1 Portfolio Site Structure

8.1.2 Portfolio Content & Video Demo

🎤 Mock Interview

8.2.1 RADIO Framework & Checklist

8.2.2 Mock Interview Cường Độ Cao

💻 Live Coding

8.3.1 Live Coding — Modal & Dropdown

8.3.2 Live Coding — Data Table & React Optimize

🛡️ Review & Consolidation

8.4.1 Security Audit & Incident Simulation

8.4.2 Testing & Observability Audit

🗣️ Behavioral & Negotiation

8.5.1 Behavioral Interview — STAR & War Stories

8.5.2 Đàm Phán Lương & Offer

🚀 Apply & Iterate

8.6.1 CV & Application Strategy

8.6.2 Iterate & Feedback Loop

On this page

2.1.1 React Core: Fiber & Reconciliation

TODO

Pager

Previous pageOverview

Next page2.1.2 React Performance: Memoization

Master Frontend — Chương trình đào tạo Frontend Engineering

2.1.1 React Core: Fiber & Reconciliation ​

2.1.1 React Core: Fiber & Reconciliation