System Design Guide

advancedhigh Relevance12 min read

Design Jira/Trello Board Frontend

Architecting a project management kanban board with custom drag-and-drop mechanics, real-time board updates, and card inspectors.

Architecture Focus:

Drag & Drop mechanicsOptimistic state updatesCollab WebSockets sync

1. Problem Statement

Design a kanban board application that manages task columns, renders smooth drag-and-drop operations, and pushes updates to collaborator screens.

2. Business Context & User Friction

Project management tools require low input lag. Lagging drags or slow update syncs reduce user collaboration trust.

3. Requirements Matrix

Functional Requirements

Render task columns containing task cards lists.
Support drag-and-drop task movements with immediate visual layouts shifts.
Provide task card inspectors sidebar panels.

Non-Functional Requirements

Performance

Drag operations render under 16ms.
Zero full board re-renders during card drags.
Low memory footprints.

Scalability

Scale board capacities to hundreds of cards.
Pre-fetch card inspection details on hover.

Accessibility (a11y)

Provide keyboard fallback controls for drag-and-drop actions.
Accessible contrast highlights.

Security

Verify drag movements permissions.
Sanitize task composition inputs.

Reliability & Failover

Rollback card states if save APIs fail.
Reconnect WebSocket channels on drops.

Observability

Track drag frame dropouts.
Log WebSocket latency metrics.

4. Core User Flows

Dragging task card to Done

User clicks and holds a task card.
Card enters drag state; visual placeholders adjust instantly.
User releases card in 'Done' column; position updates optimistically.
API saves position; WebSocket notifies peer screens.

5. High-Level Design & Layers

The board uses normalized card state arrays, rendering drag operations via hardware acceleration and syncing states using WebSockets.

Frontend Layers

UI Layer: ColumnsGrid, KanbanColumn, TaskCard, InspectorSidebar.
State/Sync Layer: Board state reducer, WebSocket listener.
Service Layer: HTML5 Drag & Drop manager, optimistic rollback service.

Major Components

VirtualizedColumn: Renders task card arrays, handling drag enter events.
DragManager: Manages card transformations during drag actions.

Data Flow Pipelines

1. Drag actions update local layout coordinates.
2. Drop dispatches update position action.
3. Zustand store updates optimistically.
4. WebSockets push updates to peer networks.

6. Component Architecture & State Boundaries

Component	Responsibility	State Owned	Dependencies
BoardShell	Coordinates columns, drag managers, and inspector overlays.	Column map, active drag card	VirtualizedColumn, DragManager

7. State Management

Local UI State

Active drag coordinates
Sidebar toggle switches

Server Query Cache State

User profile details
Board configurations info

Global/Shared State

Active board ID
Normalized cards list

Real-Time & Sync State

Peers active drag markers
Board updates stream

8. API Contracts Design

PUT/api/v1/cards/:id/position

Save Card Position

Purpose: Save column/index update.

Sample Response:

{
  "card": {
    "id": "c1",
    "columnId": "col-done",
    "index": 0
  }
}

9. Caching Strategy

Browser/HTTP Cache

Local storage for board workspace preferences.

Edge CDN Caching

Edge cache static board shell assets.

Application Cache

Cache cards metadata details in memory.

Invalidation Policies

Clear caches on column deletion.

10. System Strategies Checklist

Performance Strategy & Budgets

Use CSS translate transforms during drags to utilize hardware acceleration.
Avoid board re-renders by isolating state to column components.
Throttle WebSocket layout sync events.

Inclusive Accessibility Design

Accessible drag fallback controls (Spacebar activates drag, arrow keys relocate card).
Announce card movements to screen readers.

Security Safeguards & Risks

Sanitize composer markdown text.
Verify column update permissions.

Telemetry & Production Observability

Log drag FPS dropouts.
Track WebSocket reconnect times.

Graceful Failure & Resilience

Rollback card positioning if save API returns error.
Render offline warning status cards.

Deployment, Rollout & CDN topologies

CSR board application deployed on edge CDNs.

11. Architectural Decisions & Tradeoffs

Decision: Optimistic local rollbacks vs blocking API checks during drag

Benefit:

Instant interface feedback without waiting for APIs.

Drawback:

Requires managing complex UI rollbacks on save failures.

When To Use: When building high-speed collaboration boards.

12. Interview Answer Framework

How to structure your defense of this architecture during a 45-minute technical system design session:

1. Opening Pitch

Explain that project boards require low drag latency. Outline how to separate column components to prevent full page re-renders.

2. Requirement Clarification Queries

Do we need support for keyboard drag fallbacks?
Should we support real-time peer drag indicators?

3. Core High-Level Architecture Block

Detail a BoardShell coordinating VirtualizedColumn components, DragManager modules, and WebSocket handlers.

4. Strategic Deep Dive Areas

Explain HTML5 Drag and Drop APIs.
Detail state architectures preventing full board redraws.

5. Summary & Defensive Tradeoffs

Conclude by detailing optimistic rollback strategies on connection loss.

13. Common Pitfalls & Extension Questions

Candidate Mistakes to Avoid

Re-rendering the entire board grid when a single card is dragged, causing heavy lagging.
Not handling save failures, leaving cards in incorrect out-of-sync columns.

Interviewer Follow-ups / Extensions

How do you implement sub-tasks rendering hierarchies inside virtualized rows?
How do you resolve race conditions when two users drag the same card simultaneously?

Previous ArticleGmail Web Client Frontend

All Case Studies

Next ArticleNotion Block-Based Editor