Skip to content
πŸŽ΅πŸ™‚πŸ˜’πŸ˜‘πŸ˜ŒπŸŽ΅ Reaction Radio: Create Spotify playlists that can be sorted by mood.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
controllers
img
models
routes
scripts
working
.gitignore
Procfile
README.md
nodemon.json
package.json
server.js
yarn.lock

README.md

Reaction Radio πŸŽ΅πŸ™‚πŸ˜’πŸ˜‘πŸ˜ŒπŸŽ΅

Create Spotify playlists that can be sorted by mood.

Description

Spotify’s API provides a multitude of information about their library of songs, including measures of audio features, such as song valence (or as we like to call it, "positivity") and song energy. These features can correlate with mood. A song high on the valence and energy scales is going to be happy!

Reaction Radio allows you create a playlist of songs, see how they fall on a mood chart, and then lets you edit and sort by mood. Once you have a playlist that you are satisfied with, you can easily export it to your Spotify account.

Getting Started

Live Example

https://reaction-radio.herokuapp.com/

Since the app is hosted on a free Heroku instance, it may need some time to boot up.

Installing

After downloading the distribution, you will need to download the app dependencies:

$ cd reaction
$ yarn install
$ cd client
$ yarn install

Then, navigate to the root directory and run the application:

$ cd reaction
$ yarn start

Using Reaction Radio

  1. To start using Reaction Radio, sign in to Spotify using our log in button.

    Landing Page

    Signing In

  2. Once you have signed in, you may begin to add songs to your Reaction Radio playlist! Search by either song title, artist, or album. When you find a song that you want to add, click Add Song.

    Home Page

    Adding Songs

  3. After adding songs that you like, click View My Playlist to begin exploring your playlist.

    Viewing Your Playlist

  4. On your Playlist page, you may sort tracks by mood, or sort by specific track. Create the playlist you want to hear. See any songs that don't match the mood you're feeling? Delete them!

    Sorting and Deleting Songs

  5. Once you're happy with your Reaction Radio playlist, go ahead and hit that Export button. Your playlist will be added to your Spotify account.

Exporting to Spotify Reaction Radio on Spotify

Insights

As a developer, Spotify provides a ton of useful analytical information about your app:

  • Daily Active Users
  • Monthly Active Users
  • How users are using your app
  • Where your users are located in the world

As our app grows and we add more features, we can see which features are being utilized by our users, so we can develop and improve them even more.

Spotify Analytics

Our database collects information about the songs that our users are searching through our app (no emails or real names are collected). With enough information, we can do some interesting analytics of our own:

  • Most searched for songs
  • Happiest songs
  • Saddest songs
  • Angriest songs
  • Chillest songs
  • Average mood of specific artists and/or albums

Reaction Radio Database

Deployment

You can easily deploy this application to a platform such as Heroku.

  1. Register an application on Spotify Developer. Once registered, you must add the following Redirect URIs to your application (found in the application settings in My Apps).

    Local Direct:

    localhost:3000/home

    Your Remote Redirect:

    [YOUR APP URL]/home

  2. When you are ready to deploy, navigate to reaction/client/src/pages/LoginPage/LoginPage.js.

    Comment out the local REDIRECT_URL and use the Heroku REDIRECT_URI instead. Replace the remote URI with the URI of your application. (It must end in /home).

    IF USING LOCALHOST, USE THIS URL
    const REDIRECT_URI = encodeURIComponent('http://localhost:3000/home');
    
    // IF USING HEORKU, USE THIS URL
    // const REDIRECT_URI = encodeURIComponent('https://reaction-radio.herokuapp.com/home/');
    
  3. Run yarn build and deploy!

Built With

  • React - JavaScript library for building user interfaces
  • Material UI - Google's material design UI components built with React.
  • Highcharts - JavaScript charting library
  • Node.js - A JavaScript run-time environment
  • Express - A Node.js web application framework
  • MongoDB - A NoSQL database program
  • Spotify Web API - Spotify Web API for retrieving song data
  • React Flip Move - Animation for React list components

Authors

Acknowledgments

  • This app was inspired by Charlie Thompson's app Sentify
You can’t perform that action at this time.