Gamified productivity web app built in a 24-hour hackathon
Team lead on a 24-hour hackathon project: a gamified productivity web app where tasks are “bomb wires” that must be cut before detonation to reinforce accountability through task verification.
Case Study
Problem
Standard to-do apps are boring and easy to ignore. Make task completion emotionally high-stakes by framing each task as a bomb wire that must be cut before a timer detonates.
Architecture
- Vanilla JavaScript frontend with canvas-based "bomb wire" rendering
- Python Flask backend for task persistence and timer management
- WebSocket channel for real-time countdown synchronisation across clients
- Task verification modal before "wire cut" to prevent accidental completion
Challenges
- Implementing convincing bomb-timer UX in under 24 hours with a team
- Coordinating timer state between clients via WebSockets without a full backend framework
- Balancing game tension with usability (timers that are too short frustrate rather than motivate)
Tradeoffs
- Chose Flask + vanilla JS over a heavier stack to move faster during the hackathon
- Persisted tasks in memory (no DB) to avoid setup overhead; acceptable for a demo
Outcome
Functional gamified to-do app demoed at HackCMU 2025; drew consistent crowd engagement during judging.
What I Learned
- WebSocket state synchronisation patterns for real-time collaborative UIs
- Rapid prototyping under hackathon time pressure and team coordination
- How gamification mechanics change user motivation vs traditional UI patterns