Prolouge: Capstone 1
Project Title: Discover M(you)sic
Elevator Pitch: Discover M(you)sic is a web based application designed to help users discover new genres of music based on their unique personality traits.
Description: Discover M(you)sic is a website with the premise of giving users music recommendations based on their personality traits (Openness, Conscientiousness, Extraversion, Agreeableness, Neuroticism). Users are given a personality quiz upon signing up for the website. Once the user’s personality has been determined they are recommended music genres that they might enjoy. The hope is to help people discover music, especially music outside their comfort zone, in a personalized way. The target audience is broad as it will really be a tool for anyone who is looking to discover music that they are unfamiliar with. The project will be built using the Spotify API and will take into account many aspects about each user to provide the most personalized experience as possible.
Prototyped Hero Shot:
Development Schedule UPDATE THIS BEFORE EXPO:
Winter Break: Psychology and Data Analysis (weeks 1 – 3)
Above is the initial data set that I will be using in order to create the algorithm. The different correlations will determine the weight of that genre when giving recommendations to each user. User recommendations will be based on the users affinity with each genre calculated using the correlations seen above. For more information on what sort of work I have done for data research see my idea validation document. This document also shows my interview with my psychology mentor and as discussed in that interview I will be looking into the NEO-PI-3 personality quiz to build my own quiz that will use similar strategies in order to get accurate readings on each users personality.
Building the Website (weeks 4 & 5)
For the first two weeks of this class I built a static version of the website in React. This means the layout of basic components has been completed but there is no interactivity quite yet. To see more about static React projects see this article titled Thinking in React. One complication that I didn’t consider at the start of the week was the fact that React doesn’t allow for multi-page applications unless a library is used. So I had to learn how to use BrowserRouter in order to accomplish the routing to the various pages of the site. I used this video to learn about BrowserRouter and how to use it. Below I will include a gallery of images that depict the progress of the website so far. In its current state there is not a lot of styling and there is no interaction. The last thing I did this week was set up the Github repo for this project which can be found here.
During the week of 1/27 I started work with the Spotify API and as I suspected setting up the authorization for Spotify accounts was a pain in the butt. By the end of the week I was able to get the authorization aspect working by looking at this repo, which is written by a developer at Spotify. The authorization flow is a bit confusing however I think I will only need to use the “authorization code” which seems to give access to everything I’ll need. Unfortunately I didn’t get to program any functionality with my app thanks to the authorization taking so long. Luckily I had an extra week built into my capstone schedule in case I ran into any problems like this. So over the next week (2/2 – 2/7) I will be continuing to work on the Spotify API and hopefully I will be able to start on the psychology quiz by the end of the week. Below I will include a few screenshots of the app authorizing with Spotify. By looking at the url you can see that it goes from localhost:3000/ => localhost:8888/ => localhost:3000/#accesstoken which means that the app is successfully authorizing. However when it comes to the functionality I’m having some difficulties. If I can’t figure it out I will ask my mentor about it, as I will be in contact with him this week for the mentor check in any way.
Breaking news: I am not skilled enough to use the Spotify API yet. However… (week 6 goals)
There is an alternative! After quite a bit of prototyping and failing with the Spotify API I decided that at this point in my software development career it wasn’t worth forcing something this advanced yet. So here is the new plan. Starting this week I will be implementing a usage of both the Last.FM API ,which I have previous experience with, and the Youtube API, which is much simpler than the Spotify API. I will use this create a very similar usage to what I planed to do with the Spotify API. The goals of the website do not change here only the technologies I’m using. In the end the Spotify API ended up being a bit overkill, my program doesn’t really need to know anything about the users profile in order to create personality based playlists, it only needs the results from the quiz itself. And creating a profile based website is some fairly advanced stuff that I’m not quite ready to take on all on my own. This is why I have also decided to cut out the profile and data pages and will instead focus this as more of a profile-less quiz game that results in a curated playlist that pulls results from the Last.FM API and transfers it into a playlist of videos on the Youtube API. I may also try to store the history of users quiz results in the cache so I can still get some practice with profile type work and so users will be able to return to playlists they liked. This will also allow me to have a larger pool of quiz questions that I could randomly give users each time they open the quiz. This feature will hopefully make users take the quiz many times to see what kind of results they can get from the different combinations of questions. The user will still be allowed to rate the music in the playlist which will in turn complete the goal of project. This technology downgrade will also be nice because it will allow me more time to design the page itself, which is another skill besides coding that I have gained in TAM and would like to show off. While I’m a little upset that I wasn’t able to figure out the Spotify API I’m glad I realized it wasn’t realistic for me to use yet. I feel like I’ve learned an important skill in stressing out about this API for so long and it’s that sometimes it’s ok to step back from a prototype and consider a different direction. I believe that this new direction will allow me to display more of the skills I’ve gathered during my time with the TAM program and it will overall allow me to produce a better experience overall which is more important to me than how advanced my code-base is. I’m just too inexperience with React to apply such a complicated authorization system when I’m already challenging myself with using React libraries with the implimentation of the useState library and the BrowserRouter library on top of API usage. Luckily I have a nice commit on GitHub to start on which is my first usage of the versioning aspect of GitHub. It’s nice to get some experience with rolling back changes and trying something else. Luckily I can also fit this change into my schedule as the algorithm will be much simpler when not needing to worry about updating peoples profile and statistics. Another benefit of this change is I can host the website on creative.colorado.edu as neither the Youtube API nor the Last.FM API use OAuth which will save me a ton of time.
Below I have included an updated version of my Capstone Schedule.
Last.FM API now implemented! (week 7 goals)
This week I had planned to have both the Last.FM API and the Youtube API implemented however I ended up falling ill for the later half of the week and ended up getting only the Last.FM API up and running. Here is a screenshot of the progress so far.
As you can see, the middle column is now being populated with data from the Last.FM API, pulling from a variety of genres. Currently it is just showing the top 5 songs from each genre however this will change once I start to implement the quiz. This week we also have our mentor reviews due, unfortunately neither of my mentors were available until this week so I haven’t been able to create the write up for those yet. The things I would like to talk to my mentors about is first off how my progress is going, but more specifically I would like to find out how to make my API calls more efficient as currently I am making 15 API calls when in reality I only need to be making 3 and it’s noticeably slowing down the speed of my site. I’m going to need to make an API call for each genre which is where the 3 calls come in however the current set up is making an API request on each row of the table even though the data is redundant. The next thing I’d like to find out is how to effectively hide my API key in React as currently I can’t push to GitHub due to my API Key being hard coded into my React script. After I make those changes and create the write ups for my mentor reviews I will start work on implementing the Youtube API which I’ve heard is pretty simple. If the YouTube API implementation comes together quickly I would like to start working on the personality quiz so that I can dive into fleshing out the algorithm next week. However my main goal for week 7 is to get the Youtube API properly searching for and embedding the music videos for each song into the web page as well as allowing users to export their playlist to YouTube itself.
Personality Quiz Research (week 8 goals)
This week I was feeling pretty burnt out on programming so I spent some time working on the personality quiz. Originally I had wanted to use questions taken from the Neo Pi 3 which is the most trusted personality quiz to date for testing the Big Five personality traits. However, the pricing for accessing the quiz can cost upwards of 450 dollars which is a lot more than I’m willing to spend on this project. After doing a bit of research I was able to find the International Personality Item Pool which is an open source personality question resource that includes questions from an earlier version of the Neo Pi 3. Here is a link to the spreadsheet I created with those questions. The next step for this portion of the project is to get it looked over by my psychology mentor then implement it into a personality quiz on the website. My plan is to have the quiz select five random questions from this pool of about 290 questions and then make API requests to Last.FM based on the results of the quiz. Over the next week I’m going to be adding some css elements and editing the structure of the site a bit.
A bit less ugly (week 9 goals)
This week I finally got around to starting some css work as well as restructuring the website a bit to fit my future plans, however it’ll probably still require a bit of tweaking. I’ve realized that using a table is probably not necessary and I may do away with it all together, however I still have a simplified version of the table on the page now while I test some stuff. Next week we are supposed to be at 90% completion and at this point I now have the architecture in place to implement the rest of the core features of the site, those 3 features being the quiz, the Youtube api embedding the songs into the web page, and possibly a button that exports the playlist into a Youtube playlist. The only problem is that this may require OAuth which isn’t an option for our school network, so I may need to get creative. But for now this is what the website is looking like right now. I decided to not stylize the table too much at this point as I’m not completely sure that a table is going to be my best option.
Week 10 Goals
This week we were supposed to have our project 90% done, unfortunately my project isn’t quite up to that point yet. I have had numerous set backs this semester due to issues in my personal life as well as health issues that continue to arise and I have been hitting many road blocks during development as a result. However, I’m definitely not at a point where I’m not going to be able to complete my project. I will most definitely have to do some work on the project over spring break but the work I have left is still quite manageable. To touch on what I did get done this week, I got a lot of progress done on setting up the Youtube API with my app. I spent a lot of time trying and failing to get the API to work in React however after doing a bit of research I found a library that makes the Youtube API much easier to use. In addition I also added some place holder videos to the project just so I can start visualizing it. Below I have added a screen shot of what the website is looking like. The things I plan on getting done this week is finalizing the Youtube API’s functionality and adding the quiz element which will be my 90% mark. The last 10% will be stylizing and making the code more efficient which I will consult my mentors on over the course of spring break.
Damian Howard TAM Blog 