About this project

This is a web player that plays from Spotify or your local sources (that can be uploaded to your local server via "Distribution Dashboard").

How to get started?

Before you start

You 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. Make sure that you have Node.js installed, as this will be used for the client itself.

1. Set up the server.

The 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 for more details about the server.

2. Clone this repository.

After you finally get the server up and running, clone this repository.

git clone https://github.com/weareblahs/UntitledMusicStreamingThing
cd UntitledMusicStreamingThing

3. Install required modules for the app to run.

This will install all required modules for UMST to run properly.

npm install

4. Start UMST and register a local account.

After you added all required modules, start the server.

npm run dev

Then, go to the following address:

http://localhost:5173

Click on the "Sign up" button and follow the instructions.

5. Link to your Spotify account.

After logging in, click on "Link to Spotify" and follow the instructions to link to your Spotify account.

Known bugs

• Sometimes the Spotify Web Playback SDK won't work. This can be resolved with sereval refreshes.
  • 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.
• Progress bar for Spotify won't update until an action is made (example: pause, next, previous, etc.)

Credits (otherwise known as "What does this project use?")

Application / Component name	Usage
MongoDB	Backend database
Express.js	Backend API Controls
React	Frontend (app) code
Node.js	Frontend/backend base
NextUI	User interface framework
Tailwind CSS	Custom styling
react-spotify-web-playback-sdk	Spotify playback SDK wrapper for React that allows me to integrate efficently
ky	Used for all fetch requests on the frontend
tailwind-scrollbar	Scrollbar for album search
react-seekbar	Seekbar for playback component on frontend
Font Awesome	Icons. via react-icons
Bootstrap Icons	Icons. via react-icons
Radio Canada Big via Google Fonts	Main font used for frontend
Inconsolata via Google Fonts	Font used for track number and length
js-cookie	Used for getting and setting cookies used in the current session
react-router - frontend uses react-router-dom	Used for routing to different components and pages
jwt-decode	Used for decoding JWT-encoded tokens at the backend
JSON Web Tokens	Used for encoding user data into token
debounce	Used for delaying the search bar change state to prevent rate limits
react-use-audio-player	Local file playback (including playlist). Powered by howler.js

Other credits

• Music icon for placeholder image via Wikimedia Commons, uploaded by Tokyoship.

Some credits for code (such as Stack Overflow code) can be found under comments in the code.

More questions

• How to make a user an administrator so that they can access the Distribution Portal, which is required to upload music to the platform?

1. Encode e92007c04006d555762093c6efa650fe into Base64. You can use free tools to encode it, such as https://base64encode.org.
2. 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...)
3. Get current user ID after logging in into Untitled Music Streaming Thing by opening up the console under Developer Tools. This will be used.
4. Follow the instructions from the response given in Step 2.