My project was based around Spotify and music simply because of my love for music! The two main goals I had in mind heading into this project was to use the skills I learned in CS50 well, while also going above just what I learned in CS50. The design of this project was primarily based on these two goals. To fulfill the first goal, I stuck with Python, HTML, CSS, JavaScript, Flask, and SQL: all languages we were already familiar with through CS50 (namely CS50 finance). However, to fulfill my second goal, I switched our database system to SQLAlchemy. This allowed my project to become more accessible since now my project is no longer limited to the confines of the CS50 codespace. SQLAlchemy also allowed us to create and modify our databases in Python. Furthermore, I also pushed myself to learn how to use part of the Spotify API through Spotipy. This way, I could access the large databases of Spotify to assist in my project.
The structure of my SQLAlchemy database only has one table: users, which corresponds to the User type. Working through my project, I realized that I only needed the user database, so it might have been better to have just dropped the login and profile function all-together. I'm not too sure how needed a login/user function is for my project.
Each User in the users table, will has the columns id, first_name, last_name, email, username, and password, which directly takes in the user input from the register page. I also stored passwords as a hash for security purposes: our table doesn't actually store passwords, just the hash. The column id is the primary key so that each user can be easily queried to.
The front end of the project provided a foundation for the backend. The main styling for the layout of each page came from Bootstrap, especially the nav-bar. Bootstrap comes with numerous built-in classes which allowed me to style many of the aspects of my page (ex. input boxes). I did realize that with so much styling coming from Bootstrap, the need for a styles.css was minimal. The main styling that came from me was the color scheme, font, sizing, and placement. This largely came into play with displaying the results of the "Sentencer" and "Recommender." To display the multiple song result of the sentencer, I used jinja for-loops.
Before I get into the backend, I wanted to touch upon the usage of the Spotify API. Originally, I was planning to use the OAuth part of the Spotify API to access user's data. However, I was unsuccessful in implementing that, so I stuck with the client side of the Spotify API. This still proved to work well. Specifically, I used Spotipy, which is a python adaptation of the Spotify API. Spotipy allowed access to Spotify's databases which included the numerous attributes that came with each song such as danceability, loudness, tempo, key, etc. This info, accessible through numerous queries and indexing, allowed for the creation of the Recommender and Sentencer.
Now, the backend. The main idea with our backend design was the build off the foundation of our frontend. For each endpoint, I had a “GET” request and "POST" request. The "GET" request was used whenever a page was fetched, and I used a “POST” request whenever a form was submitted on the specified page. Under the "POST" requests, I used request.form.get a lot in order to get information from the frontend. With this user input, I parsed through the Spotify database. I used a "helpers.py" file to provide a seperate space to create the functions that parsed the Spotify database. In addition to parsing the Spotify data, I also used a small "algorithm" to recommend songs. I took in the artibutes of the inputted song, then used a sensitivity variable to set how close in attributes the recommended songs should be. Though testing, I found .25 to be an acceptable specificity. At a specificity of .25, there was an optimal number recommended songs left for most songs that I tested.