Skip to content

Tracks Drills Topics Technologies Tech stacks Skill areas

Tracks Drills Guides

Loading

Aporeon

Technical interview practice, from one developer to another.

Guides About Editorial standards Support Privacy Terms Refund policy

React & Next.js Frontend Foundations

Practical UI Labs

Hands-on React and Next.js implementation, accessibility, state, performance, and testing exercises.

13 drillsPractice one at a timeOrdered pathCoding problem

Recommended start

Accessible Form

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

Easy~15 minStep 1 of 13

Practice this drill Choose another

Search

13 of 13 shown

1Accessible FormRecommended startImplements labeled fields, client validation, error summaries, focus recovery, and pending submission state.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 2API Field ErrorsMaps a stable ProblemDetails validation contract to fields and a fallback form-level error.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 3Upload RecoveryModels file validation, progress, cancellation, failure, and retry without losing the selected file.Coding problemHard~35 minNext.jsReactTypeScriptPractice 4Data Page StatesUses an explicit state model for initial loading, success, empty, recoverable error, and refetching.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 5Search Race ControlCombines debounce cleanup, AbortController, and request identity to prevent stale search results.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 6Optimistic RollbackApplies an immediate reversible mutation, blocks overlapping writes, and restores the previous state on failure.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 7Server Client SplitKeeps data and secrets on the server while sending a small serializable model to an interactive client component.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 8Capability-Aware UIUses server-resolved capabilities for presentation while keeping the mutation endpoint authoritative.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 9Hydration FixMoves non-deterministic browser-only rendering behind a stable server snapshot and post-hydration update.Coding problemHard~35 minNext.jsReactTypeScriptPractice 10Behavior TestTests validation, focus, pending state, and the save contract through accessible user interactions rather than component internals.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 11Recoverable ErrorBuilds a route-level Next.js failure UI with safe reporting, retry, and an escape route while keeping expected errors out of the boundary.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 12Render PerformanceUses profiler evidence to isolate expensive derived data and row rendering, then applies memoization without hiding correctness bugs.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 13Critical Flow E2ETests one browser-to-database practice workflow with isolated fixtures, resilient locators, durable assertions, and reliable cleanup.Coding problemHard~35 minNext.jsPlaywrightReactPractice

Practice order

13 drillsOne at a time

1Accessible FormUp next / Easy / ~15 min
2API Field ErrorsMedium / ~25 min
3Upload RecoveryHard / ~35 min
4Data Page StatesEasy / ~15 min
5Search Race ControlMedium / ~25 min
6Optimistic RollbackMedium / ~25 min
7Server Client SplitMedium / ~25 min
8Capability-Aware UIMedium / ~25 min

+5 more drills in this section