MergeSortMusic

A web app for sorting your Spotify playlists using the power of merge sort!

You can link your Spotify account to the web app and import playlists from Spotify. Then, using our sorting tool, you will be presented with 2 songs from the playlists, and by using the embedded Spotify player to listen to both songs, you can select which one you prefer. Rinse and repeat till the whole playlist is sorted using our sorting algorithm and your input, at which you can then re-import the playlist back to Spotify for your listening enjoyment!

Branches

• main - The final codebase for our project with all of the individual components merged together.
• backend - Branch with most of the backend development by Jonathan.
• frontend - Branch with most of the frontend development by Shrey and John.
• sorting - Branch with most of the sorting algorithm development by Georgia.

Tech

Python packages used in the project:

• Django - A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
• Django REST framework - A powerful and flexible toolkit for building Web APIs.

Node.js packages used in the project:

• React - A JavaScript library for building user interfaces
• React Router - A collection of navigational components that compose declaratively with your application.
• Material-UI - A popular React UI framework.
• Babel - A JavaScript compiler.
• webpack - A module bundler.

Installation

Prerequisites: Make sure python3, pip, nodejs, and npm are installed.

Install django, django-rest-framework, and requests from pip.

sudo python3 -m pip install django django-rest-framework requests

Install webpack, webpack-cli, and babel-loader from npm.

sudo npm i -g webpack webpack-cli babel-loader

Next, open two terminals. Open the first one in the project root directory, and the second one in the frontend folder.

In the project root directory terminal, run:

python3 manage.py runserver

In the frontend directory terminal, run:

npm run dev

As you make changes to the backend django code, the server will automatically update to reflect the changes and display any errors in the terminal.

As you make changes to the frontend react code, Babel will automatically recompile the js and update the main.js file (minimized .js file containing all of the .js) and display any errors in the terminal.

If you make any changes to the models, please stop the django server and run these commands to update the database with the changes.

python3 manage.py makemigrations
python3 manage.py migrate