To me, for the most part, a project stands and falls with a good implementation. The main idea of run-with-data is to collect running-related data and analyze it together with health-related data to explore correlations and extract insights on how health issues influence my sports performance and vice versa. As with any data-science project, having appropriate data is pivotal. While the collection of fitness data is an easy task when one owns (and of course uses) a fitness watch, the collection of health-related data is not as straightforward. As I want to check for the effects my training has on, e.g., gut and/or hip problems and vice versa, I want to be able to collect data on my hip and digestive symptoms before and after a run.
More precisely, before a run, I’d like to state whether I have hip pain/ digestive issues, what their level is, and so on. After the run, I’d like to express how these issues evolved during training. For example, sometimes my hip hurts throughout the whole day, e.g., while I’m just sitting, but during a run, I don’t feel any pain, or it fades away throughout the run. On the other hand, I sometimes experience digestive issues already before a run, which can then eventually lead to the run being shorter than expected, let’s say, due to an emergency situation.
While I could, for example, answer these kinds of questions simply in a note-app on my phone, this is rather inconvenient and, honestly, I tried it once but stopped right away because I knew I wouldn’t use it. So, I thought about what’s the best way to collect the data, and to me it appeared that having a website which I can log into and fill out a predefined form offers a fast and easy solution. Ideally, I can then fetch the data to my laptop via an API and do the data analysis locally.
That’s why I wanted to create a website, which, on the one hand, includes the possibility to log in and input user data. On the other hand, it should also include a blog, describing step by step how the project evolved. However, being a physicist and, besides having very basic knowledge about HTML and CSS, not having any web-dev experience, proved to impede the implementation of the project, as I just didn’t know where to even start. 'Luckily', I started the year 2026 with a tonsillitis, which put a break on any training activities for way longer than expected, so I had plenty of free time. Hence, I decided to spend my evenings working on the website.
Now, if the reader is a web developer, most of the following stuff might seem like a nightmare, however, I’d like to point out that most of this work is based on a ‚learning-by-doing‘ basis. I’m aware that this ultimately leads to me not taking the best or most correct decisions. However, as I wanted to have a working website asap, and since there is not a lot to lose and a non-properly working website won’t cause any harm, I went straight into it.
So, first, I needed to understand what I actually need for hosting a website, which offers the possibility to authenticate a user and input data. After a ChatGPT ‚conversation’ and some Google search, I decided to host a static website with GitHub Pages and use supabase for the authentication and database part. I’d like to point out that this combination was by far not the first one offered by ChatGPT, and I’m glad that I did some research myself, e.g., reading blog entries describing similar projects, and watching a YouTube video which showed how easy it is to host a website with GitHub Pages. Moreover, I wanted to avoid vendor lock-in as much as possible. As I experienced, e.g., when buying the domain, it is quite easy to lose money when you don’t know sh*t about web dev and fall for completely stupid traps (as I’m somewhat ashamed to talk about it: let’s just say that an SSL certificate DOES NOT need to cost anything).
Since I wanted a nice-looking website right away (to me, a nice-looking website enhances the user experience tremendously), I checked a few websites that offer free website templates and chose ‚Future Imperfect‘ from HTML5 Up. I created a GitHub repository, added all of the files there, and basically followed the steps described in the mentioned Ideaspot YouTube video, which all worked very nicely, besides for the CNAME, which I entered as 'GitHub-Username.github.io', instead of the suggestion given in the video, which is the domanin name itself. With this, the website was running straight away, which was really nice and motivating to see. Hence, I started to adapt the website to my liking and put up the first blog post. Here, the Live-Server extension of Visual Studio Code appears to be quite nice, as one can directly see how a change in code affects the website. Moreover, for having access to some simple web analytics, I included GoatCounter on each site.
Up to this point, the website, however, consisted just of a bunch of static HTML files, and I still needed to implement the authentication and data input part. Hence, I created a supabase project, and at this point, I have to admit that quite some heavy vibe-conding started, as I had no experience at all with JavaScript. This is when I started to feel like I’m doing web-dev without actually doing web-dev. While the Supabase documentation is quite nice, I did rely a lot on ChatGPT, which is where the perks and dangers of web-dev vibe-coding lie. While it allows you to implement a web-dev project without any experience in an amount of time, which, I think, is completely unmatchable when doing it alone by reading the docs, for any kind of debugging, you rely heavily (or maybe even completely) on the LLM as well.
As I’m not aiming to become a web developer, and since I enjoy the data-science part the most, I tried to find a balance between understanding the HTML, CSS, and JavaScript code and having reasonable progress so that I can finally start to collect the data to actually do some data science. Here, I should point out that my use case is quite simple, and that for any kind of web-dev project which has a higher focus on the web-dev part, I’d definitely recommend learning and understanding it to become as independent as possible of an LLM.
While this post rather generally describes how I started to work on the implementation of the project, in the upcoming blog post, I’ll describe the data schema in depth and point out in more detail how I implemented it.