As college students taking classes online, we know how hard it can be sometimes to stay on top of work. We wanted to create a tool to help us remove distractions from our virtual workspace.

What it does

Our Chrome extension, TimeMate, blocks websites from distracting you while you study. You can enter a set time you want to work distraction-free and the names of the websites you want to block. TimeMate will prevent you from browsing these websites for the time you chose, then restores access at the end of the session.

How we built it

We used Chrome’s extension developer mode to create the extension, using HTML and JavaScript to code the UI and logic. We first figured out how we wanted the extension to run and what features we wanted it to have, and then we tackled it step by step, first creating the HTML files for the UI, then adding logic and blocking functions with JavaScript, and finally polishing everything up at the end.

Challenges we ran into

This was our first time creating a project primarily with HTML and JavaScript, so it was very difficult learning how to use these languages for our project. There were many times where we didn’t know how to translate our ideas into code, but ultimately we were able to resolve or go around all of them.

Accomplishments that we're proud of

We’re proud of actually being able to create a functional product with little experience with developing chrome extensions. Additionally, there were many times when we just felt stuck, but we continued to push through and troubleshoot, ultimately creating a product that we are very proud of.

What we learned

We gained a lot of experience in coding in HTML and JavaScript, as well as with creating Chrome extensions. We learned how to develop a user-friendly product completely from scratch, from brainstorming features to implementing them and optimizing the user experience.

What's next for TimeMate

We’d like to improve the UI and add some features to customize the user’s studying experience. One idea we had was to provide statistics on the user’s most frequently-visited websites to give them insight on where they spend the most time online. Another was to have a pre-existing set of common “distractive” websites (Facebook, Twitter, YouTube, etc.) for the user to quickly select.

Share this project: