This previously was titled Spotify Downloader Web Server however I've decided to change the name as I've overhauled the UI. This is the up-to-date version of CLI-Spotify-Downloader's Web Server. Written in node.js and vite instead of python and static HTML/CSS. This application does the same thing as the previous one but with more of an emphasis on user experience and UI/UX.
This web app features an all in one place to download, manage, and search for music. Using spotify API keys (now paid) or deezer API (free) to search and Youtube (yt-dlp) to download the song and place in a structured folder path (~/downloads/ARTIST_NAME/ALBUM_NAME/SONG_NAME.mp3). Along with a UI overhaul which has more options for customization, a new queue feature to track past and current downloads, an artist page to organize by artists downloaded, and more. This web app is great for downloading songs (mp3 format exclusively) on a server to stream or to just rip for personal use.
The home page has been completely redesigned from the previous one. This features your latest downloads in album and song format. Along with a quick search bar.
The results page isn't much different from the previous one in terms of functionality or design, just some updates on UI.
The new queue page has been added for keeping track of past and current downloads. Useful for knowing the status of a download or what you've downloaded previously.
The settings page is mainly the same but with extra functionality and features. First there is the ability to add a custom background instead of using the featured gradients (using URLs). You can also adjust the dimness of the custom image if things get washed out. There is a new toggle to auto refresh the library upon downloading a new song as well and others too.
There are many other tweaks and additions that have made their way into this new UI. Mess around in the app and you might see some of them!
Yes, this project does use large language models (or AI) for rapid development and git commits, etc. Since this is a sensitive topic in online spaces if you don't want to use it due to this then that's your prerogative. If you still would like to try this out, by all means.
- Run
npm installin both theclientandserverfolders, then runningmake dev(development) ormake run(production) from the project root to run the web app.
- Run
./setup.sh(linux) orsetup.ps1(windows) which will install all dependencies for both the client and server. - Run
make run(production) ormake dev(development) from the project root to run the web app. Runmake helpif you need descriptions and a list of commands given.
make dev and make run run on separate ports. In make dev the frontend and backend run independently; in make run everything is served from the Express backend on a single port.
make dev |
make run |
|
|---|---|---|
| Frontend | http://localhost:5173 | http://localhost:3000 |
| Backend API | http://localhost:3001 | http://localhost:3000/api/* |
- Visit Spotify's Documentation on their web-api and walkthrough the app creation process to obtain your spotify api keys if you so choose.
- If you choose Spotify paste those API keys into
backend/.envor alternatively through the web UI in settings (ensure you chooseSpotifyfor the provider to unlock the area for api keys).
If you want to run it in a docker container edit docker-compose.yml to your configuration and run docker-compose up --build -d to get it running. You can then proceed with step 2 & 3 if you would like to use spotify. I recommend using the WebUI for the API keys if you are running in docker.
There are some current issues being investigated:
- MacOS certificate verify failing using yt-dlp