Spotify Recent Plays
A small project to display the songs I've recently listened to on Spotify. It draws directly from the spotify API using an ASP.NET app and displays it using a TypeScript/React app.
The backend API is written in ASP.NET Core. To build it, I started by learning how OAuth 2.0 works and implementing a client for it from scratch. It redirects to the login page, and once the callback token is recieved, it exchanges it for the access and refresh tokens. The client also automatically handles refreshing the tokens before they expire. In order to prevent someone else from logging in and displaying their data instead, during the login flow I verify that the email on the connecting account matches the one in the configuration. If it doesn't, the attempt is thrown out.
The backend also scrapes YouTube to provide links to each song on the webpage. YouTube doesn't provide an API so I was forced to extract the link from the search page with some regex. Once I get the search result the first time, it gets saved so I don't have to spam YouTube with search requests every time someone loads the page.
The frontend is my first foray into TypeScript and my second project with React. I chose TypeScript because I'm handling complex objects and the type safety is useful. I found some requirements that TypeScript imposes annoying at first, but overall, I prefer writing React with TypeScript because of the additional safety. Getting Intellisense when using VS Code is a nice bonus as well.
As always, the source is available on github.