The 2 Hour Prototype Time Tracking App

I could not find a time tracking app or system that fit my vision. My wish list included something simple, efficient, and fits into my workflow. Knowing this is a very common task, I went looking around the webernet with the intention of paying a little something for a quality app. As expected, there were quite a few. Some with feature overload, crazy server requirements, or subscription based. That is when I decided to build one.

Don’t Overthink It, Just Start

I dedicated 2 hours of my morning schedule to see how far I could get. My  time tracking device at that time was a Google Sheet with simple time calculations. That spreadsheet served as my model for the app. It defined my data requirements, and it performed the basic tasks I needed for reporting.

Straight to the Whiteboard

2 hour app database whiteboard

Using the spreadsheet as a guide, I defined the columns of the database table. The only thing I added was an ID column to use as a primary key. I also used my best handwriting – ain’t it pretty?

2 hour app wireframe whiteboard

Next is the wireframe of the interface. In the initial sketch above I attempted to over-simplify by hiding the timestamps with buttons. I also over-complicated with a dropdown for the client input. I ended up exposing the timestamps to allow for editing (because I forget to hit start sometimes), and making the client input a plain text box. This saves me from building a client table in the database, and I don’t have to find a client in a long dropdown.

2 hour app report wireframe whiteboard

Last requirement for my specific workflow is reporting for monthly billing and budget tracking. I should have kept it as simple as my wireframe above, but I spent a little more time getting cute with rates and budgets which are not necessary.

Grab Your Bootstrap and Start Coding

Right away I copied a recent project folder that already had everything I needed: optimized bootstrap front end, databse connected back end, simple interface, and login system (if I end up hosting it). I named the new directory timetracker, because I am building a time tracker 👍. Next step, remove everything I do not need. And there we have it, ready to go.

Creating the Database the Easy Way

By only giving myself 2 hours, “fast” is the only setup requirement. I exported my current time tracking device, the Google Sheet, to a CSV file. Then I created the database, and imported the CSV to a new table. The database setup took less than a minute. Next I updated the config file to connect to the database. Done 😉.

Interface Building

Building the HTML form was simple, so I went straight to the time functions. Thanks to @wesbos and the first lesson of his JavaScript30 course on Vanilla JS, I already had a working clock. The start and finish buttons just take the current time and write it to the text input. For consistency and reporting I reformatted the timestamp to match my current timesheet.

The next step was to simply display all of the database data in a table below the form. The hardest part about this was calculating the time difference between start and finish, then converting it to a decimal numeral for billing.

Final step is sending the form data to the input script via AJAX, and adding a simple verification to make sure nothing is blank. Now I have a working prototype in less than 2 hours!

2 hour app homescreen

Using the App Every Day I Am Constantly Making Improvements

I added local storage on the inputs so that a browser crash or leaving the site you do not lose your place. In the Ajax call I clear the local storage on successful input to the database.

While running monthly reports directly in the database, it was simple to use these queries for a reporting function. Replacing the client and date range with variables, I added inputs to feed the query.

2 hour app reports screen

I decided to get cute and add the project rate and budget. To do this I created a calculation taking the total time in the results and multiply by the project rate. The budget portion was simple. If the total is less than the budget, color the amount green – or else color it red.

Planning for the Future & Feature Requests

In the future I would like to inlcude a client view with progress reports and a payment form. Another useful tool would be an alert system when budget is running low.  Maybe one day…