Project - The Training Log
Tags: projects, webdev, javascript, training
Published: 2021-02-19 11:36:14

---
title: Project - The Training Log
published: true
date: 2021-02-19 09:34:53 UTC
tags: projects,WebDevelopment,JavaScript,training
canonical_url: https://ramblestack.com/project-the-training-log
---

My aim for 2021 is to have a personal project on the side that I can keep chipping away at. In the past, I have started many projects only never to return to them, so I am keen to get into the habit and keep it ticking over. Usually, my projects are a little too ambitious for side projects and as a result, I get frustrated with the lack of progress and give up. Also, I've never struck up a good, regular routine. I often start on the occasional spare weekend and then never have time to revisit it, so this time I am trying to try a more piecemeal approach of committing little and often. In line with my "[Consume, Build, Teach](https://ramblestack.com/consume-build-teach)", I'll be trying to do at least one commit per day in an effort to carve out a routine and to keep the project progressing. Also, I am hoping to blog along the way about the build, so it will at least provide some useful content. 

My grand idea is The Training Log. I run a lot. I use Strava, which is great for recording my runs, but not so good at keeping notes and performance data about my runs. The Strava model is slightly misaligned with my personal use. I like Strava's social features: the user feed, local legends, and segments as well as the functionality features it provides such as GPS recording. It's great for interacting with friends and seeing how fellow runners are progressing. However, it offers no way to store my thoughts and feelings about my runs. Normally, I am forced to use the description box. However, this isn't great. I don't really want to bore people with a frank, long-winded analysis of how I was feeling on my run, what I ate the night before and how well-hydrated I was. Also, when it comes to analysis a free-text description is basically useless. It gives no structured data and makes it very difficult to compare nuances across runs. Thus, The Training Log will provide a house for that. Longer-term, I'll sort out a Strava integration whereby activities automatically get imported and I can privately add all the notes I need and combine them with the analysis I want. This way I'll get my own private part of the internet for documenting my training efforts while continuing to use Strava for the features that I really like. Integration to the Strava API will make the process pretty seamless.  

The initial build seems fairly straightforward. I'll leave the Strava integration for later. I've done some authentication work on the Strava API before so I know that that is possible. Lots of people do not use Strava (or any running app), so I want these users to be able to use the app as well. My concern with diving straight into the Strava integration is that the app will become tightly coupled to the data that the Strava API provides. Therefore, the app will be buggy and a poor user experience for manual users. To begin with, it will be a manual entry. In principle, the app is just a RESTful application with authentication, so I am hopeful it is not overly ambitious. Initially, it'll be a glorified ToDo app where users can name and add notes to their activities. But, I think with some simple additional features it can have quite a distinct use case. 

Anyway, idea semi-formed, domain purchased, and `npx create-react-app the-training-log` executed I think that I am ready to go! I always forget about the amount of crud you have to deal with when starting a new application. I do it so infrequently nowadays that every time I come to it the process has changed again. Logo design, favicon creation, scouring different fonts and images - it's pretty exhausting 😅  All the useful websites have changed and all the React and Express utility packages have newer versions. 

![Screenshot 2021-02-17 at 12.54.11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613727376090/utcbqPf3o.png) 

I am still figuring out exactly how I want to build it. I'll be using familiar technologies JavaScript, TypeScript, Node, and Express. However, I want a cost-efficient, high-performance way of hosting and serving the content. Also, I don't want to lose hours of time faffing with server configuration and deployments. My current thinking is that I'll set the backend up with Firestore using cloud store and functions. This will be new to me. I did a project a while back for a friend using AWS Amplify and Serverless and loved how simple it was. I've heard good things about Firestore - and Google's documentation is generally pretty good. A key benefit to this route is that I can use Google to manage the authentication workflow, which I don't really want to be wrestling with myself. If I am releasing the app publicly to users (at some point), then I owe it to them to ensure details and data are being managed properly by a third-party. I could do this, but for a side project, I am happy to outsource this. Also, Firebase makes Google authentication really easy which is an additional plus. 

Anyway, if I am disciplined, I am planning a blog once a week about the progress. At this point, I have been sorting the basic project and firebase setup. I have a holding page up [https://thetraininglog.com/](https://thetraininglog.com/). 

Credit to these sites, which help with assets and resources for the initial setup. 

- Fonts
    - [https://www.1001fonts.com/](https://www.1001fonts.com/)
    - [https://fonts.google.com/](https://fonts.google.com/)
- Favicon
    - [https://realfavicongenerator.net/](https://realfavicongenerator.net/)
- Images
    - [https://unsplash.com/](https://unsplash.com/s/photos/running)
- Image Functions
    - [https://www.remove.bg/](https://www.remove.bg/) (Transparent background)
    - [https://pinetools.com/darken-image](https://pinetools.com/darken-image) (Darkening images)
    - [https://tinypng.com/](https://tinypng.com/) (Compress images)