Sprint Focus 2.0

Gamify Your Focus with this chrome extension!

Comment

Inspiration

SprintFocus is already live with over 100 active users. We noticed that most productivity workflows are fragmented. Students and developers were juggling a Pomodoro timer, a Trello board, and a separate habit tracker just to get through the day. We wanted to fix this context switching. Our goal was to build an "all-in-one" productivity command center that lives where you work: the browser side panel. We didn't just want it to work; we wanted it to feel like leveling up in a game. The validation of this idea has been immediate, SprintFocus has organically grown to over 100 daily active users in just a few days on the Chrome Web Store.

What it does

SprintFocus is a Manifest V3 Chrome extension that transforms the browser Side Panel into a productivity powerhouse:

  • Smart Persistence Timer: A customizable Pomodoro timer that respects the user's flow. It leverages background service workers to keep running perfectly even when Chrome is minimized or tabs are dormant.
  • Integrated Task Management: A dual view system (Kanban & List) allowing users to drag and drop tasks without leaving their current webpage.
  • Gamified Analytics: A "GitHub style" activity heatmap, peak productivity hour analysis, and streak tracking that runs entirely offline. It features a polished, enterprise grade UI with 5 themes (including Dark Mode) and ensures 100% data privacy by keeping all storage local.

How we built it

We engineered SprintFocus using React 18 and TypeScript for a type safe, scalable architecture. The UI is styled with Tailwind CSS for a responsive, modern aesthetic that feels native to Chrome.

Key Technical Highlights:

  • Manifest V3 Architecture: We utilized modern Chrome APIs including Side Panel, Storage, and Alarms to adhere to the latest strict security standards.
  • Zero Dependency Charting: Instead of using heavy libraries like Chart.js which bloat bundle size, we wrote a custom SVG charting engine from scratch to render the heatmaps and graphs, ensuring the extension remains lightweight (<500kb).
  • State Synchronization: We used Chrome's Storage API as a "Single Source of Truth," implementing real time listeners to sync state instantly between the Popup, Side Panel, and Background Service Worker.

Challenges we ran into

  • The "Service Worker" Problem: In Manifest V3, background pages are replaced by Service Workers which terminate when inactive. Keeping a precise timer running without it getting "killed" by the browser required complex logic using the Chrome Alarms API rather than standard setInterval.
  • Context Syncing: When a user checks a task in the Side Panel, it needs to update in the Popup immediately. Managing this multi-context state without Redux required a custom observer pattern using chrome.storage.onChanged.
  • 1000+ Session Rendering: Rendering large analytics datasets caused UI lag. We solved this by virtualizing list rendering and optimizing our custom SVG logic to handle heavy data loads smoothly.

Accomplishments that we're proud of

  • Real World Traction: This isn't just a prototype. We successfully published to the Chrome Web Store and organically grew to 100+ active users in just a few days.
  • Enterprise Grade Polish: We focused heavily on UX/UI. With smooth transitions, theme switching, and a "glassmorphism" aesthetic, users have reported it feels like a native part of the browser.
  • Lightweight Engineering: Building our own charting engine allowed us to keep the extension incredibly fast and lightweight.
  • Privacy by Design: We proved you can build powerful analytics tools without tracking users. No cloud database, no cookies, just pure local storage.

What we learned

  • Manifest V3 Constraints: We gained a deep understanding of the limitations and security benefits of the new Chrome Extension architecture.
  • Complex State Management: How to orchestrate state across isolated browser contexts without heavy dependencies.
  • The Value of Polish: We learned that "looking good" is a feature. Our user retention is high because the tool is visually pleasing to use.

What's next for SprintFocus

  • AI Productivity Coach: Using local LLMs to analyze focus patterns and suggest optimal break times.
  • Integrations: Two-way sync with Notion and GitHub Issues.
  • Cross Browser Support: Porting the codebase to Firefox and Edge.
  • Focus Guard: A feature to automatically block distracting sites during active Sprint sessions.

Built With

Share this project:

Updates