Drills

Build an accessible profile form

Implements labeled fields, client validation, error summaries, focus recovery, and pending submission state.

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.

Coding problemHard~35 min

Build upload progress and retry recovery

Models file validation, progress, cancellation, failure, and retry without losing the selected file.

Debounce search and discard stale responses

Combines debounce cleanup, AbortController, and request identity to prevent stale search results.

Coding problemHard~35 min

Fix a time-based hydration mismatch

Moves non-deterministic browser-only rendering behind a stable server snapshot and post-hydration update.

Implement an optimistic favorite with rollback

Applies an immediate reversible mutation, blocks overlapping writes, and restores the previous state on failure.

Map API field errors into a form

Maps a stable ProblemDetails validation contract to fields and a fallback form-level error.

Prevent a duplicate form mutation

Guards a mutation immediately, exposes pending state, and restores the command after failure.

Reduce expensive list rerenders deliberately

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

Render capability-aware UI without trusting it

Uses server-resolved capabilities for presentation while keeping the mutation endpoint authoritative.

Render complete data-page states

Uses an explicit state model for initial loading, success, empty, recoverable error, and refetching.

Split a Next.js page at the interaction boundary

Keeps data and secrets on the server while sending a small serializable model to an interactive client component.

Synchronize filters and pagination with the URL

Makes list filters shareable and back-button friendly while resetting pagination deliberately.

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