Frontend & Backend Coordination | API-Aligned Teams
Align frontend and backend teams with task dependencies, API contract tracking, and integration milestones. GitScrum prevents blocking and reduces integration friction.
12 min read
Frontend and backend teams working in parallel often face coordination challenges: blocked work waiting for APIs, integration surprises, inconsistent priorities, and finger-pointing when timelines slip. GitScrum provides the visibility and structure to coordinate these parallel tracks, ensuring smooth handoffs and reduced integration pain.
Common Coordination Problems
When frontend and backend teams work separately:
| Problem | Symptom | Impact |
|---|---|---|
| API not ready | Frontend blocked, using mocks indefinitely | Integration delays |
| API changes without notice | Frontend breaks after integration | Rework, frustration |
| Different priorities | Teams working on unrelated features | Misaligned delivery |
| Unclear contracts | Both teams assume different behaviors | Bug-filled integration |
| No shared visibility | Each team blind to other's progress | Late surprises |
| Blame culture | "We were waiting on them" | Low trust, poor collaboration |
GitScrum Coordination Structure
Shared Board Setup
Board Configuration for Cross-Team Work:
OPTION 1: UNIFIED BOARD
┌─────────────────────────────────────────────────────────────┐
│ FEATURE DEVELOPMENT │
├─────────────────────────────────────────────────────────────┤
│ │
│ Backlog │ Backend │ Frontend │ Integra- │ Testing │Done│
│ │ Dev │ Dev │ tion │ │ │
│ ───────────┼──────────┼──────────┼──────────┼─────────┼────│
│ [User │ [API: │ │ │ │ │
│ Profile] │ Profile]│ │ │ │ │
│ │ BE: Alex │ │ │ │ │
│ │ │ │ │ │ │
│ [Dash- │ [API: │ [UI: │ │ │ │
│ board] │ Stats] │ Stats │ │ │ │
│ │ BE: Sam │ Widget] │ │ │ │
│ │ │ FE: Kim │ │ │ │
│ │ │ │ │ │ │
│ │ │ [UI: │ [Int: │ │ │
│ │ │ Charts] │ Charts] │ │ │
│ │ │ FE: Pat │ FE+BE │ │ │
└─────────────────────────────────────────────────────────────┘
OPTION 2: LINKED BOARDS
┌─────────────────────────────────────────────────────────────┐
│ BACKEND BOARD FRONTEND BOARD │
├─────────────────────────────────────────────────────────────┤
│ │
│ To Do│In Prog│Review│Done ║ To Do│In Prog│Review│Done │
│ ─────┼───────┼──────┼──── ║ ─────┼───────┼──────┼──── │
│ [API:│ │ │ ║ [UI: │ │ │ │
│ User│ │ │ ║ User│ │ │ │
│ ────┼───────┼──────┼──────╬───────┼───────┼──────┼──── │
│ Blocks: UI: User Profile] ║ Blocked by: API: User] │
│ ║ │
│ Links show dependencies between boards │
└─────────────────────────────────────────────────────────────┘
Task Dependency Setup
Configuring Cross-Team Dependencies:
TASK DEPENDENCY CONFIGURATION:
┌─────────────────────────────────────────────────────────────┐
│ TASK: UI - User Profile Page │
│ Team: Frontend │
│ Assignee: Kim │
├─────────────────────────────────────────────────────────────┤
│ │
│ DEPENDENCIES: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Blocked By (must complete first): ││
│ │ ││
│ │ ├── [✓] API: User Authentication (Done) ││
│ │ ├── [→] API: User Profile CRUD (In Progress) ││
│ │ │ Assignee: Alex ││
│ │ │ ETA: Tomorrow ││
│ │ │ Status: 80% complete ││
│ │ └── [○] API: Profile Image Upload (To Do) ││
│ │ Assignee: Sam ││
│ │ ETA: Next sprint ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Blocks (waiting on this): ││
│ │ ││
│ │ └── [○] Integration: User Profile E2E Tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ WORK MODE: │
│ ○ Wait for all dependencies │
│ ● Start with mocks, integrate when ready │
│ ○ Start only after blockers done │
│ │
│ MOCK STATUS: │
│ Using mock API: Yes │
│ Mock endpoint: /mocks/user-profile.json │
│ Real API ready: Partial (2 of 3 endpoints) │
└─────────────────────────────────────────────────────────────┘
DEPENDENCY VISUALIZATION:
┌─────────────────────────────────────────────────────────────┐
│ DEPENDENCY GRAPH │
├─────────────────────────────────────────────────────────────┤
│ │
│ [API: Auth] ────► [API: Profile] ────► [UI: Profile] │
│ ✓ → ○ │
│ │ │ │
│ ▼ ▼ │
│ [API: Image] ───────► [Integration] │
│ ○ ○ │
│ │
│ Legend: ✓ Done → In Progress ○ Waiting │
└─────────────────────────────────────────────────────────────┘
API Contract Management
API Specification as Tasks
API Contract Tracking:
API SPECIFICATION TASK:
┌─────────────────────────────────────────────────────────────┐
│ API CONTRACT: User Profile Endpoints │
│ Type: Contract • Status: Approved │
├─────────────────────────────────────────────────────────────┤
│ │
│ SPECIFICATION: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ GET /api/v1/users/:id/profile ││
│ │ ││
│ │ Response: ││
│ │ { ││
│ │ "id": "uuid", ││
│ │ "email": "string", ││
│ │ "name": "string", ││
│ │ "avatar_url": "string | null", ││
│ │ "created_at": "ISO8601", ││
│ │ "preferences": { ││
│ │ "theme": "light | dark", ││
│ │ "notifications": "boolean" ││
│ │ } ││
│ │ } ││
│ │ ││
│ │ Errors: ││
│ │ 401: Unauthorized ││
│ │ 404: User not found ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ APPROVAL STATUS: │
│ ├── Backend: ✓ Approved (Alex) │
│ ├── Frontend: ✓ Approved (Kim) │
│ └── Date: Jan 15, 2024 │
│ │
│ IMPLEMENTATION STATUS: │
│ ├── Backend: ✓ Implemented, deployed to staging │
│ ├── Frontend: → Using in development │
│ └── Integration tested: Pending │
│ │
│ CHANGELOG: │
│ v1.1 (Jan 20): Added preferences object │
│ v1.0 (Jan 15): Initial contract │
└─────────────────────────────────────────────────────────────┘
Contract Change Workflow
Managing API Changes:
CHANGE REQUEST FLOW:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Backend Contract Frontend │
│ proposes ──► review ◄── reviews │
│ change task impact │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ Discussion │ │
│ │ in task │ │
│ └─────────────┘ │
│ │ │
│ ┌──────────┼──────────┐ │
│ ▼ ▼ ▼ │
│ [Approve] [Negotiate] [Reject] │
│ │ │ │ │
│ ▼ │ ▼ │
│ Update spec │ Keep current │
│ Implement │ │
│ │ │ │
│ ▼ ▼ │
│ Notify affected teams │
│ │
└─────────────────────────────────────────────────────────────┘
CONTRACT CHANGE TASK:
┌─────────────────────────────────────────────────────────────┐
│ CONTRACT CHANGE REQUEST │
│ API: User Profile │
├─────────────────────────────────────────────────────────────┤
│ │
│ PROPOSED CHANGE: │
│ Add "last_login" field to profile response │
│ │
│ REASON: │
│ Security audit requires displaying last login time │
│ │
│ IMPACT ASSESSMENT: │
│ ├── Backend: Low (add field from existing data) │
│ ├── Frontend: Medium (add display component) │
│ └── Timeline: Can ship with current sprint │
│ │
│ DISCUSSION: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ @Alex (BE): "Field ready, just need approval" ││
│ │ @Kim (FE): "Can we make it optional for now? ││
│ │ We're mid-sprint on profile page" ││
│ │ @Alex: "Yes, will be null for users who ││
│ │ haven't logged in since migration" ││
│ │ @Kim: "Perfect, approved ✓" ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ STATUS: Approved │
│ Implement by: Sprint 24 │
└─────────────────────────────────────────────────────────────┘
Integration Milestones
Feature Integration Points
Integration Milestone Planning:
FEATURE: User Dashboard
┌─────────────────────────────────────────────────────────────┐
│ INTEGRATION MILESTONES │
├─────────────────────────────────────────────────────────────┤
│ │
│ Week 1 │
│ ├── API: Authentication ───┐ │
│ │ ├──► INT-1: Auth works │
│ └── UI: Login flow ───┘ with real API │
│ Date: Jan 22 │
│ Status: ✓ Done │
│ │
│ Week 2 │
│ ├── API: Dashboard stats ───┐ │
│ │ ├──► INT-2: Stats display │
│ └── UI: Stats widgets ───┘ Date: Jan 29 │
│ Status: → Today │
│ │
│ Week 3 │
│ ├── API: Chart data ───┐ │
│ │ ├──► INT-3: Charts live │
│ └── UI: Chart components ───┘ Date: Feb 5 │
│ Status: ○ Scheduled │
│ │
│ Week 4 │
│ └── Full integration testing ────► INT-4: E2E complete │
│ Date: Feb 12 │
│ Status: ○ Scheduled │
│ │
└─────────────────────────────────────────────────────────────┘
Integration Testing Tasks
Integration Task Structure:
INTEGRATION TASK:
┌─────────────────────────────────────────────────────────────┐
│ INT-2: Stats Widget Integration │
│ Type: Integration • Sprint: 23 │
├─────────────────────────────────────────────────────────────┤
│ │
│ COMPONENTS: │
│ ├── Backend: API-45 Stats Endpoint (Alex) ✓ │
│ ├── Frontend: UI-89 Stats Widget (Kim) ✓ │
│ └── Integration: This task (Kim + Alex) │
│ │
│ CHECKLIST: │
│ ☑ Both components individually complete │
│ ☑ Deploy backend to staging │
│ ☑ Connect frontend to staging API │
│ ☐ Verify data flows correctly │
│ ☐ Test error handling │
│ ☐ Performance acceptable (< 200ms) │
│ ☐ Cross-browser testing │
│ ☐ Mobile responsive │
│ │
│ ENVIRONMENT: │
│ Staging URL: staging.app.com │
│ API Base: staging-api.app.com/v1 │
│ │
│ ATTENDEES: │
│ Integration session: Jan 29, 2pm │
│ @Kim @Alex @QA-Jordan │
│ │
│ NOTES: │
│ "Found edge case with empty data - Alex adding │
│ empty state response. ETA: 30 min" │
└─────────────────────────────────────────────────────────────┘
Cross-Team Visibility
Standup Coordination
Using Team Standup for Cross-Team Updates:
COMBINED STANDUP VIEW:
┌─────────────────────────────────────────────────────────────┐
│ DAILY STANDUP - Jan 29, 2024 │
├─────────────────────────────────────────────────────────────┤
│ │
│ BACKEND TEAM │
│ ────────────────────────────────────────────────────────────│
│ Alex: │
│ Yesterday: Completed stats API endpoint │
│ Today: Adding empty state handling │
│ Blockers: None │
│ 📌 "Stats API ready for integration @ 3pm" │
│ │
│ Sam: │
│ Yesterday: Image upload research │
│ Today: Starting implementation │
│ Blockers: Need S3 bucket access │
│ │
│ FRONTEND TEAM │
│ ────────────────────────────────────────────────────────────│
│ Kim: │
│ Yesterday: Stats widget UI complete │
│ Today: Integration with real API │
│ Blockers: Waiting on stats API │
│ 📌 "@Alex - ready when you are for integration" │
│ │
│ Pat: │
│ Yesterday: Chart library evaluation │
│ Today: Chart component scaffolding │
│ Blockers: None │
│ │
│ CROSS-TEAM SYNC ITEMS: │
│ ├── INT-2: Stats integration scheduled 2pm │
│ ├── API change: last_login field approved │
│ └── Next integration: Charts (Feb 5) │
└─────────────────────────────────────────────────────────────┘
Progress Dashboard
Cross-Team Progress View:
FEATURE PROGRESS: User Dashboard
┌─────────────────────────────────────────────────────────────┐
│ │
│ BACKEND PROGRESS │
│ ████████████████████░░░░░░░░░░ 65% │
│ ├── Auth API ████████████████████ 100% ✓ │
│ ├── Stats API ████████████████████ 100% ✓ │
│ ├── Charts API ████████████░░░░░░░░ 60% → │
│ └── Export API ░░░░░░░░░░░░░░░░░░░░ 0% ○ │
│ │
│ FRONTEND PROGRESS │
│ █████████████████░░░░░░░░░░░░░ 55% │
│ ├── Login UI ████████████████████ 100% ✓ │
│ ├── Stats Widgets ████████████████████ 100% ✓ │
│ ├── Chart Display ████████░░░░░░░░░░░░ 40% → │
│ └── Export UI ░░░░░░░░░░░░░░░░░░░░ 0% ○ │
│ │
│ INTEGRATION PROGRESS │
│ █████████░░░░░░░░░░░░░░░░░░░░░ 33% │
│ ├── INT-1: Auth ████████████████████ 100% ✓ │
│ ├── INT-2: Stats ████████████░░░░░░░░ 60% → Today │
│ ├── INT-3: Charts ░░░░░░░░░░░░░░░░░░░░ 0% ○ Feb 5 │
│ └── INT-4: E2E ░░░░░░░░░░░░░░░░░░░░ 0% ○ Feb 12 │
│ │
│ OVERALL: 51% complete │
│ Target: Feb 15 (Beta) │
│ Status: ✓ On Track │
└─────────────────────────────────────────────────────────────┘
Communication Patterns
Slack/Teams Integration
Automated Cross-Team Notifications:
NOTIFICATION RULES:
┌─────────────────────────────────────────────────────────────┐
│ Cross-Team Notification Setup │
├─────────────────────────────────────────────────────────────┤
│ │
│ WHEN: API task moves to "Done" │
│ NOTIFY: #frontend-team channel │
│ MESSAGE: "🟢 API ready: [Task Title] │
│ Staging: [URL] │
│ Docs: [Link] │
│ Blocks: [Linked FE tasks]" │
│ │
│ WHEN: API contract created/updated │
│ NOTIFY: #frontend-team + #backend-team │
│ MESSAGE: "📋 Contract update: [API Name] │
│ Change: [Summary] │
│ Review needed: [Assignees]" │
│ │
│ WHEN: Integration task created │
│ NOTIFY: Both team channels │
│ MESSAGE: "🔗 Integration scheduled: [Task] │
│ Date: [Date/Time] │
│ Participants: [Names]" │
│ │
│ WHEN: Blocker added to task │
│ NOTIFY: Blocking team's channel │
│ MESSAGE: "🚫 Blocked: [Task] is waiting on [Blocker] │
│ Owner: [Assignee] │
│ Impact: [Blocked tasks list]" │
└─────────────────────────────────────────────────────────────┘
Sync Meetings
Coordination Meeting Structure:
WEEKLY CROSS-TEAM SYNC:
┌─────────────────────────────────────────────────────────────┐
│ AGENDA (30 min max) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. INTEGRATION STATUS (5 min) │
│ - What integrated this week? │
│ - Any integration issues? │
│ │
│ 2. COMING HANDOFFS (10 min) │
│ - APIs completing this week │
│ - Frontend needs from backend │
│ - Backend needs from frontend │
│ │
│ 3. CONTRACT UPDATES (5 min) │
│ - Any pending contract changes? │
│ - Breaking changes coming? │
│ │
│ 4. BLOCKERS (5 min) │
│ - Cross-team blockers │
│ - Resolution owners │
│ │
│ 5. NEXT INTEGRATION (5 min) │
│ - Date, time, participants │
│ - What to prepare │
│ │
│ OUTPUT: │
│ - Updated task statuses in GitScrum │
│ - Action items assigned │
│ - Next integration scheduled │
└─────────────────────────────────────────────────────────────┘
Best Practices
For Smooth Coordination
Anti-Patterns to Avoid
AVOID THESE:
✗ "Big bang" integration at the end
✗ Verbal API agreements (no written contracts)
✗ Waiting for perfect APIs before starting frontend
✗ Separate backlogs with no visibility
✗ Integration as "someone else's problem"
✗ Changing APIs without notifying consumers