When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: NewsDaily portal

The Media team building NewsDaily portal uses SaaS Dashboard Project to build admin charts, settings, and team pages like a real B2B product. readers and editors never see the TypeScript files — they just get a fast, reliable article pages, categories, and SEO metadata.

Production-style code

// app/dashboard/page.tsx
export default async function DashboardHome() {
  const stats = await getInstructorStats();
  return (
    <div className="grid gap-4 md:grid-cols-3">
      <StatCard label="Active students" value={stats.activeStudents} />
      <StatCard label="Completion rate" value={`${stats.completion}%`} />
      <StatCard label="Revenue" value={`₹${stats.mrr}`} />
    </div>
  );
}

What happens in production: In NewsDaily portal, getting SaaS Dashboard Project right means readers and editors trust the article pages, categories, and SEO metadata every day.

Lesson example (start here)

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

// app/dashboard/page.tsx
export default async function DashboardHome() {
  const stats = await getInstructorStats();
  return (
    <div className="grid gap-4 md:grid-cols-3">
      <StatCard label="Active students" value={stats.activeStudents} />
      <StatCard label="Completion rate" value={`${stats.completion}%`} />
      <StatCard label="Revenue" value={`₹${stats.mrr}`} />
    </div>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Server loads aggregated stats.
• StatCard can be Server or Client.
• Add sidebar layout, settings route, and team invite form as stretch goals.

Do this on your computer

1. Extend LearnHub /dashboard with stat cards
2. Add /dashboard/settings and /dashboard/team
3. Protect all routes with middleware
4. Record 2-minute demo video for portfolio
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing SaaS Dashboard Project — the page hot-reloads on save.

Remember

Dashboard = layout + server data + widgets. LearnHub instructor view is your SaaS template. Polish one demo path for interviews.

Common questions