PomoFriend

A Pomodoro timer and to-do checklist written in React, along with a website blacklister Chrome Extension.

Comment

Inspiration

As students, we wanted to make something that helps people focus in accomplishing deep work, a term for highly productive work in bursts. The Pomodoro study method was a common tool we utilized in our studies, so we decided to create a JavaScript Pomodoro timer with some other features.

What it does

The website allows the user to set a ratio of minutes working to minutes on a break, in addition to the amount of 'Pomodoro cycles' for longer sessions. The user can also create a brief to-do list with check boxes. The extension allows the user to blacklist websites they may not want to be tempted to use in work.

How we built it

We began by creating some basic drawings in Figma, showing a main menu, settings page, and dynamic Chrome extension icon. We then created a GitHub repo and got to work in Visual Studio Code.

Challenges we ran into

Initially, we wanted to make this tool a slick Chrome extension. This would allow us to read data of other open tabs with the Extension API and block websites on the blacklist. We wrote various menus in HTML and some JavaScript functionality with some success, but we encountered a roadblock in implementing user input into the Chrome Extension pop-up. Buttons with functionality in HTML broke when displayed in the extension, which hindered development. Additionally, parts of the UI written in React did not play well with the Chrome Extension API at all, which pushed us towards making a website instead. However, the website by nature could not read tab data beyond exiting the page, so we were forced to compromise being midway through the time allotted. We decided to keep blacklist functionality in the extension and link the website in it, allowing the React code to run outside of the extension. This resulted in a better looking timer than what we initially produced while keeping most of the functionality. However, despite trying everything from tab listeners to asynchronous functions, the blacklist functionality was not able to be implemented with user input by the deadline.

Accomplishments that we're proud of

3/4 members of our team had never written a single line of JavaScript, CSS, HTML, or React, and this was our first Hackathon! Despite this, we were able to make a functional project and implemented working features.

What we learned

We learned about the Google Chrome Extension API, Figma, JavaScript, CSS, and HTML. Though half of us had Git experience, this was the first time we were using a repo collaboratively.

What's Next?

The team wants to implement the full functionality from the Figma, and make the extension and website look prettier!

Share this project:

Updates