When will you use this?

Use this lesson to build something you can show in interviews and on your resume.

• Portfolio projects prove you can finish — recruiters click your demo link.
• Build one dashboard or shop end-to-end; that beats ten half-finished tutorials.

Real-world: ops KPI dashboard

SaaS ops home combines sidebar nav, KPI cards (MRR, churn), and sortable data table — capstone layout pattern.

Production-style code

function OpsDashboard() {
  const { data: kpis } = useQuery({ queryKey: ['kpis'], queryFn: fetchKpis });
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <main>
        <header><h1>Operations</h1></header>
        <section className="kpi-row">
          <KpiCard label="MRR" value={kpis?.mrr} />
          <KpiCard label="Active tenants" value={kpis?.tenants} />
        </section>
        <DataTable rows={kpis?.recentSignups} />
      </main>
    </div>
  );
}

What happens in production: Portfolio piece — proves you can compose layout, data fetching, and tables like real admin products.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

features/dashboard/
  DashboardLayout.jsx   — sidebar + outlet
  StatsCards.jsx        — KPI numbers
  RecentOrders.jsx      — table with useQuery
  dashboardApi.js       — fetch functions

Line-by-line walkthrough

How it works (big picture)

• Start with layout and fake static data.
• Replace with API.
• Add loading skeletons and error states last.

Do this on your computer

1. Sketch 3 widgets on paper.
2. Build layout with React Router nested routes.
3. Connect one widget to real or mock API.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Layout + cards + table + charts. Use Query for data. Ship one working screen first.

Common questions