{"id":16222996,"url":"https://github.com/rathna-git/musilink","last_synced_at":"2026-04-07T21:31:36.251Z","repository":{"id":199831427,"uuid":"703833148","full_name":"rathna-git/MusiLink","owner":"rathna-git","description":"A web app for visualizing personalized Spotify data built with React, Node, Express, and the Spotify API","archived":false,"fork":false,"pushed_at":"2023-11-18T19:28:56.000Z","size":7330,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T01:42:14.026Z","etag":null,"topics":["express","javascript","nodejs","react","react-hooks","react-router","rest-api","spotify-api","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rathna-git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-12T02:34:04.000Z","updated_at":"2023-10-24T01:02:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"d543f2d0-2aff-42bb-bd25-d2b1b7a17557","html_url":"https://github.com/rathna-git/MusiLink","commit_stats":null,"previous_names":["rathna-git/musilink"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rathna-git/MusiLink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rathna-git%2FMusiLink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rathna-git%2FMusiLink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rathna-git%2FMusiLink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rathna-git%2FMusiLink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rathna-git","download_url":"https://codeload.github.com/rathna-git/MusiLink/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rathna-git%2FMusiLink/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","javascript","nodejs","react","react-hooks","react-router","rest-api","spotify-api","styled-components"],"created_at":"2024-10-10T12:16:29.379Z","updated_at":"2026-04-07T21:31:36.230Z","avatar_url":"https://github.com/rathna-git.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e \n \u003cimg src = \"https://github.com/rathna-git/MusiLink/assets/16769143/5539fcf7-cef0-4084-bd8c-d221a2ea64c0\"\u003e\n\u003c/p\u003e\n\n# MusiLink\n\nA web app for visualizing personalized Spotify data. View your top artists, top tracks, recently played tracks, and detailed audio information about each track. \n\n### Don't forget ⭐ the repo!\n\n## Tech Stack\n\n### Frontend: \nJavaScript, React with Hooks, Styled Components\n### Backend: \nNodejs, Express.\n\nDeployed @ Heroku\n\n## Demo\n\n### Login and Profile Page\n\nUser login page using Spotify OAuth. On successful login it then displays the user's profile page.\n\nhttps://github.com/rathna-git/MusiLink/assets/16769143/571b7dff-ba66-4044-94c0-620fd63b03f3\n\n\n\n### Top Artists Page \n\nDisplays the top artists the user listened to this month and in the last 6 months and all time.\n\nhttps://github.com/rathna-git/MusiLink/assets/16769143/955f8095-32c6-4ced-a81b-fc84ab5b0382\n\n\n### Top Tracks Page\n\nDisplays the top tracks the user listened to this month and in the last 6 months and all time.\n\nhttps://github.com/rathna-git/MusiLink/assets/16769143/05f8a44d-e7fe-4a31-a56f-f91417ae0365\n\n### Playlists and Playlist Pages\n\nDisplay user's playlists and tracks in that playlist. User can sort the tracks based on dancebility, tempo and energy levels.\n\nhttps://github.com/rathna-git/MusiLink/assets/16769143/d1922939-67aa-45f2-983e-f552fe017b83\n\n\n\n\n## Local Installation \u0026 Set Up\n\n1. Fetch latest source code from the main branch.\n   \n   ```shell\n   https://github.com/rathna-git/MusiLink.git\n   ```\n   \n2. Register a Spotify App in your [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/) and add `http://localhost:8888/callback` as a Redirect URI in the app settings\n\n3. 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\n\n4. Ensure [nvm](https://github.com/nvm-sh/nvm) and [npm](https://www.npmjs.com/) are installed globally\n\n5. Install the correct version of Node\n\n    ```shell\n    nvm install\n    ```\n\n6. Install dependencies\n\n    ```shell\n    npm install\n    ```\n\n7. Run the React app on \u003chttp://localhost:3000\u003e and the Node server on \u003chttp://localhost:8888\u003e\n\n    ```shell\n    npm start\n    ```\n\n\n## Deploying to Heroku with Git\n\n1. Create a [Heroku](https://www.heroku.com/) app\n\n2. Add your Heroku app as a git remote\n\n    ```shell\n    heroku git:remote -a your-app-name\n    ```\n\n3. Add `http://your-app-name.herokuapp.com/callback` as a Redirect URI in your Spotify app's settings\n\n4. In your app's **Settings** tab in the Heroku dashboard, add [config vars](https://devcenter.heroku.com/articles/config-vars#using-the-heroku-dashboard).\n\n   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.\n\n   ```env\n   REDIRECT_URI: http://your-app-name.herokuapp.com/callback\n   FRONTEND_URI: http://your-app-name.herokuapp.com\n   ```\n\n5. Push to Heroku\n\n    ```shell\n    git push heroku main\n    ```\n\n    \n## Credits\n\nInspired by Spotify Profile page.\n\n## License\n\nMusilink is developed under the [MIT license]\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frathna-git%2Fmusilink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frathna-git%2Fmusilink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frathna-git%2Fmusilink/lists"}