AI Vibe 08 — Capstone: Build an App with AI

Prompt to get architecture suggestion:

"I'm building a task manager web app. Stack: Vue 3 + TypeScript
 frontend, Laravel 11 REST API backend, MySQL database.

 Features needed:
 - User registration and login (Sanctum token auth)
 - CRUD tasks (title, description, due date, priority, status)
 - Filter tasks by status (pending/completed)
 - Responsive layout for mobile and desktop

 Give me:
 1. Database schema (tables and columns)
 2. API endpoint list (method, path, description)
 3. Vue component list with their responsibilities
 4. Pinia store structure
 5. Any potential pitfalls to watch for"

Generate the Pinia tasks store:

"Write a Pinia tasks store in TypeScript with:
 State: tasks (Task[]), loading (boolean), error (string|null),
        filter ('all'|'pending'|'completed')
 Getters: filteredTasks (applies filter to tasks array)
 Actions:
   fetchTasks() → GET /api/tasks
   createTask(data) → POST /api/tasks
   updateTask(id, data) → PUT /api/tasks/{id}
   deleteTask(id) → DELETE /api/tasks/{id}
   toggleComplete(id) → PATCH /api/tasks/{id}/toggle

 Use the axios instance from src/api/client.ts.
 Handle loading state and errors in each action."

Generate TaskCard component:

"Write a Vue 3 TaskCard component (TypeScript, Tailwind).
 Props: task: Task (id, title, description, dueDate, priority,
               status: 'pending'|'completed')
 Emits: 'toggle', 'delete', 'edit'
 Design: white card, rounded, shadow
          checkbox to toggle completion (strikethrough when done)
          priority badge (red=high, yellow=medium, green=low)
          due date shown, red if overdue
          edit and delete icon buttons"

Generate the migration:

"Write a Laravel migration for the tasks table:
 - id (bigint, primary)
 - user_id (foreign key → users.id, cascade delete)
 - title (string, 255, required)
 - description (text, nullable)
 - due_date (date, nullable)
 - priority (enum: 'low','medium','high', default 'medium')
 - status (enum: 'pending','completed', default 'pending')
 - timestamps

 Add index on user_id and status."

Generate the controller:

"Write a Laravel 11 API controller TaskController with methods:
 index()  → return authenticated user's tasks (paginated 20/page)
            Support ?status= filter
 store()  → create task for auth user (validate: title required,
            priority in [low,medium,high], due_date date|nullable)
 update() → update task (same validation, owned by auth user)
 destroy()→ delete task (owned by auth user)
 toggle() → toggle status between pending/completed

 Use: Auth::user(), TaskResource, Form Request, Policy for ownership.
 Return 403 if task belongs to another user."

Frontend unit tests:

"Write Vitest tests for the tasks Pinia store.
 Test these scenarios:
 1. fetchTasks() sets tasks array on success
 2. fetchTasks() sets error string on API failure
 3. createTask() adds task to the array
 4. deleteTask() removes task by id
 5. filteredTasks getter returns correct subset for each filter value
 Mock the axios calls using vi.mock."

Backend feature tests:

"Write PHPUnit feature tests for TaskController.
 Use RefreshDatabase. Test:
 1. Unauthenticated user gets 401 on all endpoints
 2. User can create a task (assert in DB)
 3. User can only see their own tasks (not other users')
 4. User gets 403 trying to delete another user's task
 5. Toggle changes status pending→completed→pending"

Security review prompt:

"Review my TaskController for security issues.
 Specifically check:
 - Is every action scoped to the authenticated user?
 - Is there any way a user could access another user's tasks?
 - Are all inputs validated?
 - Could any input cause SQL injection?
 - Are there mass assignment vulnerabilities in the Task model?
 [paste controller code]"

Code quality review:

"Review the TasksPage.vue component for:
 - Any performance issues (unnecessary re-renders, missing keys)
 - Accessibility (aria labels, keyboard navigation, focus management)
 - Missing loading/empty/error states
 - Any TypeScript type safety issues
 [paste component]"