All Projects
Case StudyRole: Full-Stack EngineerTimeline: 3 Months

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.

#Next.js 16#TypeScript#Tailwind CSS#Chromium Manifest V3 (MV3)#Chrome Extension APIs#Background Service Workers#PostgreSQL 14+#Prisma ORM 7#Auth.js / NextAuth v5#Service Workers#REST API
Privacy-First Focus Engine & Network Distraction Deflector screenshot slide 1
Click to open fullscreen lightbox
1 / 4

Click any preview to inspect in high resolution.

The Challenge

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 declarativeNetRequest engine 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.

The Solution

Approach & Implementation

  • Persistent Alarms & State Rehydration: Replaced vulnerable in-memory intervals with the chrome.alarms API and serialized state in chrome.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.js with origin verification → chrome.runtime.sendMessage with correlation requestIds) 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 concurrent chrome.tabs.query scan that immediately redirects already-open distracting tabs via chrome.tabs.update to the mindful breathing screen.

  • Zero-Bandwidth Procedural Audio Synthesis: Engineered a browser-native Web Audio API engine utilizing AudioBufferSourceNode, resonant BiquadFilterNodes, 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 BroadcastChannel API (dnd-timer-channel) and storage listeners for sub-4ms cross-tab state mirroring, paired with an automated document.visibilitychange listener that resets focus cycles to 1 across 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