Intro • Core Features • Getting Started • Usage and limitations • Built with • License
Discovering new music, expanding your musical taste is an exciting process. Yet at the same, it can prove to be somewhat confusing and daunting, depending on your habits. If you prefer to dump new artists into a huge playlist and explore their discography one song at a time, it's easy to lose track of what you've listened to, and how many times. What's worse, you can have multiple new artists competing for your attention, which further exacerbates the problem. Artist discography discovery progress tracker for Spotify is designed to take care of that, and provide you with data and customization options that make exploring new music a more pleasant and comfortable journey.
- A Spotify account
- An app registered via the Spotify Developer Dashboard
- A MongoDB database hosted on a cloud service (e.g. MongoDB Atlas)
- Node.js and Git installed on the machine
# Clone the repository
$ git clone https://github.com/N6MCA51593/addpt-spotify.git
# Navigate to the repository root directory
$ cd addpt-spotify
# Install server dependencies
$ npm install
# Navigate to the client directory
$ cd client
# Install client dependencies
$ npm install
In the root folder, create a .env file that contains the following:
// Link to connect to the MongoDB database
MONGO_URI=...
// Client id of the app registered through the Spotify dev dashboard
CLIENT_ID=...
// Client secret of the app registered through the Spotify dev dashboard
CLIENT_SECRET=...
// Redirect link of the app registered through the Spotify dev dashboard
REDIRECT_URI=http://localhost:5000/api/auth/redirect
// Permission scopes for the oAuth 2.0 token
SCOPES=user-read-recently-played
// JSON Web Token secret
JWT_SECRET=...
// URL that points to the client
FRONT_END_URI=http://localhost:3000
In the client folder, create a .env file that contains the following:
// URL that points to the SSE stream API endpoint
REACT_APP_SSE_URI=http://localhost:5000/api/sync/stream
From the repo root directory:
# Express & React :3000 & :5000
$ npm run dev
# Express API Only :5000
$ npm run server
# React Client Only :3000
$ npm run client
- Spotify adds a track to the history when it's played for at least 30 seconds, and listened to completion. Using the next/previous player buttons prevents it from showing up in the history. Listening on repeat will create a history record for every repeat
- The Spotify history API endpoint can sometimes return stale results, which is indistinguishable from when the user hasn't listened to anything at all. As a result, it can cause some listens to not show up in the app listening history and count towards the stats
- When adding an artist, the app automatically fetches up to 20 albums, singles, and compilations (up to 60 total). Whatever isn't fetched, as well as all the artist's future releases, can be added manually
- Since the app relies on Spotify IDs, changing the market country will make tracking unreliable, since the same albums and tracks may have different IDs in different markets. To work in a different market, artists have to be deleted and added again
- Users stop being automatically tracked after 12 weeks since last login
- Maximum number of tracks per album - 50 (sincere apologies to all the Frank Zappa fans out there)
- No support for local files
- No support for secondary artists in collaborations ("appears on" albums)
- No support for IE and Edge Legacy
- Node.js
- Express
- JSON Web Tokens
- MongoDB
- Mongoose
- React
- Axios
- react-slider
- react-router
- react-transition-group
- Sass
- Font Awesome
MIT