Building a PWA Kanban Board: Technical Deep Dive
How we built KanbanBoardFree as a Progressive Web App with offline support, push notifications, and near-native performance.
Why PWA?
Native apps require separate codebases for iOS, Android, Windows, and Mac. A PWA works everywhere with a single codebase. Users install it from the browser — no app store approval needed.
The tech stack
- Astro — Static site generation for the landing page and docs
- Tailwind CSS v4 — Utility-first styling with zero runtime
- Vanilla TypeScript — No framework overhead for the app
- IndexedDB — Local storage for offline-first data
- Service Worker — Offline caching and push notifications
Offline-first architecture
Every change writes to IndexedDB first, then syncs to the network when available. This means the app works fully offline — on planes, in tunnels, behind corporate firewalls.
Performance optimization
We achieved a 78KB first paint by:
- Using vanilla JS (no React/Vue overhead)
- Tree-shaking unused CSS
- Lazy-loading non-critical scripts
- Using Web Workers for heavy computations
Push notifications
Push notifications remind users of due dates and mentions. We use the Web Push API with VAPID keys for secure, encrypted notifications.
What's next
We're working on WebGPU-accelerated analytics, WebSocket real-time sync, and native iOS/Android apps built with Capacitor.