While attending the second phase of my coding bootcamp, I was introduced to React so when it came time to put my skills to work, I took the opportunity to build an application to track bike rides. I grew up riding my bike and I’ve been an avid user of Strava for almost a decade. Strava is a popular application amongst cyclists and runners that allows users to track, share, and interact with each other’s workouts. This post will highlight the implementation of key features.

These data points are utilized to reconstruct and render the route on a map alongside workout metrics so users can view their performance.

The frontend of the application is built using React and React Router DOM for routing. The data is fetched from the local JSON server as React state in the main App component. The workout data state is passed down as a prop to child components to avoid prop drilling.The Geolocation API captures the device’s location in latitude and longitude during the ride. When the user starts recording, the following code: navigator.geolocation.watchPosition(), will repeatedly call the Geolocation API at intervals to retrieve the current location of the device and store it as React state.
Cyclists can pause the recording to prevent API calls and stop position tracking. Once the user ends the workout, they are given the option to save their workout. The workout is saved by posting it as a JSON object and persists to the local JSON server so it can be fetched and analyzed for metrics.