Skip to content

Tracks Drills Topics Technologies Tech stacks Skill areas

Tracks Drills Topics

Loading

Aporeon

Technical interview practice, from one developer to another.

About Privacy Terms

.NET Full Stack

Frontend Labs

Hands-on React and Next.js forms, data state, rendering, accessibility, 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