Musically: My First Basic Rails Web Application
At the end of each module at Flatiron School, we are asked to complete a partnered project utilizing the new skills we have learned in that module. Module 2 jumped straight into Ruby on Rails—my first time dealing with the web framework. After completing my undergraduate thesis last year on the Function of Jazz in the Civil Rights Movement (https://digitalcommons.bard.edu/senproj_s2019/236/), I felt compelled to suggest we create a music application.
Musically is a simple website where a user can create/delete/edit their account, create/delete songs and playlists in the database complete with Youtube links to the music, and “like” a song. A user’s playlists are displayed on their user profile page, and user’s can see all of the songs in the database on the song’s page.
The idea mixes a social media element into the standard music application through the “likes” feature. A user’s most “liked” song’s music video appears full screen and embedded on the page, ready to be played! For myself, this song is “Started From The Bottom” by Drake.
Beginning this project was especially intimidating. Not only was it my first time creating a Rails web application, but it was also my first time truly taking the time to sit down with CSS styling. My partner and I had a vision for the site which required allowing a user to simply upload any Youtube video with a link. Afterwards, the song would have it’s own show page and be in the database and available to add to a playlist. Figuring out how to dynamically embed a video took quite a bit of trouble shooting, but the final product looks like so:
A user can now click on the video and it will play in their browser on the page! I did this by creating a helper method in my “Songs” model that would separate the unique identifier code at the end of each song’s Youtube URL attribute:
And then implementing this helper method in the Youtube embed code from their website, so that a user can easily provide a link to any Youtube video.
Figuring out the routing, model relationships, and what information should be available to a user on each page took some brainstorming, but I believe the end product was a success!
