Exploring the Strava Developers API with JavaScript

Are you looking to build an athletics-focused application with user-driven data? Look no further than the Strava Developers API! Strava is a social media platform designed specifically for athletes with a focus on cycling, running, and triathlons. Using the Strava Developers API, you can build an application to enhance the user experience.

The Strava Developers API offers various endpoints, including activities, athletes, clubs, and segments. In this guide, we will explore how to use these endpoints with JavaScript to access data from Strava.

Getting Started

To begin with, we'll start with the basics: registering your application and obtaining an access token with Strava.

1. First, head over to the Strava API Portal, sign in to your Strava account, and register a new developer application.

2. Once your application is registered, you should receive a client_id and client_secret.

3. Next, let's request an access token with Strava. You can use Postman for this step, or any other method you prefer. Make a POST request with the following body parameters:

    {
        "client_id": YOUR_CLIENT_ID,
        "client_secret": YOUR_CLIENT_SECRET,
        "code": YOUR_AUTHORIZATION_CODE,
        "grant_type": "authorization_code"
    }

4. Strava API will respond with an access token that grants permissions to access user data.

With all that in place, let's dive into how to use the endpoints with JavaScript!

Using the Strava API with JavaScript

Activities

Let's start with getting activities from Strava. You can use the following code snippet to get all activities for the authenticated user.

const activities = async () => {
    const response = await fetch('https://www.strava.com/api/v3/athlete/activities', {
        method: 'GET',
        headers: new Headers({
            'Authorization': 'Bearer ' + access_token
        })
    });
    const json = await response.json();
    return json;
};

Athletes

Use the following code to get athlete details from Strava.

const athlete = async () => {
    const response = await fetch('https://www.strava.com/api/v3/athlete', {
        method: 'GET',
        headers: new Headers({
            'Authorization': 'Bearer ' + access_token
        })
    });
    const json = await response.json();
    return json;
};

Clubs

Let's get the list of all the athletic clubs using the following code snippet:

const clubs = async () => {
    const response = await fetch('https://www.strava.com/api/v3/athlete/clubs', {
        method: 'GET',
        headers: new Headers({
            'Authorization': 'Bearer ' + access_token
        })
    });
    const json = await response.json();
    return json;
};

Segments

Use the following code to get the segment detail from Strava.

const segmentDetail = async (id) => {
    const response = await fetch('https://www.strava.com/api/v3/segments/' + id, {
        method: 'GET',
        headers: new Headers({
            'Authorization': 'Bearer ' + access_token
        })
    });
    const json = await response.json();
    return json;
};

Conclusion

We've covered the basics of using the Strava Developers API with JavaScript and explored the endpoints that cover data such as activities, athletes, clubs, and segments. With access to these endpoints, you can make your athletes' experience with your application more data-driven than ever before!