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…

Moving from BlueHost to SiteGround

Web Hosting History

I have spent a lot of time and effort into finding a trusted hosting solution for my sites, and my clients. Originally I was obsessed with the low price after having several sites hosted with Media Temple, burning a hole in my pocket. Media Temple is very fast, and very trusted, but you cannot afford to get any media mentions. By that I mean traffic spikes will either cost you a pretty penny, or they just let your site fail if you are on a starter shared plan.

All-In on BlueHost, Huge Mistake

I thought I had found the greatest thing ever: a hosting plan that includes unlimited domains, unlimited disk space, and unlimited storage for $12 per month. Immediately I signed up at BlueHost, moved my company domain, and started hosting my client insidemy account and reselling hosting. Big mistake.

DNS and SMTP Fail

Everything started to go wrong pretty quickly. My PHP formail scripts stopped working for emails using the website domain. BlueHost required that you have an email created on the server, even though you did not use their server for email or DNS, becaue they couldn’t figure out SMTP.

The Famous BlueHost Cache Dictatorship

Next, they forced a very intrusive cacheing protocal for all WordPress sites. This was their “fix” to slow WordPress performance. Do you know how frustrating it is to make a simple change to a stylesheet and the client can never see it? It was so bad I had pre-built an email explaining cache busting and instructions to clear your browser.

How to Make SSL More Difficult

When HTTPS became the standard, things got even worse. BlueHost forced every site using SSL to have their own account, and a dedicated IP (mor money, more money). And (to this day), did not offer a free SSL solution. So now I had my clients create their own accounts, buy a dedicated IP, buy an SSL cert, and pay twice as much. This created more problems than it solved.

Verify Domain Ownership, But Not Through Your Email

Once my clients had paid for their premium account, BlueHost asked them to verify domain ownership. A pretty straight forward process… should have been easy… but no. The cPanel interface gave my client a large amount of email address to use for verification, including the ICANN regitered domian owner email. Makes sense. Waiting days for my client to verify their domain I decided to contact tech support. They said none of the email options, including the registered owner email, can be used. Your only option is to create a new email, [email protected], no other email will work. Frustrating to say the least.

Without SSL Autorenew, Your Site Goes Down

This is the best – once you verify your domain,  wait extremely long to get it installed and working, your website will go down in exatly 12 months. That is due to their SSL autorenew script never worked. Every single client I sent to BlueHost had their site go down 1 year later. I was on vacation when one of my best clients SSL expired, I call in to BlueHost, spend 4 hours on the phone just to beg them to renew and reinstall the cert. They took a whole day to do it, and I lost a whole day of fresh powder. Admitidly, my anger and profanity probably added to the lack of urgency on their end. I was a dick.

BlueHost Does Not Offer HTTP/2

And finally, if you were lucky enough to get everything working again, you could not use HTTP/2. That was the solution to their WordPress problem a long time ago. WordPress experts my ass.

Switching to SiteGround

This domain was just forwarding to my web design company, so I decided to experiment with SiteGround. I signed up for the started package at $4 per month, accessed the cpanel, installed WordPress, and pointed the domain to the shared IP. Once the domain propagated I clicked on Lets Encrypt button, and with a quick domain verfication SSL was set. I changed the domain in WordPress and my site was secure on a shared IP (not possible on BlueHost), AND its using HTTP/2 automatically (also not possible on BlueHost.)

It was so damn simple to get everything I wanted, and it was/is $4 per month. Fuck you BlueHost!