P02 / ProjektProject PrivatPrivate

Strava-DashboardStrava dashboard

Ein React-Dashboard, das meine echten Trainingsdaten aus Strava auswertet und übersichtlich darstellt.A React dashboard that analyses my real training data from Strava and presents it clearly.

Worum es gehtWhat it is about

Hier treffen sich meine zwei Welten: Sport und IT. Statt mich nur auf die Standardansichten von Strava zu verlassen, habe ich mir ein eigenes Dashboard gebaut, das genau die Werte zeigt, die mir beim Training helfen.

This is where my two worlds meet: sport and IT. Instead of relying only on Strava's standard views, I built my own dashboard that shows exactly the numbers that help me train.

TechnikTech

React
JavaScript
Strava

BausteineBuilding blocks

TrainingslastTraining load Zeigt, wie stark ich mich über die Zeit belaste, um Überlastung und zu wenig Training zu erkennen.Shows how much load I put on myself over time, to spot overtraining and undertraining.
HerzfrequenzzonenHeart rate zones Wertet aus, wie viel Zeit ich in welcher Intensität trainiere.Analyses how much time I spend at which intensity.
Material-TrackingGear tracking Behält im Blick, wie viel Ausrüstung wie Rad oder Schuhe schon im Einsatz war.Keeps track of how much gear such as bikes or shoes has been used.

Case Study Vom Problem zum ErgebnisFrom problem to result

01 / AusgangslageStarting point

Die Standardansichten von Strava haben mir nicht gezeigt, was ich für mein Training wirklich brauche. Ich wollte Belastung und Erholung gezielter steuern.

Strava's standard views did not show me what I really need for my training. I wanted to manage load and recovery more deliberately.

02 / ZielGoal

Ein eigenes Dashboard, das Trainingslast, Herzfrequenzzonen und Material übersichtlich auf einen Blick zeigt.

My own dashboard that shows training load, heart rate zones and gear clearly at a glance.

03 / UmsetzungImplementation

Das Dashboard ist mit React gebaut und holt meine Aktivitäten über die offizielle Strava-API. Es läuft lokal auf meinem Rechner.

The dashboard is built with React and fetches my activities via the official Strava API. It runs locally on my computer.

04 / Herausforderungen & LösungenChallenges & solutions

API & AnmeldungAPI & sign-in Die Strava-API begrenzt, wie viele Anfragen erlaubt sind. Ich steuere die Abrufe so, dass die Limits eingehalten werden. Die Zugangsdaten liegen nicht im Code, sondern getrennt davon.The Strava API limits how many requests are allowed. I manage the requests so the limits are respected. The credentials are not in the code but kept separately.
DatenmengeData volume Statt bei jedem Start alle Aktivitäten neu zu laden, ruft das Dashboard nach dem ersten Mal nur noch neue ab.Instead of reloading every activity on each start, the dashboard only fetches new ones after the first time.

05 / ErgebnisResult

Meine Trainingsbelastung habe ich heute besser im Blick. Das Dashboard ist noch in Arbeit, weitere Funktionen folgen.

I now keep a better eye on my training load. The dashboard is still a work in progress, more features will follow.

06 / Was ich gelernt habeWhat I learned

Wie man mit einer echten API mitsamt Anmeldung über OAuth arbeitet und wie aus Rohdaten sinnvolle Kennzahlen und Diagramme werden. Und ganz nebenbei, was hinter Trainingslast und Herzfrequenzzonen eigentlich steckt.

How to work with a real API including sign-in via OAuth, and how raw data turns into meaningful metrics and charts. And, along the way, what training load and heart rate zones are actually about.