Strava Dashboard

Purpose of the App:

To display my workout data using the Strava API.

Technology used

React

NextJS

Tailwind CSS

Chart JS

Strava API

Postman

Jest

How The Application Works

• The application uses NextJS to render the site and its components.
• 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.
• Chart JS renders the various charts using formatted data that’s created via helper functions.
• Postman was used to test the Strava API Auth flow and data endpoints in a sandbox environment.
• Jest is used to unit test the application to ensure that the components render with the correct values.

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.
• How to follow an OAuth flow to dynamically generate access tokens using HTTP requests.
• Using Postman to effectively test API calls in a sandbox environment and covert that into JavaScript code.
• How to use React-chartjs-2 to display graphs showing monthly and weekly metrics using my workout data.
• Use Jest to unit test certain components to ensure they render with the correct 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 environmental variables on Vercel that took time to solve.