Plenty of Phish

A React-based setlist tracking and audio playing application with taper recordings of the band Phish

View live site here

Install/Setup Instructions

git clone https://github.com/jarushford/plenty-of-phish.git

cd plenty-of-phish

npm install 

npm start

Abstract

For this project we worked in a group to make an application in React. This project was an opportunity to reinforce and solidify our Javascript fundamentals, Object Oriented Programming principles, work with large datasets, and develep sound group workflow practices. It was also an opportunity to solve problems; after all, software, at its core, is about solving problems. Our application solves the problem of the diminishing presence of the tape-trading community. The taping culture within the jam-band scene was at one point incredibly prevalent and played a huge part in why that community is the way it is today. While it has not completely gone away, monetized soundboard recording websites, and others audio providers like Spotify have changed the way the community interacts with music and technology. It's not like websites or apps haven't made taped shows freely accessible on the internet, but many of these sites are either poorly designed or have UX/UI that is lacking. Our goal was to create an application that acts as a concert/information database that includes audio, all in the spirit of how crowd-sourced music exchange once was, though still easy and pleasant to interact with. Eventually this application could be expanded to include other bands, but by starting with Phish shows from 2017, we still had a solid dataset from which to begin.

Technologies Used for this project

The fetch API for sending/receiving our data
ReactJS for organizing our application into components
JSX for writing our component templates
Sass for keeping our CSS DRY

Project Goals

Synthesize knowledge of OOP, classes, and JS fundamentals to create an application using React
Construct complex dataset to be used to implement array mutator and iterator methods to work with data
Collaborate and create (and iterate) on user stories
Demonstrate good GitHub collaboration and workflow within a large group

User Stories

Page Load

As a user,
  In order to have a unique and engaging experience,
  When I navigate to the page,
  Then I should see a selection of randomly selected shows

Searching

As a user,
  In order to locate content that I'm interested in,
  
  When I search for a Song,
  Then I should see all of the shows at which that song was played.
    
  When I search for a Venue,
  Then I should see all of the shows that were played at that venue, if there are any
  
  When I search for a Date,
  Then I should see the show that was played on that date, if there is one

Viewing a Show

As a user,
  In order to see more details on a show,
  When I click on the show card,
  Then I should see an expanded view which shows all of the songs for that show
  
  In order to view a different show,
  When I click out of an expanded show,
  Then I should see the previous selection of shows again

Playing a Song

As a user,
  In order to listen to recordings of songs,
  When I click play on a song,
  Then I should hear that song play,
    and I should be able to navigate away from that page and still hear that song
  
  In order to see that songs are playing,
  When I click play on a song,
  Then I should see that the song is playing,
    and I should be able to pause/play the song

Sorting Buttons

As a user,
  In order to view shows in a way that makes sense,
  When I click on 'View All',
  Then I should see all shows in chronological order
  
  In order to explore shows,
  When I click on 'Random',
  Then I should see a new selection of random shows