A React-based setlist tracking and audio playing application with taper recordings of the band Phish
View live site here
git clone https://github.com/jarushford/plenty-of-phish.git
cd plenty-of-phish
npm install
npm start
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.
- 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
- 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
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
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
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
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
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
- Jamie Rushford @jarushford
- Loryn Mason @lorynmason
- Joel Smith @JoelSmith123
- Eric Fitzsimons @ericfitzsimons451
https://gist.github.com/jarushford/11d72227838f5cdcf2e630d33f8d9e0b