liebscher/musiccollection

A locally stored and run browser application for recording, logging, and rating your music collection.

Music Collection

A locally stored and run browser application for recording, logging, and rating your music collection.

Integrates with Spotify API to access a vast database of album, artist, and track information to fill out the details of your personal music collection.

Features the ability for the user to compare two albums under a dozen different categories which ideally define the best albums. Through these pairwise comparisons, scores are assigned to each album and a ranking is computed.

Installation

This application relies on five unique things, all which must be set up for it to run. Here is one way you may set everything up, in the order for which I believe you'll run into problems first. The work here has been developed on a unix Mac; issues may arise with other platforms. Feel free to post an issue/email me if you have problems getting set up.

1. MongoDB

Visit the PyMongo documentation. To get PyMongo going (discussed later), you'll first need MongoDB community edition itself. There's a link on the page for that, but I installed with brew.

We will need to update the mongodb path in package.json, and that is clarified later.

2. Repository

Clone this repository: git clone [email protected]:liebscher/MusicCollection.git.

cd into the new directory.

2. Node

Install the latest Node and npm (already distributed with Node).

Run npm install to install the package dependencies from package-lock.json in the local node_modules directory.

3. Python

Ensure you have Python3 installed (using Anaconda should be ok).

Create a virtual environment:

1. If you don't already have virtualenv, run: python3 -m pip install --user virtualenv
2. python3 -m venv mc
3. source mc/bin/activate

Lastly, we'll install all the necessary packages, run: pip install -r requirements.txt

4. Spotify API Integration

Visit the Spotify Developer page and log into you/sign up for an account. Select "Create a Client ID". Create an ID for a Website application (I used the unoriginal name "MusicCollection"). Navigate to your new client application dashboard. Copy both your new Client ID and Client Secret into the config.py file located in the home directory. Keep them in quotes.

This API is how the application fetches new albums and track lists and everything.

5. Launch

Lastly, you'll want to launch the application. Run npm run launch. A browser window should open and the application should begin loading. If you you've added albums and they don't load, refresh the page.

musiccollection's Issues

Fetch track musical data

Utilize the Spotify API to also fetch data about each track regarding the musical qualities of them. Would require retroactively filling in missing data.

Update comparison choice heuristic

The algorithm should choose a category, then pick the two feasible albums which have the smallest difference in scores for that category. Perhaps a random pairing every so often (~5?). Also, category choice should be the category with the fewest comparisons, perhaps with the occasional random choice in there (~3?).

Delete comparisons from DB on album delete

Currently past comparisons remain, and although this isn't high priority (not many albums will make it to 3 listens, then get deleted), still should happen soon.

Update Promise chaining API calls to async/await flow

Specifically with actions/collection and actions/search. Easier to read and catch errors.

Beautify the Stats section

Overhaul the charts with new colors, labels, grids, proper spacing, proper ticks, etc.

• New color scheme
• Add interaction tooltips
• Clean up awkward tiling & text position

Sort by Scores

Create functionality to sort the filtered collection by score, both ascending and descending. Should have an option to choose the category to sort by, including an overall/average score.

• Re-implement view of all scores with a better UI
• Create a filter view to select category to sort by
• (optional) Iconography for top/bottom 3 albums

Crash when adding a new album

Causes error:

TypeError: Cannot read property 'toFixed' of undefined
    at Album.js:211

Refresh scores and ranks upon new album addition

Currently goes to 0 score and unknown rank, but could be refreshed on addition.

Sort not refreshed after rescoring and ranking

After a rescore of the albums, the rank view does not get resorted. Thus, a page refresh fixes this.

Move Spotify credentials to git-ignored config file

Just reset my existing Spotify API client secret to invalidate it. Nice try hackerz (probably should have setup a private config file earlier but didn't expect this repo to become public).

Have app.py access this new config file to retrieve the Spotify API ID and secret. Upload a blank version for easy customization, but then add the file to .gitignore.

Create Statistics section

Would like to be able to view some statistics on the collection.

• Quick jump to and from the section and the top of page.
• Bar graphs / counts for genres (since genres are from artists, limit to unique artists)
• Histogram of release years
• Histogram of runtimes
• Stats on comparisons (total #, # of albums without comparisons, most controversial album (variance in scores))

Smooth out comparison heuristic

The same comparison may be asked twice in a row, which isn't ideal.

Perhaps create a queue and just draw from the queue, instead of calculating each on the fly. Would allow for finer control over category selection and randomness and prevent duplicate comparisons.

Change "controversial" section to be out of 100

Update the controversial to represent a portion of the theoretically maximum score. With N=12 and sqrt(N / (4N-4)) as the maximum standard deviation (half 1's, half 0's), then out of 0.5222.

Perhaps add progress bars too.

Fix search results aesthetic

Odd whitespace in-between results. Loading spinner seems awkward.

Complete Metadata and Repository Information

Write a README and fill out the details of the repository.

• Home directory README
• Child directory READMEs
• Repository description

Refresh scores every N comparisons

Instead of scores only fetching every render of the app (basically, on page refresh), have them update every N comparisons, where N=10 or so.

Bundle the application with Docker

Containerize everything so others can easily get up to speed :-)

Add genre into recommended score

Calculate genres rarity score for each album. Use this in the recommended score to recommend albums with less commonly listened to genres.

Edge case: albums without specified genres

Convert Action strings to constants

Some actions are currently represented by plain strings. These should be converted to constants, added appropriately in the /constants directory.

Revamp UI

Behance - Music Dashboard

Update favicon

Something besides the React icon

Add Documentation for Backend

Add documentation for Flask backend. Both inline and function comments.

Add tests for:

• add_album()
• edit_album_review()
• add_album_category()
• delete_album_category()
• update_track_review()
• add_album_listen()
• delete_album()

Update all FontAwesome to React components, not inline

See the sorting mechanism for a how-to.

Deleting filter completely resets to default sort

Reproduce: refresh page, set filter to something, delete everything in one action to re-filter. Collection should go to default sort.

Automatically disqualify Classical from certain scoring categories

As a constant, define scoring categories that pertain to non-lyrical genres (Classical, Jazz). Then when adding a new album, check if the genre is a non-lyrical genre and automatically disqualify from those scoring categories if so.

Some Albums do not get a calculated score

Why? Some albums are receiving the fallback random score.

UI element indicating comparison gap and progress

Like #5 suggested, might be useful to have a UI element to display where, out of 10, is the current comparison. Moreover, a small indication of the gap between albums on the category would be nice.

Update Recommended sort

Things to take into account: last listen, add date, number of listens, and runtime.

We want to recommend albums that haven't been listened to in a while, were added a while back, have little time between add and listen, and are at one listen.

Create a recommended score:

Last listen: 0-1 (1: least recent)
Add date: 0-1 (1: least recent)
Runtime: 0-1 (1: shortest)
Num. of listens: 0-1 (manually set weights)