End to End Persistent TaskFlow

End-to-End Persistent TaskFlow Reconnect the thin Next.js view and debug across layers

Phase 11 - Persistent Task CRUD API Volume 03 - Database Engineering

Architecture milestone Next.js Server Component

↓

NestJS /tasks

↓

PostgreSQL-backed HTML

Phase 11 replaces process memory with durable PostgreSQL-backed application behavior.

Reconnect the thin Next.js view The backend is the focus of Phase 11, but a short integration check keeps the full-stack mental model alive. Next.js can now read the durable /tasks resource instead of the old in-memory /todos endpoint.

export type Task = { id: string; projectId: string; title: string; description: string | null; status: "TODO" | "IN_PROGRESS" | "DONE" | "CANCELED"; priority: "LOW" | "MEDIUM" | "HIGH" | "URGENT"; createdAt: string; updatedAt: string; };

const API_BASE_URL = process.env.API_BASE_URL;

if (!API_BASE_URL) { throw new Error("API_BASE_URL is required."); }

export async function getTasks(): Promise<Task[]> {
const response = await fetch(`${API_BASE_URL}/tasks`, {
cache: "no-store",
});

if (!response.ok) { throw new Error(`Task API returned ${response.status}.`); }

return response.json(); }

The API base URL remains server-only in this example because the Server Component performs the request. No database URL or database credential is ever exposed to the browser.

Task page import { getTasks } from "@/lib/api/tasks";

export default async function TasksPage() {
const tasks = await getTasks();

return (
<main>
<h1>Tasks</h1>

{tasks.length === 0 ? (
<p>No persisted tasks yet.</p>
) : (
<ul>
{tasks.map((task) => (
<li key={task.id}>
<strong>{task.title}</strong>
{" - "}
{task.status}
</li>
))}
</ul>
)}
</main>
);
}

Figure 1 - End-to-end durable read

Browser requests /tasks page

↓

Next.js Server Component

↓

GET NestJS /tasks

↓

TasksService

↓

PrismaService

↓

PostgreSQL

↓

HTML returned to browser

The browser still talks to an application layer. It never connects directly to PostgreSQL.

End-to-end test • Create a Task with PowerShell against NestJS.

• Refresh the Next.js /tasks page.

• Confirm the new Task title and status render.

• Restart NestJS, refresh Next.js again, and confirm the Task still renders.

Debug by layer Observation Likely layer to inspect first

NestJS /tasks fails in PowerShell Backend / Prisma / database

PowerShell succeeds, Next.js fails Next.js API client / environment URL

API returns [] but SQL shows rows Prisma query / wrong database connection

SQL has no row after POST Create path / migration / DB connection

Rows disappear only after restart You are still hitting memory somewhere

Still intentionally simple

No mutation UI, optimistic update, TanStack Query cache, authentication, or authorization is added yet. Those later phases should solve real problems one at a time.