Working on a team is a challenge. It is no doubt a necessity but it is something that is far too ofte...

Teamwork to Make the Dream Work

addison-codes

No matter how experienced you are as a developer, working on team is (as I've recently discovered) hu...

Are you a solo dev and want to get a job? 3 tips and some warnings.

The Trifecta            Conventional Commits, SemVer, and Standard Version   Do you know tho...

Supercharge your project with each commit using 3 awesome tools.

I wanted to add some things to my site to make it more personal and pretend I'm back in the Myspace days. I've seen other folks include a Spotify playlist of their favorite tracks and I liked the idea of it. There aren't many artists, albums, or tracks that I 

enough to want to show off though, so I wanted to show what I'm currently listening to or have been listening to recently. This also means I'd have to use the Spotify API instead of just embedding a Spotify player - great way to showcase that I'm capable of dealing with API's.

: I want a small card that shows my currently playing track on Spotify or, if I'm not listening to anything, a track that I've been listening to a lot recently.

: We'll need to access the Spotify API to get this data. 

 are both easy, but authenticating your webapp to have it forever tied to your account involves a few steps. 

: Once we receive the data from the API, we'll have to pull it into the frontend!

Since my site is a Next.js site that uses Tailwind for styling. That said, we have three different states this component can be in: 

Very basic - just including the basic layout of the component with placeholders for the data.

This includes the result object that we'll be loading data from once we setup the API.

This is almost identical to the currently playing version, just some language changes.

For the API, we need to get our authentication in order, which is somewhat complicated for Spotify. They offer several different methods of authentication for several different purposes. What we need is to create an application that gets access to a single account one time and will stay active/authenticated until the end of time. 

 with the account that you will be accessing the "now playing" state of. Once logged in, create a new app. Give it a name, description, website, and redirect URI. Use http://localhost:3000 if you are developing locally. For APIs, you can just select the Web API.

Once created, you'll have access to your Client ID and Secret ID - save these, we're gonna use them. First, we'll use the Client ID to authorize some scopes for our application. Simply visit the following the URL in your browser (replace <client_id> with your client id and make sure your local version is running):

This will redirect you back to your localhost app but the URL will include an authorization code - save that code, we're gonna use it to get a refresh token that our application can use to show that it's allowed to be authenticated forever.

We need to create an API request to https://accounts.spotify.com/api/token, which you can do with curl or Postman or whatever you choose. This request needs to include basic authorization with a code that is your client id and client secret encoded to Base 64 - follow this format: client_id:client_secret when encoding to Base 64. Then the headers grant_type=authorization_code, code=<your authorization code from the previous step>, and redirect_uri=http%3A
%2F%2Flocalhost:3000.

Once you send this request, you'll get back JSON that includes a refresh_token - save that, we're in business. Authentication pain is over!

Finally, we can get the data we need into our application. You'll want to add your client id, secret id, and refresh token to your environment variables to use. 

In my Next.js project, I created a SpotifyAPI.ts file as defined here:

The first thing we do is create a function for getting our access token that we can use when we make our other requests.

These functions will return the result object/array with our data.

This function is what we're going to call from the frontend to get our info. It first gets calls the getNowPlaying() function and determines whether the function returns anything. When calling the getNowPlaying() function it will return an object if something had been playing recently so we 

 check if the isPlaying attribute is true. This seems a little weird, but if we want it to update in real time, we need this extra step.

If getNowPlaying() either returns nothing OR the object it returns has isPlaying set to false, then we call getTopTracks(), which returns our list of top tracks. The endpoint is defined at the top of the file and can changed to use different parameters to get different data.

In both cases we pull the data from the track that is either playing or is our 'top track' and return it!

Last but not least, we just have to use useEffect() to call getTrackItem() and update if the result changes. We will set the loading state and the result from calling getTrackItem() with useState() and we're good to go! Here's the whole SpotifyNowPlaying.tsx component:

When all is said and done, you should end up with a component that looks like this:

It will update in real-time as well, when you start playing something on Spotify or tracks change, it will change!

Of course, you can view the whole repo of this site to see how it's setup in depth.

How I Built A Spotify "Now Playing" Component

You've found your way to my website/portfolio/blog. My name is Addison, if you don't already know. This is my personal, semi-professional website. This is a great way to get to know me and keep up to date with me. I felt it was important to create an online space for myself for a few reasons:

I'm not the most social IRL - friends and family, this is a great way to see that I am doing stuff in the world.

I need some form of public interfacing for my work, opinions, and "lifestyle". Some would probably describe me as picky, I might call it "deliberateness", but on semi-regular occasions people get a glimpse into my life and want to know how to emulate some weird way I do things or have things setup. 

Accountability. Being largely self-directed in life, work, and play I want to 

 things that I'm doing to the world in an effort to follow through.

I plan to keep my professional portfolio of software development projects here as well as updates on projects I'm working on. I may occasionally write guides or how-to's on 

I am a full stack developer specializing in React, Javascript, and building stuff in general. I built this site, and probably any other personal sites I link here.

I travel a lot, though not as much as I'd like. My interest in Geography is probably a coping mechanism for not 

traveling, so I'll post some content on cool places that I've been or want to go. I may also pull in some posts from our semi-defunct travel blog: 

I've also mentioned "lifestyle" twice now and I promise it's not what you think, I just don't know the correct term. These will probably be more like lifehacks, product recommendations, or unconventional/unknown uses of everyday software.  

I have a nearly infinite library of Steam games and I've dreamt of reviewing everything in my library over time and keeping a running list. This 

be possible, assuming I slow down on purchases. 

Here's a collection of some of my favorite games so you can get to know my tastes:

Thoughts on Media I Consume (Mostly Anime)

I fully embrace being a geek in pretty much every way and anime is no exception. You can check out 

 to see what I've watched and what I thought about it. I used to run an anime reviews blog with a few friends, and I'm currently at the helm of a sizeable anime convention which is something I might delve into. 

Anyway, I'll probably throw out some reviews/recommendations for shows that I really like.

That's me, follow along and you'll get even more of me. I couldn't be me without my amazing family so if you see my wonderful wife, Alix, or my crazy-cool toddler, Ahvi, tell them thanks for helping me be myself. 

Addison.Codes

Hi! I'm Addison.

I write code.

And do other things...
|

Latest Things I've Written

How I Built A Spotify "Now Playing" Component

I am Addison.Codes

Current Media I Like

Addison.Codes

Hi! I'm Addison.

I write code.

And do other things...|

Latest Things I've Written

How I Built A Spotify "Now Playing" Component

I am Addison.Codes

Current Media I Like

And do other things...
|