cheshire137 / spotty-features

Show trends about your music listening habits over time. Create playlists from a given seed and specified audio features.

Spotty Features

Show trends about your music listening habits over time using different audio features like acousticness, danceability, and energy, based on the tracks you save to your Spotify library. Also generate playlists like a given song or artist, but with the specified audio features.

How to Develop

You will need Homebrew installed in macOS.

Create a Spotify application and copy your app's client ID to src/public/config.json. Add http://localhost:3000/auth as a redirect URI in your Spotify app.

brew update
brew install yarn
yarn install
gulp
open http://localhost:3000

How to Test

yarn install
yarn test

This will run the style checker and the Jest tests. You can run just the style checker via yarn run style. You can run just the Jest tests via yarn run unit-test.

Snapshots are used -- see test/components/__snapshots__/ -- to test that a React component is rendered the same way consistently based on the props it's given. If you update a component, a test may fail because the snapshot is now different from what is rendered. Manually compare the two and if the change is expected, update the now out-of-date snapshot with yarn run unit-test -- -u.

See also:

• Shallow rendering with Enzyme
• Jest matchers
• ESLint rules
• XO style checker

How to Deploy to Heroku

In your Spotify application, you'll need to add your Heroku app's URL, with /auth, as a valid redirect URI. You probably want to add two redirect URIs: one with https and the other with http.

git push heroku master

spotty-features's Issues

Make playlist generation first/primary tab

Since not everyone has saved tracks on Spotify, the 'Trends' tab can be lonely for some. Playlist generation, however, is always available! So make it the first tab and the one selected by default.

Show message to user when no saved tracks

The app looks like it didn't work when there are no saved tracks for the user:

It should show a message about there being no data instead. Thanks to @c-ro for reporting!

"Could not create playlist: Error: Forbidden"

First, thank you for this tool ! It comes handy with the shutdown of many services from the Echo Nest...

I can not save any playlist. Everything else seems fine, the app fetches my data correctly until september 2017, and creating the playlist goes fine. When I click "Create Playlist" to actually save the found songs, the error comes.

Add tests

Could use the same test setup as snoozer, another React app.

Color tags under tracks the same as in the chart

Make Danceable teal, make Acoustic pink, etc.

Allow playlist creation based on metrics

Let the user specify things like "positive danceable tracks," "negative acoustic tracks," "live tracks with low energy," etc. and create a playlist for them of tracks they have saved that have those qualities.

Idea inspired by @tcbyrd!

Fix ugly search result styling at narrow widths

When you search for a seed, the results can be wrapped strangely in narrow browsers:

Don't show graph if only one day

Because the graph looks silly:

Thanks for reporting, @probablycorey!

Use fallback tracks when none saved

Could pull tracks from https://developer.spotify.com/web-api/get-users-top-artists-and-tracks/ when the user has not saved any, or not saved many.

Plot negativity of listening habits

Like the 'Positive' line, the inverse of the valence metric could maybe be used to show a rise in negativity:

A measure from 0.0 to 1.0 describing the musical positiveness conveyed by a track. Tracks with high valence sound more positive (e.g. happy, cheerful, euphoric), while tracks with low valence sound more negative (e.g. sad, depressed, angry).

-- https://developer.spotify.com/web-api/get-several-audio-features/

Idea from @pifafu! ❤️

Order audio features in tooltip by highest to lowest

So it's easier to see "oh the blue line at the top is Negative" when you see the tooltip, sort its contents by highest to lowest percentage.