Build a real-data dashboard that meets a performance budget
A dashboard works on the developer’s laptop but crawls on a mid-range phone. You build one that stays fast under real data and a real network, and you prove it with numbers.
What you'll build
A data dashboard fetching from a real API with charts, skeleton loading, error boundaries, and code-splitting that hits a defined Core Web Vitals budget on a throttled device.
See how we teach, before you sign up
You don't just get code dumped on you. Every starter file and every solution is explained line-by-line, in plain English. Here's one real file from this project:
{
"lcpMs": 2500,
"inpMs": 200,
"cls": 0.1,
"initialJsGzipKb": 170,
"profile": "Slow 4G + 4x CPU throttle, mid-tier Android"
}Reading this file
"lcpMs": 2500Largest Contentful Paint target: the main content must show within 2.5s, the headline loading metric."inpMs": 200Interaction to Next Paint budget: taps and clicks must feel responsive within 200ms."initialJsGzipKb": 170A hard ceiling on first-load JavaScript, the lever that most directly controls how fast the page boots."profile": "Slow 4G + 4x CPU..."Names the throttled device the budget applies to, so numbers reflect real phones, not your fast laptop.
The contract you hold every change to. Commit it before writing features.
That's 1 of 8 explained code blocks in this single project.
The build, milestone by milestone
- 1
Set a budget first
5 guided stepsPerformance you measure at the end is performance you negotiate away. A budget set first turns "is it fast?" into a pass/fail check on every change.
- 2
Render real data well
5 guided stepsReal data arrives late, fails sometimes, and changes height, the three things that wreck CLS and trust. Handling them well is the core of a credible dashboard.
- 3
Cut the bundle
5 guided stepsChart libraries and date utilities are often the heaviest dependencies on the page. Splitting and lazy-loading them is the single biggest lever on initial load.
- 4
Measure on a slow device
5 guided stepsThe budget is only real if you verify it under realistic conditions. This is where you turn "should be fast" into a measured pass.
- 5
Observe it in production & write the runbook
5 guided stepsA lab budget is a promise; RUM is proof. Field data from real devices is the only way to know your dashboard is still fast for users, and the only thing that tells you when a deploy regressed it.
What's inside when you start
You'll walk away with
This is portfolio-grade. Build it free.
Sign up to unlock every milestone step-by-step, the code skeletons, full reference solutions, and checkable tasks, with your progress saved as you build.
Start building