Design Trello (Kanban Board with Real-time Collaboration) - Frontend System Design Interview Guide

Design a production-ready Kanban board application that supports drag-and-drop card management, real-time multi-user collaboration, workspace/board/list/card hierarchy, rich card content, and offline capabilities.

Difficulty Note: This is a challenging frontend system design problem (Hard). It combines drag-and-drop UX, real-time synchronization, optimistic updates, and ordering conflict resolution.

Key Challenges:

• Smooth drag-and-drop across lists with optimistic position updates
• Real-time sync of card moves, list reorders, and edits across users
• Conflict resolution when users move the same card concurrently
• Maintaining position ordering under concurrent inserts
• Handling network latency and offline scenarios
• Card detail surfaces with attachments, comments, checklists, members
• Performance with large boards (1000+ cards across many lists)

Real-World Complexity:

This is a challenging frontend system design problem because it involves:

• Position ordering algorithms (fractional indexing / lexicographic keys)
• WebSocket management with reconnection logic
• Optimistic UI for drag-and-drop operations
• Complex state synchronization across boards/lists/cards
• Permission resolution at board and workspace scope