Project Name:
Favourite Albums: A Collective Music Library
Software & Technologies Used:
-APIs
-Adobe Premiere Pro
-CSS/SASS
-HTML
-JavaScript
-Lumen/Laravel
-Responsive Design
-VS Code
-Vue.js
-phpMyAdmin
Client:
Fanshawe College (Assignment)
Link:
Favourite Albums: A Collective Music LibraryDescription:
An assignment using the Lumen back-end framework, and Vue.js where we display a collection of favourite albums.
This assignment was one of our last ones for the coding courses in Fanshawe College, where we had to use the Lumen framework and combine it with Vue.js to pull data from a database, then display it. Another requirement was to make a second API call to display more information somehow. Other than that, the idea was open!
Based on a previous assignment where I had to take charge and take the reins, I promise my partner Sophia that she could control the content of this assignment to be fair to her. For this assignment, she chose to go with her favourite albums, which I thought was neat! I only asked her to include one of my favourite albums within the project and she agreed without hesitation. Of the 10 albums selected, 9 were hers, and 1 was mine.
For the second API call requirement, normally the professor wanted us to connect to an external API and pull information from that. However, I felt confident with using Lumen and calling upon and displaying information from it, so I asked the professor if I could make a second route instead and used that to display the track listings, and he agreed. The sole reason why he wanted the external API call was because students struggle commonly with the back-end/Lumen so if I could get it to work, I had the consent.
And lo and behold, I got it to work in almost no time at all. Around 20ish minutes, tops, and that was mostly testing and confirming that the information was accurate and displaying accurately. It would be a little weird if Deftones had Thunderstruck as one of its songs. Or maybe not, since covers are a thing!
Sophia also took the reins in terms of styling the website, and as always, she did a fantastic job with it too!
Thumbnail
The initial display, where visitors are greeted with the first album in the list. They can click the arrows to scroll through the selection of albums.
When the user finds an album they like, they can click on it and it'll display details of the album.
If the user wants, they can request the full track selection of the album, which is accessed by a second AJAX call to the Lumen API!
Thumbnail
Thumbnail
Thumbnail