Drills

Accessibility basics for forms and components

Explains labels, keyboard behavior, focus, semantic HTML, errors, color contrast, and accessible custom controls.

ReactTypeScript

Coding problemMedium~25 min

Build a recoverable route error boundary

Builds a route-level Next.js failure UI with safe reporting, retry, and an escape route while keeping expected errors out of the boundary.

Next.jsReactTypeScript

Practice drill

Concept questionHard~9 min

Debug hydration mismatches in Next.js

Explains why server HTML and client render can disagree, how to debug it, and how to avoid mismatch-prone code.

Architecture scenarioMedium~10 min

Debug responsive CSS layout and overflow

Explains a constraint-first approach to responsive layout, intrinsic sizing, overflow, and content resilience.

ReactTypeScript

Architecture scenarioMedium~10 min

Design a practical frontend testing strategy

Builds a risk-based frontend test strategy across unit, component, integration, contract, and end-to-end boundaries.

Next.jsPlaywrightReactTypeScript

Debugging scenarioHard~12 min

Diagnose a Core Web Vitals regression

Uses field data, lab evidence, and release correlation to diagnose LCP, INP, and CLS regressions without guessing.

Error boundaries and recoverable frontend failures

Explains how React error boundaries, route errors, safe fallbacks, logging, and recovery work together.

Explain the browser event loop and long tasks

Connects JavaScript tasks and microtasks to rendering, responsiveness, and practical performance fixes.

TypeScript

Concept questionHard~9 min

Frontend performance: rendering and bundle size

Explains practical frontend performance work: measuring, render cost, memoization, bundle splitting, images, and hydration.

Coding problemMedium~25 min

Reduce expensive list rerenders deliberately

Uses profiler evidence to isolate expensive derived data and row rendering, then applies memoization without hiding correctness bugs.

Coding problemEasy~15 min

Test a component through user behavior

Tests validation, focus, pending state, and the save contract through accessible user interactions rather than component internals.

Coding problemHard~35 min

Test a critical user flow with Playwright

Tests one browser-to-database practice workflow with isolated fixtures, resilient locators, durable assertions, and reliable cleanup.

Next.jsPlaywrightReactTypeScript

Next.jsPlaywrightReactTypeScript

Test React components through user behavior

Explains component tests that assert user-visible behavior instead of implementation details.

Architecture scenarioHard~12 min

Use Suspense and streaming boundaries in Next.js

Explains how Suspense boundaries stream useful page regions while coordinating loading, errors, and data ownership.