Skip to content

Tracks Drills Topics Technologies Tech stacks Skill areas

Tracks Drills Topics

Loading

Aporeon interview preparation

About Privacy Terms

React & Next.js Frontend Foundations

Practical UI Labs

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

15 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 15

Practice this drill Choose another

Search

15 of 15 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 3Single SubmissionGuards a mutation immediately, exposes pending state, and restores the command after failure.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 4Upload RecoveryModels file validation, progress, cancellation, failure, and retry without losing the selected file.Coding problemHard~35 minNext.jsReactTypeScriptPractice 5Data Page StatesUses an explicit state model for initial loading, success, empty, recoverable error, and refetching.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 6Search Race ControlCombines debounce cleanup, AbortController, and request identity to prevent stale search results.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 7Optimistic RollbackApplies an immediate reversible mutation, blocks overlapping writes, and restores the previous state on failure.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 8URL Filter StateMakes list filters shareable and back-button friendly while resetting pagination deliberately.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 9Server Client SplitKeeps data and secrets on the server while sending a small serializable model to an interactive client component.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 10Capability-Aware UIUses server-resolved capabilities for presentation while keeping the mutation endpoint authoritative.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 11Hydration FixMoves non-deterministic browser-only rendering behind a stable server snapshot and post-hydration update.Coding problemHard~35 minNext.jsReactTypeScriptPractice 12Behavior TestTests validation, focus, pending state, and the save contract through accessible user interactions rather than component internals.Coding problemEasy~15 minNext.jsReactTypeScriptPractice 13Recoverable 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 14Render PerformanceUses profiler evidence to isolate expensive derived data and row rendering, then applies memoization without hiding correctness bugs.Coding problemMedium~25 minNext.jsReactTypeScriptPractice 15Critical 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

15 drillsOne at a time

1Accessible FormUp next / Easy / ~15 min
2API Field ErrorsMedium / ~25 min
3Single SubmissionEasy / ~15 min
4Upload RecoveryHard / ~35 min
5Data Page StatesEasy / ~15 min
6Search Race ControlMedium / ~25 min
7Optimistic RollbackMedium / ~25 min
8URL Filter StateMedium / ~25 min

+7 more drills in this section