Home

HOW IT WORKS

AUTHENTICATION

Upon being taken to the initial login page, there is a button that redirects users to the Spotify authentification page where the user is able to enter their Spotify login details. This also utilizes the login endpoint within the backend before redirecting to the callback endpoint. Within this function, the program requests the refresh and access tokens upon verifying state parameters allowing the tokens to later be utilized to access the Spotify Web API.

PLAYLIST GENERATION

Within the "generate" page of the frontend, a MoodForm component is utilized. This component contains a React form that upon entry of a mood and submission, will generate a personal playlist for the user. It utilizes the endpoint personal_generate. The endpoint's function will utilize the access token to gain the user's seed artists utilizing the Spotify Web API's getMyTopArtists(). Then, the seed artists, the seed genre - the mood, and the maximum number of songs are passed to getRecommendations() of the Spotify Web API to generate a JSON containing a list of 20 tracks based on the mood. This information is passed from the MoodForm component to the Results page in which a React table is utilized to parse and display the relevant info of each track including album art, song title, artists, album name, and duration.

PLAYLIST ART GENERATION

When displaying the playlist on the Results page, the playlist cover is also generated utilizing an AI art generator. Within the MoodForm component, Axios is utilized to send a post request to the generate_art endpoint specifying the mood. This utilizes Open AI API's function createImage() to create unique album art based on the mood. This URI is parsed and eventually passed to the Results page.

ADDING TO SPOTIFY PLAYLIST

After the playlist is displayed on the Results page, there is the option of adding it to a user's Spotify library. In order to do so, the frontend utilizes Axios to pass the name, description, and track URIs to the save_playlist endpoint. Within this function, the Spotify Web API's function createPlaylist() is called to create a playlist and produces a playlist ID. The Spotify Web API function addTrackstoPlaylist() is then called to add each of the tracks to the newly generated playlist.

NAVIGATION

As for navigation between the pages, a React router is utilized. A NavBar component is created specifying each of the potential routes.

HOW TO INSTALL/DEPLOY

FRONTEND

In order to start the frontend locally:

1. Run npm install to install node modules
2. Create a .env file at the root directory

Within the file, add REACT_APP_ENVIRONMENT=local

3. Run npm start

BACKEND

In order to start the backend locally:

1. Change the directory to the server using cd server
2. Run npm install to install the relevant node modules
3. Create a .env file
4. Create a project on the Spotify Developer Portal

Set up Spotify Credentials:

Within your .env file, put your CLIENT_ID and CLIENT_SECRET. Within the settings of your Spotify project, add http://localhost:8888/callback/ as a redirect URI.

4. Set up OpenAI credentials:

Login/sign up to platform.openai.com. Go to Personal > View API Keys > Create new secret key. Add OPEN_API_KEY={your secret key} to the .env file.

Your .env file should look like this:

5. Run node app.js to start the server

HOW TO USE THE APP

LOGIN

Upon deploying the application, users are taken to a login page within Moodify. Upon pressing the login button, they are redirected to Spotify's authentification. Providing access to their Spotify account allows the application to create customized playlists based on the user's listening history.

GENERATE PLAYLIST

By utilizing the Navigation Bar at the top of the page, users are able to traverse to the "generate" page. They are then presented with a form where they are able to enter a mood - the application will utilize the mood as well as Spotify's API to create a personalized playlist for the user. They are then automatically redirected to the results.

RESULTS

Within the "results" page, each of the tracks within the playlist is displayed including information on the album cover, song title, artist, album name, and duration. A playlist name is produced from the mood as well as AI-generated art for the playlist cover. From there, the user has the ability to either add the playlist to their Spotify library - as reflected below - or generate another playlist.