https://www.biffyclyro.com/fantasysetlist

Looking for a way to build excitement around Biffy Clyro’s headline set at Reading & Leeds, Chloe Dunford suggested an app that allows fans to create their own fantasy setlists.

I started with the basic form to create a setlist. Our intern Jiaxin Haung put together a list of all Biffy Clyro’s recorded songs. I used this method to create a search filter, allowing fans to easily find the song they’re looking for, rather than scrolling through the very long list.

The JQuery UI extension allowed me to make the list of selected songs draggable so that fans can change the order of their selection. I also included the jQuery UI Touch Punch which easily made the dragging functionality work on mobile devices.

I wrote a lot of custom CSS and jQuery functions to manage the functionality of adding and removing songs from the list as well as submitting the final form.

All the setlists are stored in a mySQL database, so I could use that data to combine them into one ultimate fantasy setlist. After numerous discussions on the best way to do that, I eventually settled on finding the 20 most added songs and arranging them in an order based on the average position on all the fantasy setlists.

One of the challenges I had to deal with was running the app on Biffy’s site, powered by .NET, while my code was all PHP, mySQL and JavaScript. I could only run client-side scripts on Biffy’s site so I needed a JavaScript sollution. The result was a combination of JSONP feeds created with php from the mySQL data. Essentially I built my own REST API to run the campaign.

The campaign launched on the Wednesday evening before Reading & Leeds to a great response from fans. We had more than 1,000 setlists created overnight and the campaign fueled conversations and debate about the best songs and albums.