stepdue

• 

  Stepdue Logo

Inspiration

We were frustrated about how easily we get distracted while studying. We often mindlessly switch tabs for a second and lose focus for countless minutes wandering off. While most focus/study tools simply block websites or send you pop-up reminders, we just get used to repeatedly extending our time for 15 more minutes. This habitual bypassing of restriction doesn't really help how we focus.

What it does

Stepdue is a browser extension that visualize your behavior in real time during sessions. When starting a session, Stepdue provides a detailed report of focus score, per-domain breakdown, and long-term analytics. It simply helps users measure how their time has been spent. With the logarithmic timeline bar at the top of the screen, the user can see how their current session is going. The longer the session is, the more compact it gets. It's a subtle way of displaying how your time is distributed since 30 seconds, 1 min, 5 min, 15 min, 30 min, 1 hr, etc. With multiple categories to create and modify, the user can track their behavior exactly how they want to do.

How we built it

We built stepdue as a Manifest V3 Chrome extension with a service worker that tracks tab activity in real time. It broadcasts update while listening to tab switches and URL changes and segments the domain activities.

The content script renders visualization bar using shadow DOM. The pop-out utilizes HTML and CSS to display any tools or analytics. On the backend, we used Azure Functions to handle session storage and content classification. Session reports are saved in Azure Blob Storage and displayed through a hosted analytics dashboard built with a static web app.

Challenges we ran into

The biggest challenge was working with real-time synchronization with the background service worker and the content scripts. It was pretty difficult to make the timeline to update smoothly in real-time without breaking up every second.

Accomplishments that we're proud of

We are really proud of how the focus bar updates smoothly with the analytics with Azure backend accurately reflecting the browsing behavior of the users.

What we learned

We were able to learn about lifecycle management and cross-tab communication under Manifest V3. On the product side, we found out that finding the balance between visibility and annoyance was the highest priority. We also found out that that behavior analytics only work if the user feels like they are in control. Giving the users the ability to categorize and manage their own time turned out to be essential.

What's next for stepdue

We want to implement smarter content classification to handle video and contextual content within the domain. So far, we were able to categorize the type of youtube video and take it to consideration to automatically sort into categories, but we want to be able to implement more to other websites too. Also, we want to implement cross-device checks to ensure the user retains focus across their devices.

Built With

• chromeextensionapi
• css3
• html5
• javascript
• microsoftazure
• node.js
• restfulapi
• youtubedataapi