Tracker

What exactly is it?

I've never been a gym workout type of guy, but during covid-19 isolation one of the topics with friends and family was how to stay active. The idea of a 30 day multi activity challenge came up and we decided to give it a shot. A schedule was made, and off we went.

But a piece of paper? That's not very exciting. Something better could be put together to digitize this.

So, an interactive webapp was born.

Leveraging the obvious timeline of it "ending" after 30 days, multiple versions were made to improve the experience and features over the 3 months we were keeping up on it.

The original feature list

• Mobile friendly
• Easy to know which day it is
• Because of multiple groups starting on different days (and timezones) different start days
• Single day view
• Sets to break down the activity
• Check off activity (or set) as you go
• Shortcut links if you're looking on a phone
• New background image curated from my photos

V2 improvements

• Visual refinements
• Variable activity counts
• Stopwatch for timed activities
• Introduced usage of localStorage to remember what you checked off with a lightweight memory solution
• Even deeper set breakdowns
• New set of background images

V3 improvements

• More visual refinements
• "Alternative activity" swap to choose

How does it work?

Exploring codepen's projects (hence why it's not a github project). I started off wanting to try to make the most lightweight solution I could think of. I conciously went with only the basics: html, css, js (jquery and modernizr for ease).

For the second iteration, I changed the html to use Nunjucks templating to remove the redundency of the entries. It also allowed for data seperation into json style arrays.

Needing to be time aware from when we started, javascript date's were leveraged as the basis to keep track of variations (different start dates, and timezones factored in).

Keeping track of which activities are completed (or partially completed) for returning later was a feature request that could mean a refactor to figure out a storage solution. Keeping to the idea of a lightweight solution the javascript window.localStorage layer was introduced.

What did I learn?

The idea of developing directly in codepen (not just a snippet) was interesting. It's like trying out a new editor (all the little differences). Some limitations, but also some ease of uses to speed up development.

This was also my first time using Nunjucks (chosen because it was natively accessible in codepen). It behaves just like other templating languages but was interesting to learn.

Overall, my favorite part was getting to have a project that had a baked in user group that I could discuss with (did a feature plan and then ran through it before development even started). I then also had the oportunity to enhance the project over it's versions. It was like a full app building project in it's own little world!