4 min lecture • Guide 322 of 877
How to Coordinate Frontend and Backend Development
Frontend and backend development often proceed in parallel but need coordination. GitScrum enables synced development with component labels, dependency tracking, and shared visibility—reducing integration surprises and keeping both tracks aligned toward the same features.
Coordination Challenges
Why Teams Get Out of Sync
FRONTEND-BACKEND COORDINATION PROBLEMS:
┌─────────────────────────────────────────────────────────────┐
│ COMMON SYNC FAILURES │
├─────────────────────────────────────────────────────────────┤
│ │
│ ❌ API MISMATCH: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • Frontend expects X, backend returns Y ││
│ │ • Field names don't match ││
│ │ • Missing error handling cases ││
│ │ • Discovered at integration (too late) ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ ❌ TIMING MISMATCH: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • Frontend done, waiting on backend ││
│ │ • Backend done, frontend not started ││
│ │ • Integration blocked by one side ││
│ │ • Feature can't ship complete ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ ❌ SCOPE MISMATCH: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • Frontend builds extra features ││
│ │ • Backend missing required fields ││
│ │ • Different understanding of requirements ││
│ │ • Rework required on both sides ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘
Board Organization
Coordinated Workflow
| Column | Purpose |
|---|---|
| Backlog | Features requiring both FE/BE |
| API Design | Contract definition |
| Ready | API agreed, ready to build |
| BE Development | Backend in progress |
| FE Development | Frontend in progress |
| Integration | Both done, testing together |
| Done | Fully integrated |
Label System
Track Dependencies
COORDINATION LABELS:
┌─────────────────────────────────────────────────────────────┐
│ LABELS FOR SYNC │
├─────────────────────────────────────────────────────────────┤
│ │
│ COMPONENT LABELS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ component:frontend ││
│ │ component:backend ││
│ │ component:api ││
│ │ component:full-stack ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEPENDENCY LABELS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ depends:backend → Frontend waiting on BE ││
│ │ depends:frontend → Backend waiting on FE ││
│ │ depends:api-design → Waiting on contract ││
│ │ blocks:integration → Blocking feature completion ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ STATUS LABELS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ api:draft → Contract being designed ││
│ │ api:agreed → Contract finalized ││
│ │ api:implemented → Backend ready ││
│ │ api:integrated → Frontend consuming ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘
API Contract First
Design Before Building
CONTRACT-FIRST WORKFLOW:
┌─────────────────────────────────────────────────────────────┐
│ API DESIGN PROCESS │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. FEATURE IDENTIFIED: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • Create parent task: "User Profile Feature" ││
│ │ • Identify API needs ││
│ │ • Create "API Design" subtask ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ 2. CONTRACT DESIGN: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • BE and FE developers collaborate ││
│ │ • Document in NoteVault: ││
│ │ - Endpoints ││
│ │ - Request/response shapes ││
│ │ - Error codes ││
│ │ - Edge cases ││
│ │ • Label: api:agreed when done ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ 3. PARALLEL DEVELOPMENT: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • BE builds to contract ││
│ │ • FE builds to contract (mock API initially) ││
│ │ • Both can proceed independently ││
│ │ • Integration smoother ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘
Team Standup Visibility
Seeing Both Tracks
| Tab | Coordination Use |
|---|---|
| Today | See both FE and BE in progress |
| Blockers | Identify cross-team blocks |
| Weekly | Activity balance between tracks |