by on 2017-01-03

Introducing Timecard App

When I got an email from my dad’s office saying the program I wrote about 10 years ago stopped working, I had two choices: fix it, or rebuild it from scratch.

I was shocked to hear they were still using it. Imagine your 10th grade English teacher calling you up asking if you could print another copy of your essay on To Kill a Mockingbird, because the copy she was using got worn out. It’s a cool feeling to know that thoughts I’ve had a decade ago were still being useful out in the world.

Usually in these cases it’s easier and faster to patch whatever broke and let it limp along, but there were some new technologies I wanted to play with, and I’ve been kicking around ideas for how I would make it better.

The problem is straightforward (though one of my more ambitious projects of my youth): given the typed-in raw data of a timecard (a sheet of paper office workers use to document when they start and stop working), calculate how many hours the worker has worked for the period (usually two weeks long).

Here’s the input format I made up from typing in the physical timesheets:

1014+1252 1322+2000


1102+1648 1744+1952

and what a 14 year old Christian Genco made as output with a 257 line ruby script:

Screenshot of my original ruby program output

Functional, but not the prettiest thing in the world. The main thing I wanted to improve was the way the office manager interacts with the program. Here were the steps to use it:

  1. open WordPad (it won’t work if you type it up in any other editor)
  2. Type up the timesheet
  3. Save the timesheet text file
  4. Find where you saved it
  5. Drag and drop it onto a special icon I put on the Desktop
  6. Find the .html file with the same name as the file you made
  7. Open the .html file
  8. Print it

Web apps make everything easier, and I’ve been on a React kick recently, so I re-wrote the program as

The new

(it was also a nice opportunity to play with antd instead of my go-to Bootstrap)

In a few hours I had a much more usable workflow:

  1. Open
  2. Type up the timesheet (see it live update as you type to catch errors easier)
  3. Print it

Try it out at! If you have ideas for how it could be better, I’d love to hear them.