Edna Hayes

Full-Stack Web Developer

Escucha Jams Case Study | Portfolio

Escucha Jams Case Study

Summary

Individuals are always wanting to have the best for less. They want the best experience without the hassles. Escucha Jams is a digital music player that was created in response to that need, to listen to the music you want, instead of listening to someone else’s music choice.

Escucha Jams is an application that you can use to play, pause, skip a song, play the previous song, change the volume using Javascript, JQuery, CSS, HTML,GIT and Atom Editor, eventually we refractored our code using Angular.

Explanation

Escucha Jams was my first project as part of my learning while becoming a Web Developer. With the help of my mentor Kevin McGillivray, Escucha Jams was started.

As you can see on the picture below, the vibrant colors of the page are very inviting and lifts your mood. This was just the beginning of a beautiful webpage.

Escucha Jams

Problem

In the process of building Escucha Jams, I encountered issues as any student would, trying to get things to work, while not messing the ones that were already working, was always a stressful task. But Always trying to pay attention to detail, since just a simple dot (“.”) would make the page not work. The old proverb, “the devil is in the details” is true.

As users are exposed to more sites they become more demanding, expecting the webpages they visit to be 100% user-friendly, therefore, Escucha Jams still has a few issues that needs to be worked on for example the navigation bar needs to be able to select the navigation pages (landing, collection, and album).

Some of the needs of the users, when we are talking about a digital music player, were to be able to perform the following tasks:

-Skip songs

-Play songs

-Pause songs

-Change the volume of the song

-Mute the song

-To be mobile enabled

-Ad-free

-To be able to choose your own music

Solution

The first page of Escucha Jams, gives an answer to the needs of the users. It tells you what the music player is about, you choose your music, you get Unlimited, streaming, ad-free music, and is mobile enabled, therefore meeting some of the needs previously mentioned.

Escucha Jams

As you go to the navigation bar located at the top right hand-side of the page, called “COLLECTION”, once it’s clicked, it will take you to the collection page where you can select an album to be played.

Collection

Once the album opens, you can view all the songs that pertain to that album, the songs are numbered and you can click to play the song, and pause directly from each song, or you can navigate to the bottom of the page to the player bar where you can pause, play, skip forward, skip backwards, view the length time of the song that is currently playing, as well as to be able to change the volume.

Album

The completion of Escucha Jams was very rewarding, please take a look at it for your-self.

Escucha Jams App

Escucha Jams Git Hub

Escucha Jams refractored in AngularJS Git Hub