A massive thank you goes out to my colleague who spent so many hours patiently mentoring me, using this site as a way to teach Javascript, React, CSS, and other aspects of web development.
This is a React application that fetches and visualizes runs from Strava.
Runs are fetched daily from Strava. When a listed run is selected, it is displayed on the 3D map, along with basic information including:
- Run name
- Distance
- Pace
- Run type (normal or trail)
- Elevation gain
How it works
There are several steps needed to get this working.
Getting the runs
Strava offers an API to access data stored with them. Their getting started guide walks you through the steps required of requesting a developer account (by creating an API application), requesting data, authenticating, etc. These applications are often for users to authenticate with their account to access their data, and not to store and view other peoples' data (mine, in this case).
First, a list of runs is fetched. Pagination was needed because I have more than 200 activities (the limit per page). I have over 1,200 at the moment! The list of activities is saved as a json file, with some metadata about the activity.
Then, each activity ID in the activities list is used to fetch the run data. Only activities of type run (which include normal runs and trail runs) which have public visibility are requested. API requests are limited to 200 per 15 minutes, so the total requests need to be staggered. The streamed activities are transformed and saved as .geojson files, and the list of .geojson files are saved as a list.
Displaying and deploying the site
The website is a single page React application, built with Create React App. The body of the site is split into a runs section and map section. The list of runs is generated from the list of .geojson files. These can be sorted by name and date.
The map section is built using MapLibre, with map tiles from OpenFreeMap and hillshade/terrain data from Tilezen and sources. It's incredible that a 3D map can be built entirely with free and open source libraries.
Next Steps
There are some feature enhancements I'd like to work on, which are listed in the Issues section of the GitHub repo.
I'd also like to add documentation so that other people can fork the repo and set up the site with their own activities.
Overall, I'm very happy how this has turned out. I've learned so much about Javascript, React, CSS and GitHub Actions. It was great to learn these concepts through a project, and a topic that I'm passionate about (running).