Spotify Party 🎵

Spotify Party is a web application to control the queue of my personal Spotify account. Initial motivation behind the project was to be able to share a queue of someone, so people at a party have the possibility to add a song to the queue on their device and not have to pass around the smartphone of the account owner. The application is fully deployed on AWS. The backend consists of an API Gateway and Lambda functions, which makes it fully serverless.

How it works 🤔

→ Frontend 🖥️

• Domain is registered with Route53 and points to CloudFront
• CloudFront fetches and caches the static files in order for the React App to work
• React App makes requests to the API Gateway to view and make changes to the Spotify queue

→ Backend ⚙️

• API Gateway suppplies endpoints to invoke the Lambda functions
• get-queue, search-tracks and update-queue use the access token stored in the SecretsManager to access the Spotify API
• api-login and api-callback use the client_id and client_secret to fetch a token from the Spotify API

→ api-login

• When request of the React App returns an UNAUTHORIZED error user gets redirected to this endpoint
• Builds request with URL encoded parameters and redirects to the Spotify login

→ api-callback

• After successful Spotify login the user gets redirected to this endpoint
• Forms request with code provided from Spotify for an access token
• Saves fresh token from response in the SecreatsManager and redirects user back to the base domain

Deployment 🧑‍🔧

→ Lambdas 🟣

• Create ECR repositories for the images of the Lambda functions, with name spotify-party-{name of the Lambda}
• Build the image of each Lambda except token-caller
• Push the images to it's corresponding repository in the registry

→ React App 🔵

• Import required dependencies with npm install
• Build the static js, css and html files with npm run build

→ AWS infrastructure 🟠

• Run terraform init to initialize required modules
• Then run terraform apply and supply the client_id and client_secret given by Spotify for the API registration

The Lambda functions will then automatically draw their images from the created registries and the static files for the React App will be uploaded as S3 objects.