Project | Cormac

Running Website

FYI: This project was last updated on 2021-01-31. It may be out of date so take it with a grain of salt.

Goal

The aim of this project was to display activity stats from Strava in a unique way, inspired by Spotify Wrapped, the year-end summary of listening statistics. Instead of just showing the totals which are already available in app, the idea was to give them in context of landmarks such as "Lengths of PEI", letting users think of their accomplishments in a different way.

Process

Before developing, I mapped out the flow in Figma then broke it down into the components for development.

I developed the frontend using a vanilla React app with Bootstrap.

Strava's API doesn’t allow the authorization to communicate directly with a frontend, so I needed a separate backend app. For the backend app I used the Express framework.

To deploy, the Express backend is hosted on Heroku, and the React frontend is hosted on Netlify.

Next Steps & Lessons

The app reached an MVP state but there are more features planned on the original Figma.

Currently, the app can only display distance stats, but I planned to add height and time statistics. Similarly, I would like to expand beyond running to also include swimming, biking, and other sports.

Additionally, the authorization integration with Strava is not very robust. Further development would be needed to handle edge cases for a larger user base.

There are some UI issues that could be improved such as the stats overlapping with the circles.

Unfortunately, Strava added a personalized "Year in Sport" feature which offers very similar feature set, so I've decided not to continue development on this project.