I Took Some Time to Create a Time Tracker


In my quest of finding the ultimate productivity framework, I came across the Pomodoro technique. The basic idea behind it is to divide the work into equal chunks of time and take a small break after each set. Usually it goes by working for 25 minutes in complete concentration, taking a 5 minutes break and repeating the cycle until the task is completed.

Motivation

It was the beginning of January this year when I decided to use the Pomodoro technique to help me study for my finals. However, I could not find a web app with a simple interface to use and thought it would be a good practice to build it. I remember it was right before the start of my odd semester final exams when I started the project. As you know, finals is the time in which you can achieve all what you wanted since the beginning of the semester, except studying of course. Having built the app, it actually came of a great help. In fact I’m using it right now as I’m writing this post (took me 5 sets to finish it).

I kept in mind to keep the interface as simple as possible. The home page is where you can start/stop the timer. There’s also a tracker page where you can keep track of your sets. I named it Panadoura. The name Panadoura comes from the Arabic word for tomato.

CherryTomato home

Architecture

It started out with simple CoffeeScript file that runs and stops the timer and served it in a Sinatra app. Then added some more stuff along the way. Besides being a simple web app, the reason why I started with Sinatra was that I wanted to get out from under Rails umbrella and try some other alternatives for the web in Ruby. Of course, this comes with a lot of tradeoffs. Rails embraces the convention over configuration philosophy which makes it super easy to setup new applications and get to the work quickly. To try something different, I had to have some kind of a shift in mind. I also needed to write some bootstrapping scripts in order to glue the different components of my app together.

The architecture is a bit different from the normal MVC Rails-y way. It resembles the structure of a normal Ruby gem where the main logic in the app lives under lib/ directory whereas the application routes and views are in app/.

The application layer consists of a single file that defines all the routes to the web app. It contains the logic that authorizes the users from Twitter and routes them to the home page. It calls two helper classes; one to load the assets, and another to configure user sessions.

For the persistence layer, I used rom-rb which philosophy is to decouple different responsibilities and distribute them over many components/layers. I had to write a wrapper to load the database settings and connect ROM to PostgreSQL. I also wrote a simple method to run the migrations. I used Sequel mainly for its simplicity and flexibility. In 2018, I rewrote the persistence layer and removed rom-rb entirely as I felt it was too complicated and the application at hand was so simple feature-wise. I also had to write a wrapper around Sequel to connect to the database.

For the presentation layer, Panadoura is now a Vue.js app backed by a Sinatra server. I rewrote the frontend code as well in JavaScript. The assets are now bundled into a single JavaScript file using WebPack 4.

Currently, I’m using Heroku experimental tier to host the app. The source code is on GitHub.