Time tracking made easy with Vue.js (Part 1)

As a full time developer who manages multiple client projects on a daily basis, I have to keep track of time spent on each project/site. I have to fill out a timesheet daily and submit it at the end of the week. I have to admit that I am a bit of a procrastinator and I would often forget to enter my time until half way through the week. By that point I had of course forgotten some of the things I had spent time on. Additionally, I have some clients that would prefer a more detailed breakdown of my time, like time per ticket/task instead of just how much time was spent working on the site overall.

I have used some other time tracking apps in the past (Upwork, Hubstaff, etc) but none of them are free and easily customizable. So I did what any good developer does in my position and I set out to hone my skills by trying something new. I have some experience working with Vue but i’ve never built a full SPA with it. I chose Vue for the same reason a lot of people choose Vue, it is an up and coming framework at the moment with a lot of flexibility and low learning curve/barrier to entry.

Here are the criteria I set out for the functionality of my app:

  1. Free with no signup/account required. I believe that simple tools like this should ACTUALLY be free and not syphon off all of your personal information behind your back.
  2. Ability to easily add/remove tasks and write simple descriptions.
  3. Easily track time spent on each task.
  4. Simple/Clean interface
  5. No database (SQL or NoSQL) required.
  6. Easily/freely self hosted on Github

Admittedly some of these requirements were easier than others. Building a simple To-do list in Vue is fairly trivial. Persisting your data to LocalStorage is also fairly trivial as long as you have worked with it before and understand the constraints. LocalStorage can only store strings so any JSON as to be stringified before being inserted/updated and parsed when being read. I have worked with LocalStorage a lot in the past so that was no issue.

I did run into some difficulties when adding the time tracking functionality. I spent some time doing various testing on the stopwatch functionality because obviously it is the most crucial part. This kind of functionality can be a little tricky to pull off in JavaScript especially dealing in the users browser. I started out basically using setInteral() to update a time variable for each task every second. The problem with this approach is that it is very inconsistent. setInterval() doesn’t work well when your application is in the background, i.e when the user is on another tab.

The solution I found to this problem is a wonderful package called worker-timers. I did some testing in both Chrome and Firefox over several weeks to make sure that this functionality was consistent. I will talk more about this process and maybe share some walk throughs of the code. For now you can try it out for yourself (and email me about any bugs). Also, here is a quick teaser/demo video I made to demonstrate the functionality.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top