Fullstack Web App — Fullstack Web App Development Pipeline

Workflow

Phase 1: Preparation (performed directly by the orchestrator)

1. Extract from user input:
   • App Description: Purpose and core features of the web app to build
   • Technology Stack (optional): Preferred frameworks/libraries
   • Scale (optional): MVP/small/medium/large
   • Existing Code (optional): Existing project to extend
   • Deployment Platform (optional): Vercel/AWS/Docker, etc.
2. Create _workspace/ directory at the project root
3. Organize input and save to _workspace/00_input.md
4. If existing code is provided, analyze it and adjust relevant phases
5. Determine execution mode based on request scope (see "Scale-Based Modes" below)

Phase 2: Team Assembly and Execution

Assemble the team and assign tasks. Task dependencies are as follows:

Tasks 2a (frontend), 2b (backend), and 2c (DevOps) run in parallel. All depend only on Task 1 (design).

Inter-team Communication Flow:

• architect completes → delivers component structure/routing to frontend, API/DB/auth to backend, infrastructure requirements to devops, functional requirements to qa
• frontend ↔ backend: Real-time communication during API integration (endpoint changes, error formats, etc.)
• devops completes → shares environment variables and deployment URLs with all
• qa reviews all code and tests. On 🔴 required fix: requests fix from the relevant developer → rework → re-verify (max 2 rounds)

Phase 3: Integration and Final Deliverables

Organize final deliverables based on the QA review:

1. Verify all code and documents
2. Confirm all 🔴 required fixes from the review have been addressed
3. Report final summary to the user:
   • Architecture Design — _workspace/01_architecture.md
   • API Specification — _workspace/02_api_spec.md
   • DB Schema — _workspace/03_db_schema.md
   • Test Plan — _workspace/04_test_plan.md
   • Deployment Guide — _workspace/05_deploy_guide.md
   • Review Report — _workspace/06_review_report.md
   • Source Code — src/ directory

Scale-Based Modes

Adjust the agents deployed based on the scope of the user's request:

Leveraging Existing Code: If the user provides existing code, the architect analyzes it to identify extension points and deploys only the necessary agents.

Data Transfer Protocol

Error Handling

Test Scenarios

Normal Flow

Prompt: "Build me a to-do management web app. I need signup/login, to-do CRUD, and category classification features." Expected Result:

• Architecture: Next.js + Prisma + SQLite, ERD (users, todos, categories), 10+ API specs
• Frontend: Login/signup pages, dashboard, to-do CRUD UI, responsive
• Backend: Auth API, CRUD API, input validation, error handling
• Tests: Auth + CRUD test scenarios, 80% coverage target
• Deployment: Vercel deployment guide, GitHub Actions CI/CD

Existing Code Flow

Prompt: "Add payment functionality to this Next.js project" + existing code Expected Result:

• architect analyzes existing code, designs payment-related API/DB
• backend adds payment API, frontend adds payment UI
• qa tests payment flow

Error Flow

Prompt: "Build me a simple web app" Expected Result:

• Ambiguous requirements → architect proposes a basic CRUD app (memos/notes)
• MVP scale default stack (Next.js + SQLite) applied
• Review report notes "assumptions applied due to vague requirements"

Agent Extension Skills

Extension skills that enhance each agent's domain expertise: