TabTraitor

Inspiration Balancing intense academic sprints—like wrapping my head around complex Data Structures and Algorithms with Java—often requires hours of unbroken concentration. But solo studying has a fatal flaw: the moment the material gets tough, the urge to open a new tab and doomscroll becomes overwhelming. I realized that productivity lacks social accountability. I wanted to build a "social hostage" system where focus is a multiplayer game. If one person in a study group caves and switches tabs, the entire team suffers the penalty. The sheer guilt of being the "Tab Traitor" becomes the ultimate focus engine. How I Built It The core architecture relies entirely on the MERN stack, heavily exploiting native browser APIs for the heavy lifting. I built the frontend with React and Tailwind CSS, utilizing the browser's document.visibilityState and window.onblur event listeners. The exact moment a user navigates away from the active window, React captures the state change. For the backend, I leaned on Node.js and Express, architecting a real-time WebSocket infrastructure using Socket.io. Having previously built real-time broadcasting logic for emergency zero-touch alert systems, I adapted that low-latency data flow to handle study "Rooms." When a tab-switch event fires, the server instantly broadcasts a penalty payload to every other client in that specific room, resetting their shared timers. MongoDB handles the persistence, logging session durations, team streaks, and individual infraction counts. To quantify the team's performance, I implemented a formal decay model for the session's overall score. The final team focus score S drops exponentially with each infraction k, modeled as:

where S_{max} is the maximum possible score based on total time t, N is the number of active users in the room, and \lambda is the strictness multiplier. Challenges Faced The biggest hurdle was differentiating between legitimate focus breaks and false positives. Network latency sometimes caused a user's WebSocket connection to briefly drop and reconnect, which the system initially registered as a tab switch. I had to implement a strict debounce function and a grace-period buffer on the Node server to ensure that only deliberate visibilityState changes triggered the group penalty, rather than temporary network hiccups. What I Learned I deepened my understanding of browser-level event lifecycles and concurrent state management across distributed clients. More importantly, this project reinforced that you don't always need complex machine learning to create a highly engaging application; sometimes, combining a simple browser API with real-time web sockets and a clever psychological hook is enough to build something people actually want to use.