I love building tools related to my personal interests. Away from the keyboard, I am passionate about the outdoors — you'll often find me running, hiking, cycling and camping. I also love to keep track of my activities, partly as an exercise and travel diary.

This personal interest was the catalyst for my ongoing pet project: ActivityMap.

The Genesis: A Simple Idea for Visualising Data

ActivityMap was born from a simple desire: to visualise all of my Strava activities on a single, unified map. While Strava is a powerful platform, it doesn't offer a consolidated view of an athlete's complete history, which is essential when you've tackled multi-day routes like some of the UK national trails I've been hiking in recent years.

The initial implementation was a proof-of-concept that pulled and displayhed all available data:

  • Backend: A straightforward Node.js Express server for OAuth to authenticate users with the Strava API and fetch activity data.
  • Frontend: A simple combination of jQuery and LeafletJS rendered the map and activity tracks.

Scaling Up: Modernising with React and AWS Lambda

It was always my plan to evolve the app beyond a simple view of all activities at once. I envisioned a dynamic tool where users could filter activities by name, type, date, distance, and more. I also wanted it to be possible to view activity photos, and to provide a share option for users to share specific sets of activity views with friends. As part of my plan to deliver this, I decided to overhaul the architecture using modern serverless technology.

Backend Transformation: Leveraging AWS Lambda

To minimise operational costs and maximise scalability, I shifted the backend to a serverless model:

  • Backend: All backend functionality is now handled by AWS Lambda functions. These functions manage the crucial task of OAuth2 authentication with Strava and execute the logic required to pull and process the activity data. This ensures the application is highly resilient, only consuming resources when a user actively interacts with it.

Frontend Modernisation: Creating a Reactive UI

To create the filterable, dynamic, and reactive UI I redesigned and migrated the entire frontend:

  • Framework: I transitioned the front-end from jQuery to React. React's component-based architecture made it easier to manage all the state required for filtering map content and integrating dynamic data displays.

This latest version is a modern full-stack application, showcasing serverless architecture (AWS Lambda), robust API integration, and front-end reactivity (React). ActivityMap remains a passion project that I continue to update and refine in my spare time, blending my dev skills with my love for the outdoors.

See ActivityMap in Action