Jake Jams [2018]

Description

Who doesn't like listening to music?! Jake Jams is a fully responsive website built with ReactJS for streaming music. It allows users to browse a music collection, navigate to an album and play a specific song. It was designed using Sketch.

Live app: https://jams-music-app.herokuapp.com/
Github: https://github.com/jlaurenti12/bloc-jams-react

Goal

Develop a site with ReactJs that allows users to navigate between albums and plays songs.

User Stories

1. As a listener, I want to know the name and purpose of this site so that I can decide whether I want to continue interacting with it

2. As a listener, I want to see a list of albums so that I can choose one that appeals to me

3. As a listener, I want to see basic information about the album so that I can decide whether I'm interested

4. As a listener, I want to see the songs on the album and be able to play/pause songs by clicking on them so that I can change tracks easily

5. As a listener, I want to have a set of standard music controls so that I have complete control over my listening experience

Development

This was my first app developed with ReactJS. I had to shift the way I thought about organizing my code compared with AngularJS and Ruby but this ended being an interesting way to include JavaScript in the UI with JSX. It left me excited to continue learning and I'm currently building a new app in React.

I started by using create-react-app and then installed React Router to create a single page application, which includes user interfaces with multiple pages, but instead of loading a new HTML document when a user visits a new page, the HTML document is loaded once when the user initially visits the site. Subsequent transitions between pages are handled via client-side JavaScript (React Router in this case).

I structured the app and created the paths, components, and navigation links for 'Landing', 'Library' and 'Album'. Starting with the Library view, I focused on getting the album data to display (image, album title, and artist name).

 

A component's state is data on the component that's designed to be dynamic and changeable throughout the lifetime of the component. Whereas props are passed down from the parent, state is defined and controlled from within the component itself. Instead of grabbing this data from requests to an API, I added an albumData file with an array of objects, that each define properties of a specific album, including a sub-array of song object. After setting the state to the album data, I used the .map method to convert the raw array data into an array of JSX elements that React can render. Finally, I linked the album information to that album view.

On the album view, I easily accessed the album data with this.state.album. I used the album properties and displayed those at the top of the page and then created a table to map out the song list. For audio playback, I used the HTML audio element. 

The last part of the development phase was to create a player bar component and import it into the album component. Through the album component, I was able to pass the currently playing song and that song information player bar renders that information. I used functions to handle clicking to the next and previous songs, volume change and time change.

Design

The last step was to fill out the content on 'Landing' style the app according to the designs I created in sketch. I didn't use any libraries for this step but just included css and svgs to incorporate my designs.  I iterated a few times on color scheme and font, but landed on purple and teal. The contrast of these colors allow users to easily read text across the site. In addition, I worked with media queries to make the entire site responsive.

Challenges and Next Steps

The biggest challenge I faced developing with ReactJS was understanding the concept of state and props and the one-way flow of data. My goal for refactoring this app is to allow the player bar to exist on both the Library and Album view so that users can browse albums while a song is playing.