{"id":23167636,"url":"https://github.com/weareblahs/untitledmusicstreamingthing","last_synced_at":"2025-04-04T22:14:57.440Z","repository":{"id":254783179,"uuid":"841356276","full_name":"weareblahs/UntitledMusicStreamingThing","owner":"weareblahs","description":"React-based online music player that plays through Spotify and your own uploaded music (see weareblahs/UMSTserver)","archived":false,"fork":false,"pushed_at":"2024-09-30T11:20:07.000Z","size":791,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T06:44:20.765Z","etag":null,"topics":["music-player","spotify-web-player","web-player"],"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/weareblahs.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":"2024-08-12T08:43:33.000Z","updated_at":"2024-09-30T11:20:04.000Z","dependencies_parsed_at":"2024-08-26T04:38:41.082Z","dependency_job_id":"9468000b-1204-45c2-b137-908bb51fce1a","html_url":"https://github.com/weareblahs/UntitledMusicStreamingThing","commit_stats":null,"previous_names":["weareblahs/untitledmusicstreamingthing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareblahs%2FUntitledMusicStreamingThing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareblahs%2FUntitledMusicStreamingThing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareblahs%2FUntitledMusicStreamingThing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareblahs%2FUntitledMusicStreamingThing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weareblahs","download_url":"https://codeload.github.com/weareblahs/UntitledMusicStreamingThing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256108,"owners_count":20909240,"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":["music-player","spotify-web-player","web-player"],"created_at":"2024-12-18T02:31:32.168Z","updated_at":"2025-04-04T22:14:57.418Z","avatar_url":"https://github.com/weareblahs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://github.com/user-attachments/assets/26b26e5c-1cba-4de6-b215-41a78d320edc)\n\n# About this project\n\nThis is a web player that plays from Spotify or your local sources (that can be uploaded to your local server via \"Distribution Dashboard\").\n\n# How to get started?\n\n## Before you start\n\nYou are required to provide your Spotify Client ID and Client Secret for the app. See `src/WebComponents/Backend/SpotifyClientData.jsx.template` for details on how to set it up.\nMake sure that you have Node.js installed, as this will be used for the client itself.\n\n## 1. Set up the server.\n\nThe server is explicitly required for the usage of Untitled Music Streaming Thing, as it uses the server to log in. Host it locally on port 5000 for your own access. See [here](https://github.com/weareblahs/UMSTServer) for more details about the server.\n\n## 2. Clone this repository.\n\nAfter you finally get the server up and running, clone this repository.\n\n```bash\ngit clone https://github.com/weareblahs/UntitledMusicStreamingThing\ncd UntitledMusicStreamingThing\n```\n\n## 3. Install required modules for the app to run.\n\nThis will install all required modules for UMST to run properly.\n\n```bash\nnpm install\n```\n\n## 4. Start UMST and register a local account.\n\nAfter you added all required modules, start the server.\n\n```bash\nnpm run dev\n```\n\nThen, go to the following address:\n\n```\nhttp://localhost:5173\n```\n\nClick on the \"Sign up\" button and follow the instructions.\n\n## 5. Link to your Spotify account.\n\nAfter logging in, click on \"Link to Spotify\" and follow the instructions to link to your Spotify account.\n\n# Known bugs\n\n- Sometimes the Spotify Web Playback SDK won't work. This can be resolved with sereval refreshes.\n  - This problem only happens when you run the app under local network (example: `localhost` and `127.0.0.1`). If you host this app in an online environment (example Vercel), the Spotify web player won't have any problems.\n- Progress bar for Spotify won't update until an action is made (example: pause, next, previous, etc.)\n\n# Credits (otherwise known as \"What does this project use?\")\n\n| Application / Component name                                                                  | Usage                                                                                                   |\n| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| [MongoDB](https://www.mongodb.com/)                                                           | Backend database                                                                                        |\n| [Express.js](https://expressjs.com/)                                                          | Backend API Controls                                                                                    |\n| [React](https://react.dev/)                                                                   | Frontend (app) code                                                                                     |\n| [Node.js](https://nodejs.org/en)                                                              | Frontend/backend base                                                                                   |\n| [NextUI](https://nextui.org/)                                                                 | User interface framework                                                                                |\n| [Tailwind CSS](https://tailwindcss.com/)                                                      | Custom styling                                                                                          |\n| [react-spotify-web-playback-sdk](https://github.com/y-hiraoka/react-spotify-web-playback-sdk) | Spotify playback SDK wrapper for React that allows me to integrate efficently                           |\n| [ky](https://github.com/sindresorhus/ky)                                                      | Used for all fetch requests on the frontend                                                             |\n| [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar)                       | Scrollbar for album search                                                                              |\n| [react-seekbar](https://github.com/kangju2000/react-seekbar)                                  | Seekbar for playback component on frontend                                                              |\n| [Font Awesome](https://github.com/FortAwesome/Font-Awesome)                                   | Icons. via [react-icons](https://github.com/react-icons/react-icons)                                    |\n| [Bootstrap Icons](https://github.com/twbs/icons)                                              | Icons. via [react-icons](https://github.com/react-icons/react-icons)                                    |\n| [Radio Canada Big via Google Fonts](https://fonts.google.com/specimen/Radio+Canada+Big)       | Main font used for frontend                                                                             |\n| [Inconsolata via Google Fonts](https://fonts.google.com/specimen/Inconsolata)                 | Font used for track number and length                                                                   |\n| [js-cookie](https://github.com/js-cookie/js-cookie)                                           | Used for getting and setting cookies used in the current session                                        |\n| [react-router](https://github.com/remix-run/react-router) - frontend uses react-router-dom    | Used for routing to different components and pages                                                      |\n| [jwt-decode](https://github.com/auth0/jwt-decode)                                             | Used for decoding JWT-encoded tokens at the backend                                                     |\n| [JSON Web Tokens](https://jwt.io/)                                                            | Used for encoding user data into token                                                                  |\n| [debounce](https://github.com/sindresorhus/debounce)                                          | Used for delaying the search bar change state to prevent rate limits                                    |\n| [react-use-audio-player](https://github.com/E-Kuerschner/useAudioPlayer)                      | Local file playback (including playlist). Powered by [howler.js](https://github.com/goldfire/howler.js) |\n\n## Other credits\n\n- Music icon for placeholder image via [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Simple_Music.svg), uploaded by [Tokyoship](https://commons.wikimedia.org/wiki/User:Tokyoship).\n\nSome credits for code (such as Stack Overflow code) can be found under comments in the code.\n\n## More questions\n\n- How to make a user an administrator so that they can access the Distribution Portal, which is required to upload music to the platform?\n\n1. Encode `e92007c04006d555762093c6efa650fe` into Base64. You can use free tools to encode it, such as `https://base64encode.org`.\n2. Go to `http://localhost:5000/users/(BASE64_ENCODED_STRING)` on your browser, where the `BASE64_ENCODED_STRING` is the result from Step 1 (hint: starts with ZTky...)\n3. Get current user ID after logging in into Untitled Music Streaming Thing by opening up the console under Developer Tools. This will be used.\n4. Follow the instructions from the response given in Step 2.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweareblahs%2Funtitledmusicstreamingthing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweareblahs%2Funtitledmusicstreamingthing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweareblahs%2Funtitledmusicstreamingthing/lists"}