Multi-Agent Project: Build a Codebase with 3 Claude Agents

# docs/api.yaml
openapi: 3.0.3
info:
  title: TaskBoard API
  version: 1.0.0

paths:
  /api/auth/register:
    post:
      summary: Register a new user
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                name: { type: string }
                email: { type: string, format: email }
                password: { type: string, minLength: 8 }
      responses:
        201:
          description: User created
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/AuthResponse"

  /api/auth/login:
    post:
      summary: Login
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                email: { type: string }
                password: { type: string }
      responses:
        200:
          description: Login successful
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/AuthResponse"

  /api/projects:
    get:
      summary: List user's projects
      security: [{ bearerAuth: [] }]
      responses:
        200:
          description: Project list
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: "#/components/schemas/Project"
    post:
      summary: Create project
      security: [{ bearerAuth: [] }]
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                name: { type: string }
                description: { type: string }
      responses:
        201:
          description: Project created

  /api/projects/{projectId}/tasks:
    get:
      summary: List tasks in project
      security: [{ bearerAuth: [] }]
      parameters:
        - name: projectId
          in: path
          required: true
          schema: { type: string }
      responses:
        200:
          description: Task list grouped by status

    post:
      summary: Create task
      security: [{ bearerAuth: [] }]
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                title: { type: string }
                description: { type: string }
                status: { type: string, enum: [todo, in_progress, done] }
                assigneeId: { type: string }

  /api/tasks/{taskId}:
    patch:
      summary: Update task (status, assignee, etc.)
      security: [{ bearerAuth: [] }]

  /api/tasks/{taskId}/comments:
    get:
      summary: List comments on task
    post:
      summary: Add comment to task

components:
  schemas:
    AuthResponse:
      type: object
      properties:
        token: { type: string }
        user:
          type: object
          properties:
            id: { type: string }
            name: { type: string }
            email: { type: string }

    Project:
      type: object
      properties:
        id: { type: string }
        name: { type: string }
        description: { type: string }
        createdAt: { type: string, format: date-time }

    Task:
      type: object
      properties:
        id: { type: string }
        title: { type: string }
        description: { type: string }
        status: { type: string, enum: [todo, in_progress, done] }
        assignee:
          type: object
          properties:
            id: { type: string }
            name: { type: string }
        createdAt: { type: string, format: date-time }

  securitySchemes:
    bearerAuth:
      type: http
      scheme: bearer
      bearerFormat: JWT

mkdir -p taskboard/{server,client,tests,docs}

You are the backend agent for a task management app.

Your workspace: server/
API contract: ../docs/api.yaml (follow this exactly)

Build an Express + PostgreSQL API with Prisma:
1. User auth (register, login) with JWT
2. CRUD projects — users see only their own projects
3. CRUD tasks within projects — with status (todo, in_progress, done)
4. Task assignment — assign to project members
5. Task comments — add and list comments

Database schema:
- User: id, name, email, passwordHash, createdAt
- Project: id, name, description, ownerId, createdAt
- ProjectMember: userId, projectId, role (owner/member)
- Task: id, title, description, status, projectId, assigneeId, createdAt, updatedAt
- Comment: id, content, userId, taskId, createdAt

Requirements:
- TypeScript throughout
- Input validation with zod
- Proper error handling with status codes
- CORS enabled for http://localhost:5173
- Runs on port 3001
- Follow the OpenAPI spec in ../docs/api.yaml exactly

server/
  src/
    routes/
      auth.ts
      projects.ts
      tasks.ts
      comments.ts
    middleware/
      auth.ts
      validate.ts
      errorHandler.ts
    lib/
      prisma.ts
      jwt.ts
    index.ts
  prisma/
    schema.prisma
  package.json
  tsconfig.json

You are the frontend agent for a task management app.

Your workspace: client/
API contract: ../docs/api.yaml (follow this exactly)
API base URL: http://localhost:3001

Build a React frontend with Vite + Tailwind CSS:
1. Login page at /login
2. Register page at /register
3. Dashboard at / — list of user's projects with "New Project" button
4. Project page at /projects/:id — kanban board with 3 columns:
   - Todo, In Progress, Done
   - Cards show: title, assignee avatar, comment count
   - Drag and drop between columns (use @dnd-kit/core)
5. Task detail modal — click a card to open:
   - Title, description, status dropdown, assignee dropdown
   - Comments section with add comment form
6. Header with user name and logout button

Requirements:
- TypeScript throughout
- Tailwind CSS for styling
- Dark sidebar, light content area
- Store JWT in memory (not localStorage)
- Use React Query for API calls
- Mobile responsive

import { DndContext, DragEndEvent, closestCenter } from "@dnd-kit/core";

function KanbanBoard({ projectId }: { projectId: string }) {
  const { data: tasks, refetch } = useQuery({
    queryKey: ["tasks", projectId],
    queryFn: () => api.getTasks(projectId),
  });

  const updateTask = useMutation({
    mutationFn: ({ taskId, status }: { taskId: string; status: string }) =>
      api.updateTask(taskId, { status }),
    onSuccess: () => refetch(),
  });

  const columns = [
    { id: "todo", title: "Todo", color: "border-gray-400" },
    { id: "in_progress", title: "In Progress", color: "border-blue-400" },
    { id: "done", title: "Done", color: "border-green-400" },
  ];

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (!over) return;

    const taskId = active.id as string;
    const newStatus = over.id as string;

    updateTask.mutate({ taskId, status: newStatus });
  }

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <div className="flex gap-4 h-full overflow-x-auto p-4">
        {columns.map((column) => (
          <KanbanColumn
            key={column.id}
            id={column.id}
            title={column.title}
            color={column.color}
            tasks={tasks?.filter((t: Task) => t.status === column.id) || []}
          />
        ))}
      </div>
    </DndContext>
  );
}

class ApiClient {
  private token: string | null = null;

  setToken(token: string) {
    this.token = token;
  }

  clearToken() {
    this.token = null;
  }

  private async request(path: string, options: RequestInit = {}) {
    const headers: Record<string, string> = {
      "Content-Type": "application/json",
      ...(this.token ? { Authorization: `Bearer ${this.token}` } : {}),
    };

    const res = await fetch(`http://localhost:3001${path}`, {
      ...options,
      headers: { ...headers, ...(options.headers as Record<string, string>) },
    });

    if (res.status === 401) {
      this.clearToken();
      window.location.href = "/login";
      throw new Error("Unauthorized");
    }

    if (!res.ok) {
      const error = await res.json();
      throw new Error(error.message || "Request failed");
    }

    return res.json();
  }

  login(email: string, password: string) {
    return this.request("/api/auth/login", {
      method: "POST",
      body: JSON.stringify({ email, password }),
    });
  }

  register(name: string, email: string, password: string) {
    return this.request("/api/auth/register", {
      method: "POST",
      body: JSON.stringify({ name, email, password }),
    });
  }

  getProjects() {
    return this.request("/api/projects");
  }

  createProject(name: string, description: string) {
    return this.request("/api/projects", {
      method: "POST",
      body: JSON.stringify({ name, description }),
    });
  }

  getTasks(projectId: string) {
    return this.request(`/api/projects/${projectId}/tasks`);
  }

  updateTask(taskId: string, data: Partial<Task>) {
    return this.request(`/api/tasks/${taskId}`, {
      method: "PATCH",
      body: JSON.stringify(data),
    });
  }

  getComments(taskId: string) {
    return this.request(`/api/tasks/${taskId}/comments`);
  }

  addComment(taskId: string, content: string) {
    return this.request(`/api/tasks/${taskId}/comments`, {
      method: "POST",
      body: JSON.stringify({ content }),
    });
  }
}

export const api = new ApiClient();

You are the testing agent for a task management app.

Your workspace: tests/
API running at: http://localhost:3001
Frontend running at: http://localhost:5173
API contract: ../docs/api.yaml

Write two test suites:

1. API tests (tests/api/) using supertest + jest:
   - Auth: register, login, invalid credentials, duplicate email
   - Projects: create, list, get, update, delete, unauthorized access
   - Tasks: create, list, update status, assign, unauthorized access
   - Comments: create, list

2. E2E tests (tests/e2e/) using Playwright:
   - Registration flow: fill form, submit, redirected to dashboard
   - Login flow: fill form, submit, see projects
   - Create project: click "New Project", fill form, see it in list
   - Create task: click "Add Task", fill form, see it in kanban column
   - Drag task: drag from "Todo" to "In Progress", verify status changed
   - Task detail: click task card, see modal, add comment

Requirements:
- Each test should be independent (clean database state)
- Use a test database (different from development)
- Playwright tests should run in headless Chromium
- Include a test setup script that seeds the test database

import request from "supertest";

const API = "http://localhost:3001";

describe("Auth", () => {
  let token: string;

  test("register new user", async () => {
    const res = await request(API).post("/api/auth/register").send({
      name: "Alex Test",
      email: `test-${Date.now()}@example.com`,
      password: "password123",
    });
    expect(res.status).toBe(201);
    expect(res.body.token).toBeDefined();
    expect(res.body.user.name).toBe("Alex Test");
    token = res.body.token;
  });

  test("login with valid credentials", async () => {
    const email = `login-${Date.now()}@example.com`;
    await request(API).post("/api/auth/register").send({
      name: "Sam",
      email,
      password: "password123",
    });

    const res = await request(API).post("/api/auth/login").send({
      email,
      password: "password123",
    });
    expect(res.status).toBe(200);
    expect(res.body.token).toBeDefined();
  });

  test("login with wrong password", async () => {
    const res = await request(API).post("/api/auth/login").send({
      email: "wrong@example.com",
      password: "wrongpassword",
    });
    expect(res.status).toBe(401);
  });

  test("register with duplicate email", async () => {
    const email = `dup-${Date.now()}@example.com`;
    await request(API).post("/api/auth/register").send({
      name: "User 1",
      email,
      password: "password123",
    });

    const res = await request(API).post("/api/auth/register").send({
      name: "User 2",
      email,
      password: "password123",
    });
    expect(res.status).toBe(409);
  });
});

describe("Projects", () => {
  let token: string;

  beforeAll(async () => {
    const res = await request(API).post("/api/auth/register").send({
      name: "Project Tester",
      email: `proj-${Date.now()}@example.com`,
      password: "password123",
    });
    token = res.body.token;
  });

  test("create project", async () => {
    const res = await request(API)
      .post("/api/projects")
      .set("Authorization", `Bearer ${token}`)
      .send({ name: "Test Project", description: "A test project" });
    expect(res.status).toBe(201);
    expect(res.body.name).toBe("Test Project");
  });

  test("list projects", async () => {
    const res = await request(API)
      .get("/api/projects")
      .set("Authorization", `Bearer ${token}`);
    expect(res.status).toBe(200);
    expect(Array.isArray(res.body)).toBe(true);
    expect(res.body.length).toBeGreaterThan(0);
  });

  test("unauthorized access", async () => {
    const res = await request(API).get("/api/projects");
    expect(res.status).toBe(401);
  });
});

import { test, expect } from "@playwright/test";

test.describe("Task Management App", () => {
  const testEmail = `e2e-${Date.now()}@example.com`;
  const testPassword = "password123";

  test("user can register", async ({ page }) => {
    await page.goto("/register");

    await page.fill('[name="name"]', "E2E Tester");
    await page.fill('[name="email"]', testEmail);
    await page.fill('[name="password"]', testPassword);
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL("/");
    await expect(page.locator("text=My Projects")).toBeVisible();
  });

  test("user can login", async ({ page }) => {
    await page.goto("/login");

    await page.fill('[name="email"]', testEmail);
    await page.fill('[name="password"]', testPassword);
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL("/");
  });

  test("user can create a project", async ({ page }) => {
    // Login first
    await page.goto("/login");
    await page.fill('[name="email"]', testEmail);
    await page.fill('[name="password"]', testPassword);
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL("/");

    // Create project
    await page.click("text=New Project");
    await page.fill('[name="projectName"]', "Test Project");
    await page.fill('[name="projectDescription"]', "Created by E2E test");
    await page.click("text=Create");

    await expect(page.locator("text=Test Project")).toBeVisible();
  });

  test("user can create a task", async ({ page }) => {
    // Login and navigate to project
    await page.goto("/login");
    await page.fill('[name="email"]', testEmail);
    await page.fill('[name="password"]', testPassword);
    await page.click('button[type="submit"]');

    await page.click("text=Test Project");

    // Create task
    await page.click("text=Add Task");
    await page.fill('[name="taskTitle"]', "Test Task");
    await page.fill('[name="taskDescription"]', "Created by E2E test");
    await page.click("text=Create Task");

    await expect(page.locator("text=Test Task")).toBeVisible();
  });

  test("user can drag task between columns", async ({ page }) => {
    // Login and navigate
    await page.goto("/login");
    await page.fill('[name="email"]', testEmail);
    await page.fill('[name="password"]', testPassword);
    await page.click('button[type="submit"]');

    await page.click("text=Test Project");

    // Drag task from Todo to In Progress
    const task = page.locator('[data-testid="task-card"]').filter({ hasText: "Test Task" });
    const inProgressColumn = page.locator('[data-testid="column-in_progress"]');

    await task.dragTo(inProgressColumn);

    // Verify task is now in In Progress column
    await expect(
      inProgressColumn.locator('[data-testid="task-card"]').filter({ hasText: "Test Task" })
    ).toBeVisible();
  });
});

git clone https://github.com/kemalcodes/vibe-coding-projects.git
cd vibe-coding-projects
git checkout multi-agent

# Start the database
docker compose up -d postgres

# Start backend
cd server
npm install
npx prisma migrate dev
npm run dev

# Start frontend (new terminal)
cd client
npm install
npm run dev

# Run API tests (new terminal)
cd tests
npm install
npm run test:api

# Run E2E tests
npm run test:e2e