Back to Articles

Mobile Kanban Boards: Building TaskFlow with Kotlin Coroutines and Firebase

How to build a real-time mobile Kanban board using Kotlin, Jetpack Compose drag-and-drop gestures, and Firebase Firestore for live task synchronization.

Mobile Kanban Boards: Building TaskFlow with Kotlin Coroutines and Firebase

Project management on mobile needs to feel as fluid as desktop tools. TaskFlow achieves this with native drag-and-drop gestures.


1. Drag-and-Drop in Jetpack Compose

We implemented custom drag modifiers that snap cards between columns with haptic feedback:

kotlin
@Composable fun DraggableCard(task: Task, onDrop: (Column) -> Unit) { var offset by remember { mutableStateOf(Offset.Zero) } Box(modifier = Modifier .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) } .pointerInput(Unit) { detectDragGestures( onDrag = { change, dragAmount -> offset += dragAmount }, onDragEnd = { onDrop(calculateTargetColumn(offset)) } ) } ) { TaskCardContent(task) } }

2. Real-Time Sync with Firestore

When a card moves columns, Firestore snapshot listeners propagate the change to all team members instantly.


3. GitHub Integration

The activity feed pulls recent commits and PRs from the GitHub API, keeping developers in context without switching apps.


Summary

Native gesture handling combined with real-time database sync delivers a mobile project management experience that rivals desktop tools.