Timer Quest

Inspiration

As students, we constantly bounce between assignments, lectures, socials, and endless online distractions. We noticed how easy it is to lose track of time on platforms like YouTube, TikTok, or Reddit — even when we don’t want to. Existing productivity tools felt too strict, too boring, or too easy to ignore. So we asked ourselves: “What if time-management felt friendly, fun, and interactive?”

TimerQuest was born from the idea of turning productivity into a small adventure, guided by the most charismatic mascot ever, the one and only Clocky, that gently helps you back on track.

What it does

TimerQuest is a Chrome extension and webapp combo that helps users stay mindful of their online habits. It tracks time spent on specific websites, lets you set custom limits, and alerts you the moment you exceed them. TimerQuest makes productivity fun again through a ladder-style progression system with achievements and streaks, all while giving you a clear understanding of how you spend your time in the browser.

How we built it

We built TimerQuest using a combination of HTML, CSS, and JavaScript inside Visual Studio Code for the Chrome extension, handling the service worker logic, time tracking, centered popup windows, and UI interactions. The web dashboard was developed with React.js and styled using MUI to keep the design consistent with the extension’s theme. For authentication, data syncing, and storage, we used Supabase with SQL tables to track user habits, achievements, and progression. We connected the extension to the webapp through Chrome’s messaging APIs and Supabase endpoints.

Challenges we ran into

One of the biggest challenges was understanding how the frontend and backend fit together, since none of us had worked with a full-stack setup before. Figuring out how the Chrome extension’s service worker, the React webapp, and the Supabase database communicated with each other took a lot of trial and error. Debugging MV3 permissions, window management, and asynchronous data syncing also pushed us out of our comfort zone, but taught us a lot along the way.

Accomplishments that we're proud of

We’re proud that we were able to build a fully working Chrome extension and webapp from scratch, especially with technologies that were new to us. Creating a consistent design, integrating the mascot, implementing real time-tracking logic, and connecting everything to Supabase were big achievements for us. Despite starting as total beginners, we ended up with a final project that we are proud of.

What we learned

We learned how to connect a frontend and backend for the first time, and how a Chrome extension communicates differently from a webapp. We also became more comfortable with React, Supabase, and Chrome’s MV3 APIs, especially service workers and window handling. Overall, we improved our understanding of how full-stack systems work together.

What's next for Timer Quest

Next, we plan to expand TimerQuest with better analytics, a stronger progression system, and more interactive features from the mascot as well as a stronger and smoother game and productivity experience. We also want to improve the web dashboard, refine the extension UI, sync the extension and the web app and eventually add full cross-device syncing and stronger productivity tools.