Jake Jams 
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/
Develop a site with ReactJs that allows users to navigate between albums and plays songs.
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
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.
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.