{"id":19892996,"url":"https://github.com/kevinfjiang/vercel_spotify","last_synced_at":"2026-05-14T09:32:58.765Z","repository":{"id":182662371,"uuid":"576784611","full_name":"kevinfjiang/vercel_spotify","owner":"kevinfjiang","description":"Spotify player for GitHub readmes (updated 2023)","archived":false,"fork":false,"pushed_at":"2024-06-24T01:58:53.000Z","size":51,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T19:44:41.034Z","etag":null,"topics":["spotify","vercel"],"latest_commit_sha":null,"homepage":"https://kevinfjiang.vercel.app/now-playing","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/kevinfjiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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-12-11T00:49:08.000Z","updated_at":"2024-06-24T01:58:56.000Z","dependencies_parsed_at":"2024-11-12T18:30:45.493Z","dependency_job_id":"7e6fb471-a96e-4afd-89e7-84f870355a93","html_url":"https://github.com/kevinfjiang/vercel_spotify","commit_stats":null,"previous_names":["kevinfjiang/vercel_spotify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfjiang%2Fvercel_spotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfjiang%2Fvercel_spotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfjiang%2Fvercel_spotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfjiang%2Fvercel_spotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinfjiang","download_url":"https://codeload.github.com/kevinfjiang/vercel_spotify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241321742,"owners_count":19944007,"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":["spotify","vercel"],"created_at":"2024-11-12T18:26:43.115Z","updated_at":"2026-05-14T09:32:58.699Z","avatar_url":"https://github.com/kevinfjiang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vercel Spotify\n\nUsing vercel to display most liked songs, used for my musichum final project and my README. My previous version was broken therefore I migrated to using NextJS, something vercel will always support because they recently acquired the framework. I've updated to NextJS 13 using the app router and API routes to return an svg. This is fully deployable, granted you follow the setup guide.\n\n# Setup Guide\n\nGuide by [JoshLmao](https://github.com/JoshLmao)\n\n### Part 1: Vercel \u0026 Deploy\n\nSetup with a click of a button 😉\n\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/kevinfjiang/vercel_spotify)\n\n1. Sign up or Sign in to use [Vercel](https://vercel.com/) for hosting the repo.\n\n2. Leave the remaining settings for now and click 'Deploy'\n\n### Part 2: Configure Environment Vars\n\n1. Navigate to [Spotify Dashboard](https://developer.spotify.com/dashboard/) and create a new app.\n   \u003cimg src=\"https://i.imgur.com/msl76HF.png\" height=\"300\"\u003e\n\n2. Click, edit settings and add \"http://localhost:3000/callback\" to the \"Redirect URIs\" section then save\n   \u003cimg src=\"https://i.imgur.com/wm4IoDH.png\" height=\"400\"\u003e\n\n3. Click 'SHOW CLIENT SECRET' under Client ID. Copy both Client ID and Client Secret and paste them into `.env` file in the root directory of this repository (create the file if it does not exist) like so:\n\n```ini\nSPOTIFY_CLIENT_ID=1234567890\nSPOTIFY_CLIENT_SECRET=1234567890\n```\n\n5. Next, we need to retrieve a Refresh Token through [Authoration Code flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow).\n\nThere is a node script, `generate-refresh-token.js` to get this for you. Run the following commands:\n\n```bash\nnpm install\nnode ./generate-refresh-token.js # You will be asked to login to your spotify account\n```\n\n6. Navigate to your deployment on Vercel and click on Settings, then click on \"Environment Variables\"\n\n   \u003cimg src=\"https://i.imgur.com/kUEW5Tt.png\" height=400 /\u003e\n\n7. Insert the following Variable names and insert your values from the previous steps\n\n```\nName: SPOTIFY_CLIENT_ID\nValue: MY_CLIENT_ID\n\nName: SPOTIFY_CLIENT_SECRET\nValue: MY_SECRET_ID\n\nName: SPOTIFY_REFRESH_TOKEN\nValue: MY_REFRESH_TOKEN\n```\n\n8. Once done, navigate to one of your deployment url's and place \"/now-playing\" at the end. For example, \"https://now-playing-joshlmao.vercel.app/now-playing\"\n\n9. Replace \"MY_VERCEL_DEPLOYMENT_URL\" in the following code with one of your deployment url's and insert it into any ReadMe.md\n\n```\n\u003ca href=\"https://MY_VERCEL_DEPLOYMENT_URL/now-playing?open\"\u003e\n    \u003cimg src=\"https://MY_VERCEL_DEPLOYMENT_URL/now-playing\" width=\"256\" height=\"64\" alt=\"Now Playing\"\u003e`\n\u003c/a\u003e\n```\n\nThat's it! Below is an example of what it should look like. If you have any problems, make sure to re-read the instructions and follow them precisely!\n\n\u003cimg src=\"https://i.imgur.com/uxeiC8k.png\"\u003e\n\n\nBased off the spotify readme by https://github.com/natemoo-re/natemoo-re.\n\n## Disclaimer\n\nI'm not a javascript/typescript developer. Please feel free to open issues and suggest best practices!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinfjiang%2Fvercel_spotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinfjiang%2Fvercel_spotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinfjiang%2Fvercel_spotify/lists"}