Privacy-First Focus Engine & Network Distraction Deflector
Do Not Disturb (DND) is a modern, privacy-first focus and productivity platform that combines a Next.js 16 web application with a Chromium Manifest V3 companion browser extension. It shields users from digital distractions by intercepting blacklisted domains directly at the network boundary, generating procedural ambient audio in real-time, and tracking focus telemetry across local-first and cloud environments.

Project Screenshots
Click any preview to inspect in high resolution.
Problem & Goals
Ephemeral Service Worker Termination (Manifest V3): Chromium kills background service workers after ~30 seconds of inactivity, which terminates standard in-memory timers (
setInterval/setTimeout), risking dropped unblock events and out-of-sync session states.Browser Security Sandbox Isolation: The Next.js web application cannot directly invoke privileged extension APIs (
declarativeNetRequest,chrome.storage), creating latency, origin security risks, and cross-context communication hurdles.Already-Open Tab Bypass: The
declarativeNetRequestengine only intercepts future network navigations, allowing users to bypass blocking if distracting sites (like YouTube or Reddit) were already loaded in background tabs before starting a session.Media Streaming & Battery Overhead: Traditional focus audio apps stream 20–50MB looping audio files that buffer, sound repetitive, consume heavy bandwidth, and fail in offline or battery-saver environments.
Main Thread Audio Glitches: Synthesizing complex, continuous multi-node audio directly in the client risks audio dropouts and thread contention if not optimized for browser garbage collection and thread scheduling.
Background Tab Throttling & Timer Drift: Modern browsers aggressively clamp timer intervals to 1 execution per minute on hidden tabs, causing countdown counters and statistics to drift when tabs lose focus.
Multi-Tab Desynchronization: Users opening multiple dashboard tabs or running sessions across calendar midnight caused fragmented state, mismatched cycle counts, and delayed UI updates.
Offline-to-Cloud Data Merging: Allowing guest users to run 100% offline creates complex data reconciliation issues when they later authenticate, risking duplicate session records or lost local history during PostgreSQL/Prisma sync.
Approach & Implementation
Persistent Alarms & State Rehydration: Replaced vulnerable in-memory intervals with the
chrome.alarmsAPI and serialized state inchrome.storage.local, allowing the service worker to sleep cleanly and rehydrate session state instantly upon wake-up.Three-Tier Asynchronous Relay Bridge: Built a secure cross-context pipeline (
window.postMessage→content.jswith origin verification →chrome.runtime.sendMessagewith correlationrequestIds) to safely trigger privileged extension APIs from the web app without security leaks.Two-Tier Active & Passive Deflection Pipeline: Combined dynamic rule compilation via
declarativeNetRequest.updateDynamicRules(for future navigations) with a concurrentchrome.tabs.queryscan that immediately redirects already-open distracting tabs viachrome.tabs.updateto the mindful breathing screen.Zero-Bandwidth Procedural Audio Synthesis: Engineered a browser-native Web Audio API engine utilizing
AudioBufferSourceNode, resonantBiquadFilterNodes, and low-frequency gain modulation (LFOs) to generate non-looping rain, ocean waves, and 40Hz binaural beats with 0 MB of downloaded audio and under 1.5% CPU usage.Timestamp-Delta Drift Engine: Replaced ticking interval decrements with absolute epoch timestamp calculations (
targetEndTime - Date.now()), rendering countdown calculations completely immune to background tab throttling and sleep modes.Multi-Tab Sync & Daily Rollover Engine: Utilized the
BroadcastChannelAPI (dnd-timer-channel) and storage listeners for sub-4ms cross-tab state mirroring, paired with an automateddocument.visibilitychangelistener that resets focus cycles to1across calendar midnight boundaries.Idempotent Guest-to-Cloud Migration: Built an optimistic synchronization engine with a timestamp-based "last-write-wins" resolution model that automatically migrates local guest blocklists and session telemetry into PostgreSQL via Prisma ORM 7 transactions upon user login.
Technical Architecture
Core Architecture & Highlights
Network-Level Request Interception
Procedural Audio Synthesis
Local-First & Cloud Synchronization
Declarative Rule Engine
Relational Data Modeling
Cross-Context Extension Messaging
App Router Server Components
Zero-Bandwidth Client-Side Media