MusiLink

A web app for visualizing personalized Spotify data. View your top artists, top tracks, recently played tracks, and detailed audio information about each track.

Don't forget ⭐ the repo!

Tech Stack

Frontend:

JavaScript, React with Hooks, Styled Components

Backend:

Nodejs, Express.

Deployed @ Heroku

Demo

Login and Profile Page

User login page using Spotify OAuth. On successful login it then displays the user's profile page.

Login.mov

Top Artists Page

Displays the top artists the user listened to this month and in the last 6 months and all time.

topArtists.mov

Top Tracks Page

Displays the top tracks the user listened to this month and in the last 6 months and all time.

topTracks.mov

Playlists and Playlist Pages

Display user's playlists and tracks in that playlist. User can sort the tracks based on dancebility, tempo and energy levels.

playlists.mov

Local Installation & Set Up

1. Fetch latest source code from the main branch.

   https://github.com/rathna-git/MusiLink.git

2. Register a Spotify App in your Spotify Developer Dashboard and add http://localhost:8888/callback as a Redirect URI in the app settings

3. Create a .env file at the root of the project based on .env.example and add your unique CLIENT_ID and CLIENT_SECRET from the Spotify dashboard

4. Ensure nvm and npm are installed globally

5. Install the correct version of Node

   nvm install

6. Install dependencies

   npm install

7. Run the React app on http://localhost:3000 and the Node server on http://localhost:8888

   npm start

Deploying to Heroku with Git

1. Create a Heroku app

2. Add your Heroku app as a git remote

   heroku git:remote -a your-app-name

3. Add http://your-app-name.herokuapp.com/callback as a Redirect URI in your Spotify app's settings

4. In your app's Settings tab in the Heroku dashboard, add config vars.

   Based on the values in your .env file, the CLIENT_ID, CLIENT_SECRET, REDIRECT_URI, and FRONTEND_URI key value pairs. Make sure to replace the localhost URLs with your heroku app's URL.

   REDIRECT_URI: http://your-app-name.herokuapp.com/callback
   FRONTEND_URI: http://your-app-name.herokuapp.com

5. Push to Heroku

   git push heroku main

Credits

Inspired by Spotify Profile page.

License

Musilink is developed under the [MIT license]