{"id":21648482,"url":"https://github.com/jeffreyca/spotify-recently-played-readme","last_synced_at":"2025-05-16T04:06:00.501Z","repository":{"id":40488517,"uuid":"293134740","full_name":"JeffreyCA/spotify-recently-played-readme","owner":"JeffreyCA","description":"Display your recently played Spotify tracks on your GitHub profile README.","archived":false,"fork":false,"pushed_at":"2025-01-24T05:54:19.000Z","size":615,"stargazers_count":395,"open_issues_count":5,"forks_count":50,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-16T04:05:53.706Z","etag":null,"topics":["hacktoberfest","profile-readme","spotify"],"latest_commit_sha":null,"homepage":"https://spotify-recently-played-readme.vercel.app","language":"TypeScript","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/JeffreyCA.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":"2020-09-05T18:43:15.000Z","updated_at":"2025-05-15T12:40:23.000Z","dependencies_parsed_at":"2024-01-16T20:56:14.980Z","dependency_job_id":"f70daf8a-83ea-4057-b5ab-4a35bc38783d","html_url":"https://github.com/JeffreyCA/spotify-recently-played-readme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeffreyCA%2Fspotify-recently-played-readme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeffreyCA%2Fspotify-recently-played-readme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeffreyCA%2Fspotify-recently-played-readme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JeffreyCA%2Fspotify-recently-played-readme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JeffreyCA","download_url":"https://codeload.github.com/JeffreyCA/spotify-recently-played-readme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464895,"owners_count":22075570,"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":["hacktoberfest","profile-readme","spotify"],"created_at":"2024-11-25T06:56:55.325Z","updated_at":"2025-05-16T04:05:55.483Z","avatar_url":"https://github.com/JeffreyCA.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spotify Recently Played README\nDisplay your recently played Spotify tracks on your GitHub profile README. Powered by [Vercel](https://vercel.com).\n\n\u003e Check out [lastfm-recently-played-readme](https://github.com/JeffreyCA/lastfm-recently-played-readme) for a similar integration for Last.fm scrobbles.\n\n## Getting Started\nClick the button below to connect your Spotify account with the Vercel app. This is needed to access your recently played tracks.\n\n\u003e By authorizing the app, you agree to have your Spotify username, access token, and refresh token stored on a secure Firebase database. This is required so you only need to authorize once and the app can automatically refresh access tokens in order to retrieve recent tracks.\n\u003e\n\u003e You can revoke the app at https://www.spotify.com/account/apps.\n\n\u003ca href=\"https://spotify-recently-played-readme.vercel.app/\"\u003e\u003cimg src=\"assets/auth.png\" alt=\"Authorize button\" width=\"160\"/\u003e\u003c/a\u003e\n\nAfter granting permission, just add the following into your README and set the `user` query parameter to your Spotify username.\n\n```md\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)\n```\n\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)\n\n### Link to Spotify profile\nUse the following snippet to make the widget link to your Spotify profile (or any other URL).\n\n```md\n[![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)](https://open.spotify.com/user/jeffreyca16)\n```\n\n[![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)](https://open.spotify.com/user/jeffreyca16)\n\n### Custom track count\nTo a custom number of tracks, pass the query parameter `count` and set it to the number of tracks to display.\n\n\u003e Default: `5`  \n\u003e Min: `1`  \n\u003e Max: `10`\n\nExample:\n```md\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026count=1)\n```\n\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026count=1)\n\n### Custom card width\nTo set a custom card width, pass the query parameter `width` and set it to the desired width in px.\n\n\u003e Default: `400`  \n\u003e Min: `300`  \n\u003e Max: `1000`\n\nExample:\n```md\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026width=600)\n```\n\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026width=600)\n\n### Unique tracks\nTo show only unique tracks of the recently played list, pass the `unique` query parameter and set it to `true`, `1`, `on`, or `yes`.\n\n\u003e Default: `false`  \n\nExample:\n```md\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026unique=true)\n```\n\n![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16\u0026unique=true)\n\n## Deploying own Vercel instance\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FJeffreyCA%2Fspotify-recently-played-readme\u0026env=NEXT_PUBLIC_CLIENT_ID,NEXT_PUBLIC_BASE_URL,NEXT_PUBLIC_REDIRECT_URI,CLIENT_SECRET,FIREBASE_PROJECT_ID,FIREBASE_PRIVATE_KEY_B64,FIREBASE_CLIENT_EMAIL)\n\nDeploy your own Vercel instance using the link above. Next, set the following environment variables:\n\n| Name | Description |\n|---|---|\n| `NEXT_PUBLIC_REDIRECT_URI` | Callback URI from Spotify |\n| `NEXT_PUBLIC_BASE_URL` | Base URL of the project |\n| `NEXT_PUBLIC_CLIENT_ID` | Spotify app client ID |\n| `CLIENT_SECRET` | Spotify app client secret key |\n| `FIREBASE_PROJECT_ID` | Firebase project ID |\n| `FIREBASE_PRIVATE_KEY_B64` | Base64-encoded string of Firebase private key |\n| `FIREBASE_CLIENT_EMAIL` | Firebase client email |\n| `FIREBASE_DATABASE_URL` | Firebase database URL |\n| `WARMUP_KEY` | Secret to trigger Firebase database warmup (see [Common issues](#common-issues) for more info)\n\nFinally, edit `utils/Constants.ts` and set the `ClientId`, `BaseUrl`, `RedirectUri` values.\n\n## Running locally\n1. Clone Git repo\n    ```sh\n    $ git clone https://github.com/JeffreyCA/spotify-recently-played-readme.git\n    ```\n2. Install Node dependencies\n    ```sh\n    $ npm install\n    ```\n3. Create `.env` file containing required environment variables:\n    ```sh\n    NEXT_PUBLIC_REDIRECT_URI=\u003cCallback URI from Spotify\u003e\n    NEXT_PUBLIC_BASE_URL=\u003cBase URL of the project\u003e\n    NEXT_PUBLIC_CLIENT_ID=\u003cSpotify app client ID\u003e\n    CLIENT_SECRET=\u003cSpotify app client secret key\u003e\n    FIREBASE_PROJECT_ID=\u003cFirebase project ID\u003e\n    FIREBASE_PRIVATE_KEY_B64=\u003cBase64-encoded string of Firebase private key\u003e\n    FIREBASE_CLIENT_EMAIL=\u003cFirebase client email\u003e\n    FIREBASE_DATABASE_URL=\u003cFirebase database URL\u003e\n    ```\n4. Edit `utils/Constants.ts` and set the `ClientId`, `BaseUrl`, `RedirectUri` values.\n5. Run development server\n    ```sh\n    $ npm run dev\n    ```\n\nThe app will be running at [http://localhost:3000](http://localhost:3000).\n\n## Common issues\n### Widget fails to load on GitHub\nSometimes you may encounter an issue where the widget fails to load on GitHub, with a 502 response from `camo.githubusercontent.com`. This is because GitHub proxies images and will timeout requests if they take too long. Long request times are usually a result of Firebase database **cold starts**, which can take up to several seconds ([known issue](https://issuetracker.google.com/issues/158014637)).\n\nAs a workaround, there's an endpoint at `/api/warmup?key=\u003cWARMUP_KEY\u003e` which accepts a GET request with a single query parameter `key`. If it matches the environment variable `WARMUP_KEY`, then it will go ahead and issue a simple database read request to Firebase to keep it *warm*. For your own Vercel instance, you can setup a simple cron job to ping the endpoint every few minutes or so to prevent cold starts. I already do this with the hosted Vercel instance.\n\nThis is a bit of a hacky workaround and may not 100% eliminate the issue. If you have any better solutions or have general optimizations feel free to create a PR!\n\n## License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyca%2Fspotify-recently-played-readme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffreyca%2Fspotify-recently-played-readme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyca%2Fspotify-recently-played-readme/lists"}