Visualize-Spotify is a React web application that uses the Spotify Web API to visualize music preferences. It also provides a tinder-esque functionality that allows you to swipe through recommended songs and see in real-time its stats as well as how it affects your global music preferences via track analytics.
- Users will be able to login to the web application by authenticating their Spotify account.
- Users will be able to view analytics providing insight into the type of music they enjoy listening to based on their liked songs playlist.
- Users will be able to swipe through recommended songs and view the stats of that specific track.
- Users will be able to filter and discover new songs based on the range of stats they provide.
Project is still in development.
Visualize-Spotify is licensed under the Apache-2.0 License as of 2020.
None
To be determined
- v0.2.0
- v0.2.0 introduces a fully functioning landing screen with filtering, visualizations, and added user capabilities to swipe through songs and add them to their liked songs.
- v0.1.0
- v0.1.0 introduces a landing screen with Spotify authentication. Upon authentication, the user is redirected to a page where they can view the information of the song that they are currently playing.
Clone this repository and run npm install to install all the necessary dependencies.
Navigate to the client directory and launch the application in developer mode (this web application does not have a separate server).
$ cd client
$ npm start
The client will be running on http://localhost:3000
The source code for Visualize-Spotify can be found in the src directory. This includes:
- App.js: The main interface. Includes the context layer API as well as routing based on authentication status.
- DataLayer, reducer: The data layer of the application that allows certain props to fetched from anywhere in the project structure.
- spotify.js: The spotify configuration file for authentication. Includes the client ID, authorization scopes, and redirect URI that would return a token to the user.
- assets: A directory holding all SVG files.
- components: A directory holding all the page components as well as their stylesheets.
- config: A directory that holds the config file for the react-particles background.
- tests: A directory holding the files for jest testing.
Page components should be in src/components directory along with their CSS stylesheets.
Visualize-Spotify uses Travis-CI test builds. The configuration file can be found in the .travis.yml file. Before install, it navigates to the client folder and runs the following scripts:
- yarn lint
- This runs ESLint on the
client/srcdirectory.
- This runs ESLint on the
- yarn build
- This creates a production build to ensure that it builds without error.
- yarn test
- Testing creates a code coverage report using Codecov in conjunction with running tests found in the
client/src/testsdirectory. To update coverage reports in real-time, coverage tests are conducted by passing in a Codecov token as such:./node_modules/.bin/codecov --token='73defb26-5b47-42ca-9b9c-62a9c2c47fda. This can be found in thepackage.jsonfile. - Moreover, it ignores
src/ServiceWorker.jsandsrc/index.jsbecause they are either not used or serve trivial purpose. The configuration file for this can be found inclient/jest.config.json.
- Testing creates a code coverage report using Codecov in conjunction with running tests found in the
- yarn doc
- This updates the documentation using JSDoc3 by following the configuration file
jsdoc.config.jsonfound in the root directory. As can be found inpackage.json, the home page usesREADME.mdfound in the root directory. The documentation is hosted using GitHub Pages and can be found here.
- This updates the documentation using JSDoc3 by following the configuration file
There are currently no extensions or integration authors.
- Version 0.2.0 has been released and includes a fully functioning landing page that hooks up with the Spotify Web API. It generates recommendations based on a combination of the user's top artists and tracks as well as filter ranges with regard to track analytics including danceability, acousticness, positivity, energy, and popularity. The interface includes a graph visualizing these five metrics for each track. Users also have the ability to swipe through these recommendations, either rejecting it and going on the next recommendation, or accepting it and adding it to their liked songs.
- Version 0.1.0 has been released and includes a landing page with authentication. Upon authentication, the application redirects to an interface where users can check the current song on play. The Spotify Web API has been hooked up.
- Next releases will focus on fetching track analytics and implementing the recommendation system.
Visualize-Spotify uses the Spotify Web API, whose detailed documentation can be found here. API Documentation for this application can be found in its GitHub Pages.