Strava XT - Frontend

Strava XT is a web app that allow you to compare multiple Strava activities. It uses the Strava V3 API to get the athlete data.

Currently this app can login into Strava using OAuth 2.0 and list the athlete activities like rides, runs, hikes and more.

The user can see the activity info like speed, moving time, distance, etc. It also plots the GPS data on the map using Google Maps API and draw the elevation data using Chart.js.

Multiple activities can be selected at the same time. They are plotted in the same map and in the same charts for comparison.

This repository is the frontend part of the app. The backend can be found here.

Comparing the elevation of two rides:

This feature helps you to compare the same ride you did twice, by showing the data side by side, but also give you a perspective on different rides.

Selecting multiple activities:

Features

Connect to Strava API using OAuth 2 and JWT
List all your activities and filter by date
Compare multiple activities
Draw the GPS data using Google Maps API
Plot the elevation data using Chart.js
Single Page Application
Using Vue.js and reusable components

The app is in pre-alpha stage and is a personal project to learn Vue.js.

Gallery

See other images of the app here.

Config and running

Clone the project, switch to the project folder and run:

npm install

The following environment variables must be set to run the app:

VUE_APP_API_URL - the URL of where backend project is running;
VUE_APP_MAPS_KEY - your Google Maps API key. If you don't set it, the map still loads, but with warnings.

You can use a .env file to set these variables. See the example file .env.example.

Then, run the backend project.

Finally, to run this project use:

npm run dev

To run the tests use: