Play it Forward Music

Play it Forward is a 501(c)(3) non-profit organization with the mission of empowering musicians and fans to make the world a better place. Through their online platform, musicians can publish their music and raise money for the causes that are important to them.

Their web platform is a full-featured application with file uploads, payment flows, admin management, and more, with thousands of users uploading music and making donations.

What they needed

Play it Forward already had a site that was built in 2015, but it was starting to show its age both in design and performance. It was impossible to make much-needed security and feature updates due to a lack of developers familiar with the aging technology, and their feature backlog was growing longer and longer.

To make things more challenging, the original developer was no longer involved, and Play it Forward had lost access to their hosting server, meaning there was no way to update the website or fix issues.

Through a consulting call, we identified the following key objectives:

1. Recover and secure the existing site.
2. Implement a short list of emergency features on the old site.
3. Build a new site using modern web technologies and implement many new features (see below!)

What we did

Server recovery

First, we recovered access to their server. The original SSH key was long gone, but they granted us access to their AWS project and we were able to move the site to a new server while preserving all site and log data. Importantly, we did the recovery with no downtime or service interruption to the old site!

After recovering the server, Play it Forward’s designer put together some great designs for us, and we set to work building out the new site. Below are a few of the highlights:

Responsive design

Many of Play it Forward’s users visit the site from a mobile device, so a responsive design was an important feature for the new site. We built the new site to look great on any screen size.

Responsiveness was implemented using built-in browser features like media queries and flexbox for wide support and high performance on all devices and browsers.

Blog with CMS

Another pain point of the old site was the need to bring in a developer for small copy updates or to manually administer a fundraiser. To address this, we built out a ton of fundraiser and user management features, as well as an integration with Prismic CMS so that many changes could be made without a code update.

A great example of this is their blog page. SEO is a key part of Play it Forward’s marketing strategy, and integrating the blog with a CMS allowed editing, adding, and removing articles without needing to loop in a developer.

Music player

On Play it Forward, musicians share their music in exchange for donations from fans. After donating, fans can download the music to their computers. This worked great in 2015 when the old site was built, but feels old-fashioned in the age of streaming. We built out a complete streaming solution that allows logged-in users to play music from any fundraisers they’ve made donations to, without needing to download the music files or set up an offline player.

On mobile, streaming is even cooler! We integrated directly with the OS via the Media Session API. This allows playing music from the website in the background while the user navigates to other pages, or even different apps! Users can even Airplay to another device.

We also developed a custom SharedWorker to share the audio player across tabs, so the user doesn’t accidentally start playing multiple audio streams at the same time.

Ongoing work

I’m still involved with this project on an ongoing basis, and very proud of the work we’ve done so far. There are a lot of cool fundraisers and important causes being supported, and I hope you’ll check out the site.

If you like the work we did here, consider contacting us about your next project.