Building focus.radio: A Minimalist Productivity App with Programmatic Web Audio

Stop DoomScrolling! I Built the Tab I Actually Want to Open..

Judexify developed focus.radio to combat digital distraction using a React 18 and Zustand-based architecture. The system features a custom focus timer that leverages Web Workers to maintain accuracy even when browser tabs are throttled.

Why This Matters

Technical reality involves browser resource management like tab throttling that often breaks simple setInterval timers in productivity apps. By shifting logic to Web Workers and using the Web Audio API for programmatic sound generation, focus.radio ensures a resilient, offline-capable environment that bypasses network latency and CPU-saving interruptions.

Key Insights

• Web Audio API programmatic generation (2026): Rain and fire sounds are synthesized via pink noise and bandpass filters, eliminating the need for external MP3 assets.
• Web Worker-based timers: The focus timer runs off the main thread to bypass browser tab throttling, ensuring time accuracy during long-duration sessions.
• Zustand Persist Middleware: Local journal entries and growth streaks are managed in localStorage, allowing the app to function without a centralized database.
• Media Session API Integration: The app utilizes lock screen media controls on mobile devices, providing native-like interaction for a web-based PWA.

Practical Applications

• Use case: Offline-first productivity tools using Service Workers for zero-latency startup. Pitfall: Cache-first strategies might serve stale assets if versioning is not handled.
• Use case: Gamified consistency tracking via SVG manipulation based on local session data. Pitfall: Over-reliance on localStorage for critical data without cloud sync can lead to data loss if browser data is cleared.

References:

• https://dev.to/judexify/stop-doomscrolling-i-built-the-tab-i-actually-want-to-open-55df
• https://focus-radio.vercel.app/