Tri Today

Tri Today is a just-for-me app I made to help myself train for a triathlon. It’s a single mobile webpage which told me what I needed to do that day: run, bike, swim, lift, or rest. It also included a daily inspirational quote, a countdown to race day, and a reminder of each leg’s distances (in miles because I don’t think in kilometers).

Use case

I saved a shortcut to the Tri Today page on my phone’s homescreen. In the morning before I left for the gym I tapped it to see what my training was that day so I knew what to pack (swim versus running gear). Then, at the gym, I’d check it again to make sure I completed the right times and distances. Sometimes I’d look ahead to tomorrow to pre-pack my gym bag so I didn’t have to think in the morning.

Screenshots

Just like the code, this page design is just-okay-enough to get the job done.

Rationale

I’m a beginner, casual, aspiring triathlete who completed one race years ago. I set my sights on proving to myself I could do it again by completing the shortest possible triathlon, a super sprint. Training for a triathlon is complicated because you have to get good at all three parts of the race (as well as transitions), and I wanted to continue my usual strength training routine as well.

It is hard to remember what day was for what activity especially on the go, and squinting at a spreadsheet is no fun. A single, nicely-formatted reminder of what activity I was doing that day at what distance along with a nice quote made training easier. I am sure there are some amazing training apps out there for triathletes, but I wanted to see what the smallest, simplest solution could be for me.

How I built it

I researched and compiled my training plan in a simple Google Sheet, where each row represented a day between the start of my training to race day. I worked in rest days, off days, and my strength training routine. I used the Couch-to-5k program for my running plan (my worst activity), and notes on the length of the two pools I was swimming in to set my Apple Watch accordingly when I started.

Once the sheet was complete, I needed a nice mobile-friendly, single-day view for it.

I used Lovable to make this quickly. My first prompt was:

Make a single page website called “Today’s Training Plan” that displays what activity is in the triathlon training plan for today. It should pull its data from this public Google Sheet (linked to sheet here) and get the date from the Date column. The page should show the data in the Activity column in big, bold, readable text in a mobile friendly format. Use lots of whitespace, and emoji for rest, swim, bike, run, strength training. Allow the user to look at other days with a small “tomorrow” link with a hackable URL that allows the user to enter any date into the URL query and see that day’s activity. Also, add a way to manually refresh the data from the spreadsheet (a button or a link).

That prrompt produced an okay starting point to refine from there. I went on to add support for multiple activities in a day—like a light bike after lifting—and added the race day countdown. I had to re-prompt Lovable multiple times to make the layout mobile-friendly and arrange the information to my liking, and at times used the visual editor to arrange it myself. The first few weeks I used it I’d come back and make small changes to my Sheet data and the layout to get it perfect.

Notes

This was a fun proof-of-concept for using a Google Sheet as my data backend versus dealing with a database. I could easily make changes to my plan in the sheet and see them reflected in Tri Today without having to build any sort of CMS or spin up Supabase (Lovable’s database backend).

Tri Today looked a lot nicer than any sort of single-record view I could have put together in Google Sheetss itself, and it was a fast and fun build/iterate cycle. Most of all, it motivated me to train and made me think about what elements of the interface would help most.

Back to Projects