From “Working Pages” to Reusable UI

Introduction: From “Working Pages” to Reusable UI

Welcome back! 🎉 You already have a real UI foundation in place. Global styling works, the dashboard routes are set up, navigation exists, and both / and /tasks fetch live task data from the backend. In this lesson, you’ll make the UI feel more like a real product by reducing duplication and introducing reusable building blocks. Instead of repeating the same markup and styles in multiple places, you’ll start extracting shared pieces into components that can be reused across the app. There are three main improvements in this lesson. First, you’ll extract the repeated “task row” markup into a dedicated TaskRow component so task lists stay consistent. Next, you’ll introduce a reusable Button component so actions share the same look and behavior. Finally, you’ll evolve the layout into a sidebar-based dashboard shell that highlights the active route, which makes the app feel more structured and easier to navigate. This keeps the codebase cleaner now, but it also matters later. As the app grows, reusable components make new features faster to build because you can extend existing UI patterns instead of rebuilding them from scratch.

Previously…

In the previous lesson, you enabled Tailwind styling globally, built a dashboard route group with a shared layout and navigation, and fetched tasks from GET /api/tasks while rendering loading, error, and empty states. Now you’ll take that working UI and organize it into reusable pieces. This is an important step in frontend development: a page can be “working,” but still need cleanup before it becomes easy to maintain. There is still one key rule that matters throughout this lesson. Don’t modify anything under src/app/api/** . The backend is complete, and this lesson is frontend-only, so your job is to build better UI on top of the existing API rather than changing the API to make the UI easier.

The Golden Rule: Backend is Read-Only

Your UI consumes existing endpoints like: GET /api/tasks \to { data: Task[], meta: { timestamp } } That response shape is why you always parse tasks from json.data . The backend has already defined the contract, and the frontend should follow that contract consistently. In real projects, this kind of discipline matters because the frontend and backend are often developed separately, and changing one side casually can break the other. A strong Codex prompt for this unit should always keep the scope tight and the constraints explicit. It should restrict edits to a small list of frontend files, and it should clearly include the rule “do not touch src/app/api/** .” That way, Codex is guided toward the exact work you want instead of making broad changes that solve the wrong problem.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

'use client';

import type { Task } from '@/lib/tasks';

export function TaskRow({ task }: { task: Task }) {
  // TODO: Add a status badge with conditional Tailwind styling.
  // TODO: Display due date if present; otherwise show "No due date".
  return (
    <div className="flex items-center justify-between p-4">
      <div className="space-y-1">
        <div className="font-medium">{task.title}</div>
        <div className="text-sm text-gray-500">No due date</div>
      </div>

      <span className="text-sm text-gray-500">—</span>
    </div>
  );
}

TypeScript

'use client';

import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import type { Task } from '@/lib/tasks';
import { TaskRow } from '@/components/tasks/TaskRow';

type ApiResponse<T> = { data: T; meta?: { timestamp?: string } };

function StatCard({ title, value }: { title: string; value: number }) {
  return (
    <div className="rounded-lg border bg-white p-4">
      <div className="text-sm text-gray-600">{title}</div>
      <div className="mt-1 text-2xl font-semibold">{value}</div>
    </div>
  );
}

export default function DashboardHomePage() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>('');

  useEffect(() => {
    let alive = true;

    const run = async () => {
      setIsLoading(true);
      setError('');

      try {
        const res = await fetch('/api/tasks', { cache: 'no-store' });
        if (!res.ok) throw new Error(`Request failed (HTTP ${res.status})`);

        const json = (await res.json()) as ApiResponse<Task[]>;
        const next = Array.isArray(json?.data) ? json.data : [];

        if (alive) setTasks(next);
      } catch (e) {
        if (!alive) return;
        setError(e instanceof Error ? e.message : 'Unknown error');
      } finally {
        if (alive) setIsLoading(false);
      }
    };

    run();
    return () => {
      alive = false;
    };
  }, []);

  const stats = useMemo(() => {
    const total = tasks.length;
    const completed = tasks.filter((t) => t.completed).length;
    const incomplete = total - completed;
    return { total, completed, incomplete };
  }, [tasks]);

  const recent = tasks.slice(0, 5);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold">Dashboard</h1>
        <Link href="/tasks" className="text-sm text-blue-600 hover:underline">
          View all tasks →
        </Link>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <StatCard title="Total" value={stats.total} />
        <StatCard title="Completed" value={stats.completed} />
        <StatCard title="Incomplete" value={stats.incomplete} />
      </div>

      <section className="space-y-3">
        <h2 className="text-lg font-semibold">Recent Tasks</h2>

        {isLoading && <p className="text-gray-500">Loading tasks…</p>}
        {error && <p className="text-red-600">Failed to load tasks: {error}</p>}

        <div className="divide-y rounded-lg border bg-white">
          {!isLoading && !error && recent.length === 0 && (
            <div className="p-4 text-gray-500">No tasks yet.</div>
          )}

          {!isLoading &&
            !error &&
            recent.map((t) => <TaskRow key={t.id} task={t} />)}
        </div>
      </section>
    </div>
  );
}

TypeScript

'use client';

import { useEffect, useState } from 'react';
import type { Task } from '@/lib/tasks';
import { TaskRow } from '@/components/tasks/TaskRow';

type ApiResponse<T> = { data: T; meta?: { timestamp?: string } };

export default function TasksPage() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>('');

  useEffect(() => {
    let alive = true;

    const run = async () => {
      setIsLoading(true);
      setError('');

      try {
        const res = await fetch('/api/tasks', { cache: 'no-store' });
        if (!res.ok) throw new Error(`Request failed (HTTP ${res.status})`);

        const json = (await res.json()) as ApiResponse<Task[]>;
        const next = Array.isArray(json?.data) ? json.data : [];

        if (alive) setTasks(next);
      } catch (e) {
        if (!alive) return;
        setError(e instanceof Error ? e.message : 'Unknown error');
      } finally {
        if (alive) setIsLoading(false);
      }
    };

    run();
    return () => {
      alive = false;
    };
  }, []);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold">Tasks</h1>

      {isLoading && <p className="text-gray-500">Loading tasks…</p>}
      {error && <p className="text-red-600">Failed to load tasks: {error}</p>}

      <div className="divide-y rounded-lg border bg-white">
        {!isLoading && !error && tasks.length === 0 && (
          <div className="p-4 text-gray-500">No tasks yet.</div>
        )}

        {!isLoading && !error && tasks.map((t) => <TaskRow key={t.id} task={t} />)}
      </div>
    </div>
  );
}

TypeScript

import { ButtonHTMLAttributes, forwardRef } from 'react';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: 'primary' | 'secondary';
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { className = '', variant = 'primary', ...props },
  ref
) {
  const base =
    'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ' +
    'disabled:cursor-not-allowed disabled:opacity-50';

  const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
  };

  return (
    <button
      ref={ref}
      className={`${base} ${variants[variant]} ${className}`.trim()}
      {...props}
    />
  );
});

TypeScript

'use client';

import { useRouter } from 'next/navigation';
import type { Task } from '@/lib/tasks';
import { Button } from '@/components/ui/Button';

export function TaskRow({ task }: { task: Task }) {
  const router = useRouter();

  const badgeClass = task.completed
    ? 'bg-green-100 text-green-700'
    : 'bg-yellow-100 text-yellow-700';

  return (
    <div className="flex items-center justify-between p-4">
      <div className="space-y-1">
        <div className="font-medium">{task.title}</div>

        <div className="flex items-center gap-2 text-sm">
          <span className={`rounded-full px-2 py-0.5 ${badgeClass}`}>
            {task.completed ? 'Completed' : 'Pending'}
          </span>

          <span className="text-gray-500">
            {task.dueDate ? `Due: ${task.dueDate}` : 'No due date'}
          </span>
        </div>
      </div>

      <Button
        type="button"
        variant="secondary"
        onClick={() => router.push(`/tasks/${task.id}`)}
      >
        View
      </Button>
    </div>
  );
}

TypeScript

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import type { Task } from '@/lib/tasks';
import { TaskRow } from '@/components/tasks/TaskRow';
import { Button } from '@/components/ui/Button';

type ApiResponse<T> = { data: T; meta?: { timestamp?: string } };

export default function TasksPage() {
  const router = useRouter();

  const [tasks, setTasks] = useState<Task[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>('');

  useEffect(() => {
    let alive = true;

    const run = async () => {
      setIsLoading(true);
      setError('');

      try {
        const res = await fetch('/api/tasks', { cache: 'no-store' });
        if (!res.ok) throw new Error(`Request failed (HTTP ${res.status})`);

        const json = (await res.json()) as ApiResponse<Task[]>;
        const next = Array.isArray(json?.data) ? json.data : [];

        if (alive) setTasks(next);
      } catch (e) {
        if (!alive) return;
        setError(e instanceof Error ? e.message : 'Unknown error');
      } finally {
        if (alive) setIsLoading(false);
      }
    };

    run();
    return () => {
      alive = false;
    };
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold">Tasks</h1>

        <Button type="button" onClick={() => router.push('/tasks/new')}>
          New Task
        </Button>
      </div>

      {isLoading && <p className="text-gray-500">Loading tasks…</p>}
      {error && <p className="text-red-600">Failed to load tasks: {error}</p>}

      <div className="divide-y rounded-lg border bg-white">
        {!isLoading && !error && tasks.length === 0 && (
          <div className="p-4 text-gray-500">No tasks yet.</div>
        )}

        {!isLoading &&
          !error &&
          tasks.map((t) => <TaskRow key={t.id} task={t} />)}
      </div>
    </div>
  );
}

TypeScript

import Link from 'next/link';

export default function NewTaskPage() {
  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-semibold">Create Task</h1>
      <p className="text-gray-600">This page will be implemented in Part 2.</p>

      <Link href="/tasks" className="text-blue-600 hover:underline">
        ← Back to Tasks
      </Link>
    </div>
  );
}

TypeScript

import Link from 'next/link';

export default function TaskDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-semibold">Task Detail</h1>
      <p className="text-gray-600">Task #{params.id} will be implemented in Part 2.</p>

      <Link href="/tasks" className="text-blue-600 hover:underline">
        ← Back to Tasks
      </Link>
    </div>
  );
}

TypeScript

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ReactNode } from 'react';

const navItems = [
  { href: '/', label: 'Dashboard' },
  { href: '/tasks', label: 'Tasks' },
  { href: '/tasks/filter?completed=false', label: 'Filters' },
];

export default function DashboardLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/';
    if (href.includes('/tasks/filter')) return pathname.startsWith('/tasks/filter');
    if (href === '/tasks') return pathname === '/tasks' || pathname.startsWith('/tasks/');
    return pathname.startsWith(href);
  };

  return (
    <div className="min-h-screen grid grid-cols-1 md:grid-cols-[240px_1fr]">
      <aside className="hidden md:block border-r bg-white">
        <div className="p-4 text-xl font-semibold">TaskManager</div>

        <nav className="px-2 space-y-1">
          {navItems.map((item) => {
            const active = isActive(item.href);

            const className =
              'block rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
              (active
                ? 'bg-blue-50 text-blue-700'
                : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900');

            return (
              <Link key={item.href} href={item.href} className={className}>
                {item.label}
              </Link>
            );
          })}
        </nav>
      </aside>

      <main className="p-4 md:p-6 lg:p-8">
        <div className="mx-auto max-w-5xl">{children}</div>
      </main>
    </div>
  );
}

Introduction: From “Working Pages” to Reusable UI

Previously…

The Golden Rule: Backend is Read-Only

Join the 1M+ learners on CodeSignal

Creating a Reusable TaskRow Component

Refactoring the dashboard to use TaskRow

Refactoring the tasks list to use TaskRow

Introducing a Reusable Button Component

Adding “View” and “New Task” Navigation with Buttons

Updating the Tasks page to include a New Task button

Adding Stub Pages for Future Routes

Task detail stub page

Turning the Layout into a Sidebar Shell with Active Highlighting

Codex Prompts: How to Use Them Well in This Lesson

Recap