As part of the Foundation Frontend Web Development portion of Bloc’s Software Developer Track, we were tasked to develop an application that works similar to Spotify.
Users must be able to do the following:
- Play songs, to include adjusting volume, seeking, and autoplay next song
- Rank albums and favorite songs
- Login and maintain user information
- Search for songs, albums, and artists
A note on route configuration
We opted to use AngularUI Router in lieu of the built in AngularJS routing system due to it’s flexibility and additional features. With UI-Router, an application can be in different states that determine what to display when a user navigates to a specific route. UI-Router will take care of replacing the contents of
In order to play songs from an album effectively and without interruption, we created a player bar that is included on the
search templates. The songs can be selected and played from the
album. We serve the data for the album via the
Fixtures.js service and manage the state of the song player via
We manage the seek and volume bars via the
seek-bar.js directive. We can customize the seek bars via passing attributes within the HTML:
We utilize the Buzz library function to autoplay the next song:
Rank albums and favorite songs
To rate the albums, we added rank key value pairs to the album object in the
Fixtures.js service and then dynamically generate the rating of the album via
For each song, we added a similar rank key value pair, but we only generated one star:
Login and maintain user information
user.html template, we allow the user to create a username, provide an email, and set their favorite band. We store that information in an object maintained in the
Per the requirements, we were not required to hansh and store any password for this application.
Search for songs, albums, and artists
Instead of searching for album, song, or artist individually, we opted to provide the user the opportunity to provide one search string and return the results for any result that matched the string:
Users are able to login, find their songs of choice, and jam out.
While there may be more powerful online music stores, AngularJS, combined with the AngularUI router, provides a powerful framework to create dynamic, Single Page Applications.