RunPy: Strava Stats Visualisation in React

An app to visualise and analyse running data from Strava. Provides a number of time-series and geo-spatial aggregations over the raw activity data and displays it with a web frontend.

Key Technologies

Python | FLASK | OpenAPI | MongoDB | Javascript | React

What did I Learn?

I took it as an opportunity to refresh myself with React and remind myself how to perform unit testing of React code – this is one of my few personal projects where the test-coverage is reasonably good (for the frontend at least).

I’d worked with MongoDB a little in the past, but wouldn’t have called myself a power-user. A lot of the time on this project went into efficient use of the aggregation pipeline framework. This was particularly important for the geo-spatial aggregations, as there are a lot of datapoints to filter and aggregate (worst-case, every GPS point of every run!).

How does it Work?

The backend takes the form of a Python FLASK server, running with OpenAPI v3, which downloads user data using the Strava API, cleans it and stores it in a MongoDB database. It then offers a number of data aggregation and transformation endpoints, which provide holistic views over the individual activities.

The other component is the frontend service, which is written in ES6 and React with Node.JS. This makes use of Plotly for visualising time-series trends in data, and Leaflet to display geospatial aggregations of runs (primarily mean pace at a given location).


The frontpage showing stats evolving over time (binned data by week/month):

Frontpage - stats evolving over time

Temporal stats (raw data):

Temporal stats with raw data

Moving average with trend-line:

Moving average with trend-line

Heatmap of pace/frequency based on binned location:

Pace/location heatmap