Home

HOW IT WORKS

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.