{"id":29625631,"url":"https://github.com/clicktodev/spotify-profile","last_synced_at":"2025-07-21T06:37:41.319Z","repository":{"id":173027840,"uuid":"514565079","full_name":"clicktodev/spotify-profile","owner":"clicktodev","description":"A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API","archived":false,"fork":false,"pushed_at":"2023-06-06T12:29:46.000Z","size":1552,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-15T05:43:52.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://spotify-profile.herokuapp.com/","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/clicktodev.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-16T11:56:42.000Z","updated_at":"2024-04-17T18:29:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff5fefe4-4e16-4479-bf8d-56506f0b0017","html_url":"https://github.com/clicktodev/spotify-profile","commit_stats":null,"previous_names":["hichemfantar/spotify-observer","hichemfantar/spotify-profile","clicktodev/spotify-profile"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clicktodev/spotify-profile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Fspotify-profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Fspotify-profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Fspotify-profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Fspotify-profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clicktodev","download_url":"https://codeload.github.com/clicktodev/spotify-profile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clicktodev%2Fspotify-profile/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266253948,"owners_count":23900058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-07-21T06:37:40.668Z","updated_at":"2025-07-21T06:37:41.314Z","avatar_url":"https://github.com/clicktodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spotify Profile\n\n\u003e A web app for visualizing personalized Spotify data\n\nThis project was forked from [Spotify Profile by Brittany Chiang](https://github.com/bchiang7/spotify-profile).\n\nChanges from the original fork:\n\n- Moved from Reach Router to React Router\n- Updated dependencies to latest versions\n- Rewrote deprecated code\n- Moved server state management to React Query\n\nBuilt with a bunch of things, but to name a few:\n\n- [Spotify Web API](https://developer.spotify.com/documentation/web-api/)\n- [Create React App](https://github.com/facebook/create-react-app)\n- [Express](https://expressjs.com/)\n- [React Router](https://reactrouter.com/en/main)\n- [Styled Components](https://www.styled-components.com/)\n\n## Setup\n\n1. [Register a Spotify App](https://developer.spotify.com/dashboard/applications) and add `http://localhost:8888/callback` as a Redirect URI in the app settings\n1. Create an `.env` file in the root of the project based on `.env.example`\n1. `nvm use`\n1. `npm install \u0026\u0026 npm run client:install`\n1. `npm run dev`\n\n## Deploying to Heroku\n\n1. Create new heroku app\n\n   ```bash\n   heroku create app-name\n   ```\n\n2. Set Heroku environment variables\n\n   ```bash\n   heroku config:set CLIENT_ID=XXXXX\n   heroku config:set CLIENT_SECRET=XXXXX\n   heroku config:set REDIRECT_URI=https://app-name.herokuapp.com/callback\n   heroku config:set FRONTEND_URI=https://app-name.herokuapp.com\n   ```\n\n3. Push to Heroku\n\n   ```bash\n   git push heroku master\n   ```\n\n4. Add `http://app-name.herokuapp.com/callback` as a Redirect URI in the spotify application settings\n\n5. Once the app is live on Heroku, hitting http://app-name.herokuapp.com/login should be the same as hitting http://localhost:8888/login\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclicktodev%2Fspotify-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclicktodev%2Fspotify-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclicktodev%2Fspotify-profile/lists"}