Bonk | Devpost

Inspiration

Due to the surge in digital distractions, many people struggle to stay productive and focused. In a survey we conducted, 64 out of 71 respondents reported getting sidetracked while working. Many existing productivity tools fail because they rely solely on self-accountability.

This led us to the Hawthorne Effect, which suggests that individuals perform better when they know they are being observed. We expanded this concept by creating a dedicated space for friends to hold each other accountable that targets the younger population.

What it does

Bonk is an accountability platform that keeps friends accountable through screen share; it uses social presence to reduce distractions and increase productivity. If you notice your friend getting sidetracked, you can virtually “bonk” them, which sends a notification with a “bonk” sound to nudge them back to work.

How we built it

We began with brainstorming various low-fidelity designs. Then we moved to Figma to visualize a high-fidelity version of the UI. We drew inspiration from Neocities, which involves monospace typography, 2D elements, hard borders, and a retro-cyberpunk color palette.

Whiteboard

On Friday afternoon, we settled on the concept of an accountability platform and spent the day sketching designs and planning the project architecture. We then implemented the React frontend, including the landing page, the monitoring grid, and the “bonk” button. Once the UI was functional, we built the backend with Express, Socket.io, and Node.js. We used WebRTC for live signaling and Google OAuth to handle user authentication.

Challenges we ran into and what we learned

We realized that if multiple people shared their screens while viewing the grid, there would exist an infinite mirror of screens across everyone on the website. This may be distracting and unideal to look at. After looking into platforms like Zoom and Twitch, we noted that their screen previews were static and limited viewing to one screen at a time. Ultimately, we implemented a check of if a user was viewing Bonk and was sharing their screen, their screen would no longer show their live activity, but that they're on the Bonk website.

Additionally, we found that hosting multiple live streams at once caused massive latency issues. So, we pivoted to showing snapshots of screens at 5-second intervals. Even without fluid, live video, activity can still be actively watched. We further mitigate this through the ability to watch an expanded stream, which tracks true, live activity. Another thing we grasped was the limitations of our features based on the tools we used. For example, we had to rely on the browser’s built-in screen-sharing functionality that allowed users to share a tab, app, or their entire screen. We felt that if users did not share their entire screen, it defeated the purpose of accountability. Our solution was to implement post-selection validation, which only allows the sharing of an entire screen. We strived to make this as frictionless as possible, providing a brief error message and immediately allowing the user to reselect an option.

Accomplishments that we're proud of

We’re proud to have set up a local server and integrated new tools like WebRTC and Socket.io. We celebrated when we saw each other’s screens from different computers and when we got Google authorization to work. Two of us completed our very first hackathon!