Developed by Giorgos Nikolaou and Angelina Panagopoulou
Spotube-Web is a Django Rest API and React Frontend application that enables users to download Spotify playlists as mp3 files from YouTube.
Spotube-Web is live for you to download your playlists here
The application utilizes the spotube-package
package for handling Spotify playlist processing at a low level.
- Download Spotify playlists by providing the playlist URL and necessary API keys.
- Retrieve detailed song information from Spotify, including official name, artists, and album cover art.
- Search for and download the most relevant song videos on YouTube based on song name and artist(s).
- Fetch lyrics using the LyricsGenius API and add them to the downloaded songs.
- Edit MP3 tags to set artist and album information, add lyrics, and set cover art.
- Optionally normalize the volume level of downloaded MP3 files.
To get started with Spotube-Web locally, follow these steps:
- Node.js and npm installed for frontend development.
- Python and pip installed for backend development.
- Spotify and Genius API keys.
- Clone the repository:
git clone https://github.com/lybrag1/spotube-web.git cd spotube-web
- Install frontend dependencies:
cd app npm install --forces
- Install backend dependencies:
cd ../server pip install -r requirements.txt
- Configure environment variables:
GENIUS_API_KEY # The key used to access the LyricsGenius API SPOTIFY_CLIENT_ID # ID used with Spotify API SPOTIFY_CLIENT_SECRET # Secret used to authenticate with Spotify API SONG_NUMBER_LIMIT # Application variable, used to set the max number of songs to download DJANGO_SECRET_KEY # The Django cryptography key, used to protect against CSRF and other attacks REACT_APP_API_BASE_URL # The url the React app will target for the backend. If running locally, set to "http://127.0.0.1:8000"
- Run the backend server:
python manage.py runserver pip install -r requirements.txt
- Run the frontend app:
cd ../app npm start
- Visit http://localhost:3000 in your browser to use the Spotube-Web application.
- Open the Spotube-Web application in your browser.
- Provide the Spotify playlist URL.
- Customize any optional settings like sound normalization and lyric download.
- Click the download button to initiate the playlist download process.
- When the progressbar is full, click the Download button
This section outlines the development methodology followed during the creation of Spotube-Web, and the general structure of the app.
Spotube-Web leverages the following technologies:
- Backend: Django, using the Django Rest Framework
- Frontend: React
- Build Automation GitHub Actions
- Backend Hosting Azure WebApps
- Frontend Hosting GitHub Pages
- Containerization and Container Hosting Docker and DockerHub
- Each time the frontend is accessed, it generates a unique id. This id is provided to the backend, together with the playlist URL and other arguments, like the option to normalize the sound levels and download lyrics.
- After receiving a request, the Django API creates a Downloader class object to match the unique id, initializes it with the given arguments, and starts the download.
- The front-end will poll the backend to get the current progress and the expected time of completion.
- When the download is complete, the "Download Playlist" button will become active. When clicked, the downloaded songs will be downloaded in several .zip files, so that each .zip is under a given size. This is used to circumvent the limit in the response sizes of Azure WebApp.
The project is tested and deployed with the help of GitHub actions. When pushing to a feature branch or creating a pull request, the test suite is automatically run. When merging to the main branch, the pipeline will:
- Run the test suite
- Create a docker image of the project
- Upload the image to DockerHub
- Deploy the image to Azure WebApps
- Compile a static version of the frontend and deploy to Github Pages
If you want to contribute to Spotube-Web, follow these steps:
- Fork the repository.
- Create a new branch for your feature:
git checkout -b feature-name
. - Commit your changes:
git commit -m 'Add new feature'
. - Push to the branch:
git push origin feature-name
. - Submit a pull request.