Implementation: Vibe Coding in Action

"use server"; import { prisma } from "@/lib/db"; import { z } from "zod"; import { getServerSession } from "next-auth"; import { revalidatePath } from "next/cache"; // Zod schema: input validation (WAJIB!) const CreateTaskSchema = z.object({ title: z.string().min(3).max(100), description: z.string().max(2000).optional(), boardId: z.string().uuid(), assigneeId: z.string().uuid().optional(), dueDate: z.string().datetime().optional(), }); /** * Create a new task on a board. * Validates input, checks auth, creates in DB, revalidates cache. */ export async function createTask(formData: FormData) { // 1. Auth check const session = await getServerSession(); if (!session?.user) { return { error: "Unauthorized" }; } // 2. Input validation const raw = Object.fromEntries(formData); const parsed = CreateTaskSchema.safeParse(raw); if (!parsed.success) { return { error: parsed.error.flatten() }; } // 3. Authorization: user must be in the board's team const board = await prisma.board.findUnique({ where: { id: parsed.data.boardId }, include: { team: { include: { members: true } } }, }); if (!board?.team.members.some(m => m.email === session.user.email)) { return { error: "Not a member of this team" }; } // 4. Create task try { const task = await prisma.task.create({ data: { title: parsed.data.title, description: parsed.data.description, boardId: parsed.data.boardId, assigneeId: parsed.data.assigneeId, dueDate: parsed.data.dueDate ? new Date(parsed.data.dueDate) : null, }, }); // 5. Revalidate board page cache revalidatePath(`/boards/${parsed.data.boardId}`); return { data: task }; } catch (err) { console.error("Failed to create task:", err); return { error: "Failed to create task. Please try again." }; } }

"use client"; import { DndContext, closestCorners } from "@dnd-kit/core"; import { SortableContext } from "@dnd-kit/sortable"; import { updateTaskStatus } from "@/server/tasks"; import { TaskCard } from "./task-card"; type Props = { board: BoardWithTasks }; export function KanbanBoard({ board }: Props) { const columns = ["TODO", "IN_PROGRESS", "REVIEW", "DONE"]; async function handleDragEnd(event: DragEndEvent) { const { active, over } = event; if (!over || active.id === over.id) return; // Optimistic update (instant UI) + server sync await updateTaskStatus(active.id as string, over.id as TaskStatus); } return ( <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}> <div className="flex gap-4 overflow-x-auto p-4"> {columns.map(status => ( <div key={status} className="min-w-[280px] bg-gray-50 rounded-xl p-3"> <h3 className="font-bold text-sm mb-3"> {status} ({board.tasks.filter(t => t.status === status).length}) </h3> <SortableContext items={board.tasks.filter(t => t.status === status)}> {board.tasks .filter(t => t.status === status) .map(task => <TaskCard key={task.id} task={task} />)} </SortableContext> </div> ))} </div> </DndContext> ); }

## Prompt ke Claude Code / Cursor Review file src/server/tasks.ts untuk: 1. Security vulnerabilities (injection, auth bypass, data leak) 2. Performance issues (N+1 queries, missing indexes) 3. Error handling completeness 4. TypeScript strictness 5. Edge cases yang belum di-handle 6. Compliance dengan CLAUDE.md rules Format output: - CRITICAL: harus fix sebelum merge - WARNING: sebaiknya fix - INFO: nice-to-have improvement

# 1. Start feature $ git checkout -b feat/US-001-create-task # 2. Code with AI (multiple small commits) $ git add -A && git commit -m "feat(task): add Prisma schema for Task model" $ git add -A && git commit -m "feat(task): add createTask server action with validation" $ git add -A && git commit -m "feat(task): add TaskCard component" $ git add -A && git commit -m "test(task): add unit tests for createTask" # 3. Push and create PR $ git push -u origin feat/US-001-create-task $ gh pr create --title "feat: US-001 Create Task" --body "Implements task creation with Kanban board integration" # 4. AI review (Claude Code or Cursor) # 5. Merge to main after review passes $ gh pr merge --squash