Study each pattern. When about to write something new, check here first.

Mini-Project 1 — Requirements & Deliverables

What to Build

Mandatory Technology Constraints

What to Submit

Acceptance Criteria

Your mentor checks each of these when reviewing your submission. Fix any failures before sending.

5.1 The 4 New React 19 Hooks

use() — Read async data in a Client Component

"use client";
import { use, Suspense } from "react";

function UserCard({ userPromise }) {
  const user = use(userPromise);  // suspends until resolved
  return <h1>Hello, {user.name}</h1>;
}
export default function Page() {
  return <Suspense fallback={<p>Loading...</p>}><UserCard userPromise={fetchUser()} /></Suspense>;
}

useActionState() — Wire a form to a Server Action

"use client";
import { useActionState } from "react";
import { createProject } from "@/features/projects/actions";

export function CreateProjectForm() {
  const [state, action, isPending] = useActionState(createProject, null);
  return (
    <form action={action}>
      <input name="name" required />
      {state?.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>{isPending ? "Creating..." : "Create"}</button>
    </form>
  );
}

useFormStatus() — Reusable Submit button

"use client";
import { useFormStatus } from "react-dom";

export function SubmitButton({ label = "Submit" }) {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "Saving..." : label}</button>;
}

useOptimistic() — Instant UI before server responds

"use client";
import { useOptimistic, useTransition } from "react";
import { deleteTask } from "@/features/tasks/actions";

export function TaskList({ initialTasks }) {
  const [tasks, setOptimistic] = useOptimistic(
    initialTasks,
    (current, id) => current.filter(t => t.id !== id)
  );
  const [, startTransition] = useTransition();
  const del = id => startTransition(async () => { setOptimistic(id); await deleteTask(id); });
  return tasks.map(t => <div key={t.id}>{t.title}<button onClick={()=>del(t.id)}>Delete</button></div>);
}

5.2 App Router File Conventions

5.3 params are Promises in Next.js 16

//  WRONG (Next.js 14 pattern — breaks in v16):
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params;  // TypeScript error
}

//  CORRECT (Next.js 16):
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <ProjectBoard id={id} />;
}

5.4 Tailwind v4 — Key Differences from v3

/* globals.css */
@import "tailwindcss";

@theme {
  --color-brand: oklch(55% 0.18 250);
  --font-sans: "Geist", sans-serif;
}

<button className="bg-brand text-white">Click</button>

Weeks 1–2 Official References

Mini-Project 2 — Requirements & Deliverables

What to Build

Mandatory Technology Constraints

Required Database Schema

Your schema.ts must match this minimum. You may add columns but not remove required ones.

// lib/db/schema.ts
import { pgTable, text, uuid, timestamp } from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";

export const posts = pgTable("posts", {
  id:        uuid("id").primaryKey().defaultRandom(),
  title:     text("title").notNull(),
  slug:      text("slug").notNull().unique(),
  body:      text("body").notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
});

export const comments = pgTable("comments", {
  id:         uuid("id").primaryKey().defaultRandom(),
  postId:     uuid("post_id").references(() => posts.id, { onDelete: "cascade" }).notNull(),
  authorName: text("author_name").notNull(),
  body:       text("body").notNull(),
  createdAt:  timestamp("created_at").defaultNow().notNull(),
});

export const postsRelations = relations(posts, ({ many }) => ({ comments: many(comments) }));
export const commentsRelations = relations(comments, ({ one }) => ({ post: one(posts, { fields: [comments.postId], references: [posts.id] }) }));

What to Submit

Acceptance Criteria

5.5 Server Actions — The Full Template

Every mutation in the capstone uses this structure. Memorise it.

"use server";
import { z } from "zod";
import { db } from "@/lib/db";
import { tasks } from "@/lib/db/schema";
import { revalidatePath } from "next/cache";

const schema = z.object({
  title:  z.string().min(1,"Title required").max(200),
  listId: z.string().uuid(),
});

export async function createTask(_: unknown, formData: FormData) {
  const parsed = schema.safeParse({
    title: formData.get("title"), listId: formData.get("listId"),
  });
  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors.title?.[0] };

  await db.insert(tasks).values(parsed.data);
  revalidatePath("/board");
  return { success: true };
}

5.6 Drizzle ORM v2 — CRUD

// lib/db/index.ts
import { drizzle } from "drizzle-orm/neon-http";
import { neon } from "@neondatabase/serverless";
import * as schema from "./schema";
const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql, { schema });

// INSERT
const [task] = await db.insert(tasks).values({ title, listId }).returning();

// SELECT (filtered)
import { eq, and, desc } from "drizzle-orm";
const rows = await db.select().from(tasks).where(eq(tasks.listId, id)).orderBy(desc(tasks.createdAt));

// RELATIONAL (with joins)
const board = await db.query.lists.findMany({ with: { tasks: true } });

// UPDATE
await db.update(tasks).set({ title: "New" }).where(eq(tasks.id, taskId));

// DELETE
await db.delete(tasks).where(eq(tasks.id, taskId));

5.7 Cache Invalidation — The 4 Primitives

Weeks 3–4 Official References