Coding Challenge #18 - Spotify Client

This challenge is to build your own Spotify Client using the Spotify API.

If you’re a software developer I’m sure you’ve heard of Spotify and have an account. If not you can sign up for a free one on their website.

The Challenge - Building a Spotify Client

This challenge is perfect for the frontend developers. It focuses on using Spotify’s API to interact with the Spotify service to build an an online client and uses their Web Playback SDK to support playback.

If you’re not a frontend dev and don’t fancy learning, you can still use the Spotify’s API from your favourite stack to create, edit and play playlists including selecting playback devices.

So whilst, this challenge is aimed at all those who have been asked for a more frontend focused challenge, you can still build this entirely as a command line application if you prefer.

Personally I built my example in JavaScript with React. If I started over I’d use TypeScript (Spotify released the TypeScript SDK, just after I finished writing).

Step Zero

Please set up your IDE / editor and programming language of choice.

After that navigate to Spotify’s website and create an account if you don’t already have one. Once you’ve done that head over to the Developer Website.

You can use the API without registering an app, but we’re going to access some personal data (our profile and some public playlists) so we’ll need to register and application.

Click on the Create app button or link to do so:

Enter some sensible values for the app:

Then click on the button to create it!

Step 1

In this step your goal is to authenticate the user of your client. Spotify offer several options for this. You’ll find details of how to do this on in their documentation, for a Single Page Web App, they recommend using the authorisation code with PKCE.

Once you’ve authenticated check you can access the user’s profile by calling the /me endpoint. Check the documentation for the User Profile Endpoint to see what data is returned and how to use the authorisation token.

Check you’re getting back the id field you expect to verify that you’ve authenticated correctly.

Continued....

You can find Step 2 and beyond on the Coding Challenges website as Write You Own Spotify Client.

Or if you'd rather get the whole challenge delivered to you inbox every week, you can subscribe on the Coding Challenges Substack.