Home Challenges Reps Problems Leaderboard Take a challenge

User Dashboard (SPA)

Fetch on mount, handle every state it can be in, and derive the rest. The five things every SPA interview tests.

Advanced40 min on the clock7 graded checks · 100 pointsReact + UI SprintPro

Graded by reading your code against the checklist below.

What you build

Fetch /api/users once on mount
Render a loading state and an error state, not just the happy path
A search box that filters by name, memoised
Render the rows with a stable key
Show the count of active users, derived rather than stored

Done means

It loads, it fails visibly, it filters without re-computing, and every row has a key.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

The fetch runs once, on mount+15Async and its failure modes
Users, loading, error and search are all state+15React state
The filtered list is memoised on the right dependencies+20React performance
Rows are keyed by id+15React state
Loading and error render, not just the data+15Loading and error states
The active count is derived, not stored+10React performance
The request is aborted if the component unmounts+10Async and its failure modes

What it teaches

Async and its failure modesintermediate

Every await can reject; modelling idle, loading, success and error explicitly is what stops a slow network showing a blank screen with no explanation.

React statebeginner

State is the data that changes while the page is open; useState is how a component remembers something between renders.

React performanceintermediate

Re-sorting a thousand rows on every keystroke is why a table feels slow; useMemo tells React to only redo that work when the inputs actually change.

Loading and error statesbeginner

Anything that talks to a network can be slow or fail; a screen with no loading state and no error state is a screen that looks broken the first time the wifi drops.

The rest of React + UI Sprint

Tailwind Landing HeroBeginner · 10 min Form Validation SprintIntermediate · 15 min Data TableAdvanced · 20 min