Punch Clock Web App
My devember project is to build a fullstack manual activity tracking application.
I will build a web application where I will be able to “clock into” and “clock out of” an activity, such as reading a book, working on a side project, or doing exercise.
It will also let me manage a set of time based “goals”, such as “average one hour of reading per day” or “six hours of physical exercise a week”.
There will be a set of visualization views which will allow me to see how I spend my time and if I’m meeting my preset goals.
I wish to gain skills in these areas:
- application design
- frontend development
- slicing a project into deliverable chunks
- delivering a “product” which I will use daily
- solving the needs of other people
- integration with other existing time tracking solutions
During the lockdown in late 2020, I began thinking about how I spend my free time.
I realized that even though I really enjoy reading books and I have lots of them on my to-read list, I don’t actually spend a lot of time reading them.
This was making me unhappy.
In the past I tried to build a reading habit by focusing on goals such as: “I want to finish this book by the end of this month”.
At first, when I was strongly motivated, and such deadlines were easy to meet, everything was great and I felt a lot of satisfaction from meeting them.
However, over time, the deadlines became a source of anxiety and were demotivating me.
In early 2021 I dediced to formulate my reading goals not in terms of “books finished by a certain date”, but rather as “time spent reading”.
My reasoning was that this kind of goal was closer to what I was actually trying to achieve.
I began tracking time spent reading in text file on my computer, then note taking applications and google sheets and eventually built a small web application which would be easy to use from my phone.
This approach turned out to be very successfull for me.
I’ve been meeting and exceeding my reading goals for 10+ months now and feeling better because of it.
In 2022, I would like to try to extend this approach to tracking other activities such as doing regular physical exercise or learning a new language.
I want to rebuild my reading tracker application into a more generic time tracking application.
I am aware that there already exist time tracking applications out there.
I am deliberately not experimenting with them and not mining them for ideas.
I want my system to be my own, I want to come up with my own ideas and test them.
I want to eat my own dogfood and drink my own champagne.
I will build upon the things I’ve learned with my reading tracker application and probably even reuse some compnents of it (particularly some of the data visualization stuff that I’m already happy with).
- The user is able to access the application through web browser on my computer and on my phone.
- The user can only access their own data.
- The user is able to clock-into an activity and clock-out-of an activity, the service tracks the time spent in between.
- The user is able to retroactively adjust the bounds of a clocked interval or to delete it completely.
- The user is able to track multiple different activities independently.
- The user is able to define time-spent based goals for each activity.
- The user is able to review their time spent and how it compares to their goals in a visual interface.
- The user is able to retroactively adjust the metadata (such as activity details) associated with a clocked interval.
This is a no-brainer because of the $100 I get to play with thanks to the promotion with L1techs.
I have some experience running containerized services from managed platforms like GCP, AWS and heroku, but running it directly from a box will be new to me so it will be a good opportunity to learn.
- clojure web server
- postgresql database
I’m already familiar with clojure and enjoy working with it, and in this project I want to focus on developing design and frontend skills so I will not do anything too ambitions here.
Similarly with the database, I will stick with postgresql because I’m already comfortable with it.
- htmx + hyperscript
- bulma css framework
I learned about htmx a few months ago and have been looking for an excuse experiment with it ever since.
My original reading-tracker application was written in
re-frame so I may fall back to that stack if I have trouble with htmx.
I will use a css framework for this project instead of building my own styles from scratch because in my experience, debugging css is very frustrating and time consuming.
- Build a draft of the ui and interaction logic backed by mock data and in-memory only storage
- Familiarize myself with linode, deploy a basic web server (cookie-based auth) and database
- Design and implement a data model to support hard-coded clockable activities and clock-in/clock-out logic (with considerations for expansion to dynamic activities)
- Add basic data visualization interface
- Post MVP
- Manage clockable activities through the application itself
- Link a clocked interval with multiple activities at once (for example “Reading SICP” could count both as “Reading” and “learning CS theory”)
- Dynamic clockable activity generation (for example loading up list of currently-reading books from goodreads)
I regularly push my codebase to gitlab.
I started working on a draft of the interface about a week before making this post (the
For stuff related directly to the code, I make notes in the commit messages themselves.
I will also be posting progress updates as comments in this thread.