Video Demo: https://www.youtube.com/watch?v=zd0qESJr70I&t=3s
I made this WebApp using Python, Bootstrap CSS and HTML
It's a project made with the idea of creating a personal space for music enthusiasts, like me, based on the user's listening history on Spotify, a Swedish audio streaming and media services provider.
For the research part, I had to learn about API related concepts like authentication, authorization, endpoints, OAuth 2, API calls, REST, Authorization Flow, scopes, Authorization code, Access Tokens and Refresh Tokens
First I created a virtual environment in my project folder to help build the project on my local server, for which I followed a number of steps
- Installed Python 3 from its official website
- Downloaded vscode's venv for python3 and activated it
- Chose the python interpreter in venv path
- Installed Flask using pip
Then I created an app.py file in which I imported important libraries like flask, requests, and os. After extensively reading the Spotify Web API documentation, I created an app with my account on spotify, which eventually granted me a client_id and client_secret. I saved the client id and key as environment variables.
After that, through some more research, I found, downloaded and imported lightweight Python library for the Spotify Web API, Spotipy, which could help me in implementing the OAuth flow for making the api calls.
Using app.route() decorator, I made many routes for my application. The root url would contain a button the user to authenticate his spotify account with my app. For this, I made an OAuth object using Spotipy to start the Authorization flow by sending a get request to Spotify, with client_id, client_secret, redirect_uri and a string of comma separated scopes as parameters.
Once the user authenticates and grants Vibin' permissions I seek through the scopes, he is redirected to a callback route, which is my redirect uri, which generates an Authorization code. I handle the auth code and use it to generate an access token using my getAccTok() function. Once I get the access token, I use it to get access to the user's account info, which greets the user with his name and Spotify Profile photo.
I then make a auth_reqd function to decorate certain routes to require authentication, which I include in a separate file helper.py, which I then import in app.py to use the auth_reqd function.
The token_has_expired(token) function checks to see if the access token has expired, that is, if the session holding the token has expired, and return True or False accordingly. If true, I generate a refresh token to replace the access token. This prevents the user to go through the authorization process again.
The artists route takes the user to a web page showcasing the top 3 favourite artists of his and their popularity score, based on his last 6 months of listening history. To make this possible, i had to parse the json data recieved as a response to the api calls to Spotify, and extract required data from there.
A button at the bottom of the top artists page leads the user to some 20 tracks recommended by the application based on id's of the top artists and their specific genres of music. This I achieved through sending a get request to /recommendations endpoint in Spotify Web Api with necessary headers and parameters.
The front-end of the website I designed using the Bootstrap 5.3 framework. First I made a template folder for my html files. I created 2 layout files, one for when the user is authenticated, and one for when he isn't. I include these layout files in all other html files using jinja's syntax. Colours I used for designing the layout(navbar, footer, buttons, borders, table structure) was mostly using bootstrap's dark and success color classes, to match Spotify's color scheming. To make the website responsive, I read upon and used Bootstrap's flexbox and grid classes and its breakpoint classes too The recommended tracks page displays the songs, their artists and release dates in a tabular format with striped and hoverable rows.
The user can revoke the permissions given to Vibin' by following these steps: Profile -> Account -> Apps -> Click On Remove Access next to the App's name