Rapper Radio

Chance the Rapper’s team approached me about working with them on a project called Rapper Radio (rapperradio.com). Rapper Radio is a project from Chance with one goal in mind: Help independent artists gain exposure on both the radio and on digital platforms. This was a future goal, but they wanted to make sure the platform was prepared.

From Chance and his team:

Rapper Radio gives you the ability to be seen, heard, and known. With an original iteration that was strictly built for radio, Chance’s “No Problem” went number one with the help of the platform. Now, Rapper Radio serves as a multi-faceted platform where people can request their favorite songs to be heard on playlists and radio stations.

The Problem + History

The very first version of Rapper Radio was built in-house by Chance’s team and partners at Nice Work. SquareSpace was the tool of choice to launch version 1 of Rapper Radio. “No Problem” went number one with the help of the platform, and DJ Khalid and Justin Bieber were also featured on the platform. The product was validated. There was immediate talk of how to make the platform more robust.

Chance’s team had grand designs for the initial launch, so not only was it successful as a platform, but it also looked great and was easy to navigate. But, the long-term goal of the platform was not only to gain exposure for his music. The team also wanted to help other independent artists and give them a path to be discovered.

As Chance began work on his new album (“The Big Day” 2019), the Nice Work team began working on rebuilding Rapper Radio. The goal was to make it easy to add artists, songs, radio stations, playlists (and the people maintaining them), and platforms. There was a lot of data to work with, which made getting great page load times a challenge.

I initially began working with my good friend Matt Varughese and the Nice Work team when they had some killer designs, but they weren’t sure if their animation and out-of-the-box thinking could be represented well on the web. The designs were for chanceraps.com. I quickly put together a demo showing how the team’s design and concept could work and look. That direction was eventually adopted. That was when Matt and the group approached me about working on Rapper Radio.

There was already a second version in testing built on Firebase. Once again, the team’s design and work were outstanding. However, with a large amount of data, there was an issue with performance. The load times for the site were north of 8 seconds. Additionally, the Nice Work team wanted to ensure it would be easy to add new artists, playlists, providers, and radio stations.

The team wanted to improve performance, improve ease of use, and launch the platform in a short time frame.

The Solution

As soon as I saw the existing version of the site, I immediately sat down and began mapping out the data. The data set was extensive, and I wanted to make sure I had a good understanding of what was there and how it would relate. After sketching it out, I was able to see that we could build this with no-code tools.

With time running short, we made Webflow the platform of choice for two reasons. First, we knew that data structure could work well and we would be guaranteed great performance despite the large number of data points. Second, as I stated before, a big selling point for the team was getting a platform that made editing and adding content easy. Nothing is better at this than Webflow. Taking the original designs and rebuilding them was the most natural part, then it was finding a way to make sure that the page where all the artist information was being displayed would pull all the correct data and that it was easy to update. With that in mind, the requirements for the project were:

Autofocus an input that filter cities where the users may live or want to request a track
Each city may have multiple radio stations
Clicking on a radio station’s name would auto compose a tweet with
- The radio station’s Twitter handle
- The artist’s Twitter handle
- The name of the song
- A link to the URL of the song page in Rapper Radio
Tabs would display digital platforms like:
- Spotify
- Apple Music
- Amazon Music
- Tidal
- Pandora
Clicking on a service provider would show playlists where you can submit requests
The playlists shown can be specific to each song and service provider
When clicking on a playlist name, there is an auto-composed tweet with
- The service provider’s Twitter handle
- The Twitter handle or a hashtag for whoever is curating the playlist
- The name of the song
- A link to the URL of the song page in Rapper Radio
Display the album artwork for the current song
Display an avatar for the current artist
Display a SoundCloud embed of the current track for the user to preview
Display all the relevant social links for the current artist
Display a dropdown menu to see all other tracks available from the current artist
Each time a user shares a track on social media, a count is added to that track in Webflow
We will use the number of shares to rank the tracks in a list on the site

The CMS database setup was crucial to this build and was central to every piece of how the new version of the platform would work and function. There are eight total Collections, or CMS tables, with this site.

Cities & Stations (Each city can have up to 8 stations with their names and Twitter handles)
Songs
- This record has multi-reference fields for each digital service provider
- Reference to the artist
Artists
Spotify Playlists
Apple Music Playlists
Tidal Playlists
Amazon Music Playlists
Pandora Playlists

This setup allowed me to list all of the songs, but use Webflow’s filters only to show the songs by the current artist. There was a real challenge with Webflow and the Cities and Stations data. We had over 300 cities listed, but Webflow only allows you to display 100 collection items in a list. If you need additional data, you would need to use pagination to access it. I wanted to be able to filter all 300+ cities at once, so I wrote some custom JavaScript to overcome this hurdle.

Pulling the album artwork was smooth, and using dynamic embeds from Webflow made adding in the SoundCloud embeds just as simple. The next challenge came in the form of the auto-composed tweets. To make this work, I broke out the JavaScript one more time. This time, I was able to combine the dynamic embed features with some previously used social-sharing code I had written. Adding in this power meant that the team at Nice Work wouldn’t need a developer to make changes, add artists, or modify any other data on the site.

The power of Webflow had now supercharged the power of the platform. I also used some JavaScript to add numbers to the song rankings and for a couple of other small features and functions. The one other massive piece was adding a count to the Webflow song collection every time a user clicked on one of the share buttons. Upvoting and counting on submission with no-code is possible; in fact, I’ve done this myself and documented it.

But, the team had been working with an incredible developer in Abi Noda who had created a small custom app to keep count and sync with the Webflow Collection. Taking this approach would ensure that the site wouldn’t run into any issues with the Webflow API rate-limit during high-traffic periods.

The Results

The result of this project was a pleased Chance the Rapper, a happy Nice Work team, and a new platform with increased performance. Compared to the Firebase version of the site, the Webflow version of the site loaded around 7 seconds quicker. The Nice Work team can easily update the platform data, and we were on track to add future functionality with other no-code tools.

You can see images of the project below, and you can see the live project here: rapperradio.com

No items found.