Strava Dashboard

Purpose of the Website/App:

To display my workout data using the Strava API.

Technology used

React

NextJS

Tailwind CSS

Strava API

Jest

Chart JS

Postman

How The Application Works

• The application uses NextJS to create the user interface and fetch the data.
• TailwindCSS provides the styling, both with inline properties and the Tailwind UI library for components.
• Strava API supplies the data for the application which includes my stats, workouts and segments.
• Jest is used to unit test the application to ensure that the components render with the correct values.
• Chart JS brings a library that creates interactive charts using my data. This data is processed via my own helper functions.
• Postman was used to test the Strava API Auth flow and data endpoints in a sandbox enviroment.

What I Learnt

• How to use an external API to fetch data and display it inside a NextJS app using the built in API routing.
• Use Jest to unit test certain components to ensure they render with the correct data.
• How to follow an OAuth flow to dynamcially generate access tokens using HTTP requests.
• Using Postman to effectively test API calls in a sandbox enviroment and covert that into JavaScript code.
• How to use React-chartjs-2 to display graphs showing monthly and weekly metrics using my workout data.
• Configure and monitor serverless functions using the Vercel dashboard.

What Was The Biggest Challenge

The biggest challenge was following the authentication flow for the Strava API. It involved using Postman and lots of trial/error until I understood the process of Auth2.0, which I had never encountered before. The usage of refresh tokens was a new concept to me and understanding how to use the Next API routing was another challenge. I also had some bugs regarding the enviromental variables on Vercel that took time to solve.