Building the Dashboard Layout

Welcome back! 🎉 At this point, your Task Manager backend is complete and production-ready. All APIs live under src/app/api/**, and from here on out, we treat that backend as read-only. In these final courses, our entire focus shifts to the frontend UI—how users actually experience and interact with the system you’ve already built.

In this lesson, you’ll take a blank Next.js app and progressively turn it into a real, navigable Task Manager interface. You’ll start by setting up global styling and a dashboard entry point, then add shared navigation, and finally connect the UI to live backend data. Along the way, you’ll practice giving clear, scoped Codex prompts that modify only the intended frontend files.

This lesson is structured around three small but meaningful frontend milestones:

• Establishing a styled application shell with Tailwind and a dashboard home page
• Introducing a shared dashboard layout with navigation and stable routes
• Fetching real task data from the existing API and rendering it in the UI

Each practice builds directly on the previous one, and each change happens only in frontend files. Any file under src/app/api/** already works and must not be edited.

Before we dive in, it’s important to internalize one rule that applies to every practice in this lesson:

• All backend logic lives in src/app/api/**.
• From now on, you will not modify anything in that directory.

For example, src/app/api/tasks/route.ts already defines a working API.

export async function GET() {
  const tasks = await getAllTasks();
  return createSuccessResponse(tasks);
}

• This endpoint returns data in the shape { data: Task[], meta: { ... } }.
• The frontend’s job is simply to consume this API, not change it.
• All UI work happens in src/app/layout.tsx and src/app/(dashboard)/**.

Keeping this boundary clear mirrors how real teams work and makes your Codex prompts much safer and more predictable.

This code lives in src/app/layout.tsx. It defines the global HTML shell for your whole Next.js app—everything you render will be placed inside this layout. In this environment, Tailwind is provided via a CDN script, so this file is where we enable styling and set a clean default background/text so every page looks “app-like” immediately.

import { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script src="https://cdn.tailwindcss.com"></script>
      </head>
      <body className="min-h-screen bg-gray-50 text-gray-900">{children}</body>
    </html>
  );
}

RootLayout is a special Next.js App Router component that wraps every page in your application. That’s why it’s the right place to load global resources and apply default styling—every route will inherit it automatically.

The Tailwind CDN script is required in this sandbox environment so utility classes (like bg-gray-50) actually work. In a typical production app you’d install Tailwind via npm, but here the CDN keeps setup lightweight and predictable.

The <body> classes create a consistent baseline look:

• min-h-screen prevents short pages from looking cut off
• bg-gray-50 and text-gray-900 create a clean, readable default theme