How we built it: Paystack Music

When we're not building payments infrastructure for Africa, you'll find us listening to and sharing a lot of music with each other.

And because we come from a diverse range of backgrounds, the music we share spans a wide variety of genres, moods, time periods — even languages. The Slack channel where these tracks are shared is a treasure chest of great finds.

Many months ago, Kachi built a Slack bot that automatically creates a recurring Spotify playlist of all the music we shared with each other that month. A handful of people outside the company seemed to really enjoy them, so a number of Paystack designers and engineers volunteered to create a custom experience to make it easier for our entire community to rediscover old favourites, and unearth new ones.

The result is Paystack Music, where you can easily listen to monthly mixtapes of the music we share with each other on Slack.

In this article, we share how it all came together, including the design iterations, the tech stack it's built on, the source code for our music bot, and more.

What's Paystack Music?

At Paystack, when we find music we like, we share to a #fun-music channel on Slack for others to enjoy.

At the end of each month, our music bot automatically fetches all the Spotify tracks, creates a mixtape with custom cover art, and publishes it online.

Like the people who co-created them, each playlist is an eclectic mix, so don't be surprised if a grime track is followed by amapiano 😅

Each mixtape is a snapshot of a moment in time, capturing the shared highs and lows of the ~100 friends who make Paystack. Each is a tapestry of many colours, spun by many hands.

Designing Paystack Music

We approach most of our projects design-first. The animating questions include "How do we want you to feel when you explore Paystack Music?" and "What experiences do we want you to have?"

We spent some time answering these questions, checked out various existing curated online music experiences, and went through a number of iterations before arriving at an experience we were all excited about. Here is the list of the sites which inspired our thinking →

Creating a design guideline

Since this isn't a Paystack payment product, we had the freedom to stretch our brand guidelines and bring in new elements, such as pastel gradients. Once we arrived at a sense of feel and aesthetics we were all happy with, we created a design guide for the project:

• Create a clean and airy layout
• Use soft, delightful elements with no sharp edges
• Incorporate minimal typography and lots of white spaces
• Bring in fluid motions and interactions

Inspired by these guidelines, we then created a team task board, split ourselves into micro teams, and kickstarted design explorations and low fidelity prototyping in Figma.

Once each team had a prototype in place, we all compared notes and merged the best ideas from each team.

Paystack Music is simple by design, and there are only four pages:

• The home page which introduces the project
• The Playlist Catalogue from where you choose a playlist
• The Playlist page from where you play the songs on the playlist, see which member of the Paystack team shared each song, and get a sense of the playlist's mood — happy, energetic, or dance-heavy
• The About page where you can learn more about Paystack Music and see everyone who contributed to the project.

Let's dive deeper into each page.

Designing the Playlist Catalogue page

This Catalogue page is where a visitor can browse through the various mixtapes. We were inspired by the experience of browsing physical vinyl records in stores, and you can see that idea come through in the early explorations.

Over time we moved away from bunching the mixtapes together and started experimenting with giving each one more breathing room.

While experimenting with various layouts, we realised that a radial layout allowed us to introduce a navigation element at the bottom of the page that feels like an old-school radio dial.

We also increased the functionality of the page by layering a Spotify Code onto the playlist cover art. Spotify Codes work very similarly to QR codes. You can scan them using the Spotify app on your mobile device, and it instantly opens up the relevant playlist.

Designing the Playlist Page

The early playlist page placed more emphasis on the individual songs and their respective cover art, but this didn't quite work well because we have many dozens of songs per playlist.

While playing with the Spotify API, we also realised that Spotify provides metadata such as how "energetic" or "danceable" songs are. We made this information more visible in the design as a metadata section.

We created custom illustrations for this metadata section. Following our design guidelines, we relied on simple, relatable metaphors - such as a disco ball for danceable music, a battery for energetic music, and balloons for happy music - and implemented them in a soft, chunky style with rounded edges.

Finally, we sought out ways to visually highlight the single most special thing about playlists - that each playlist is curated by several members of the Paystack team.

We designed the page to show who contributed each song in that month's playlist. To implement this, we leveraged the Slack API to show the name, headshot, and bio of each team member who shared a track in the #fun-music channel.

By default, Spotify lets you play 30-second snippets of songs for free, but eager listeners can log into their Spotify account to listen to full tracks.

Building Paystack Music

The Paystack Music Bot is the beating heart of this project.

It's the API that fetches the Spotify URLs from Slack and creates the monthly playlists. We'll be open-sourcing the Music Bot soon, so you can make Slack mixtapes for your own team.

The Music Bot (v1.0)

The very first version of the Paystack Music bot did only one thing — creating monthly Spotify playlists from the songs we share on the #fun-music Slack channel — and it did it well.

The bot was a lightweight Node.js/Express application using LowDB for data storage. Here're all the processes it executed:

1. Fetch music tracks from the #fun-music channel: The bot would read through all the messages on #fun-music using Slack's Conversations History API, filter them and only select messages with a Spotify URL in them.

2. Create a Spotify playlist and add the tracks: Spotify's APIs provide endpoints for creating a playlist and adding tracks to the playlist. The bot would use these endpoints to create and populate a Spotify playlist named after the month when the tracks were shared on #fun-music (e.g "March 2020".)

3. Create a playlist cover image: Spotify creates a default cover image using a collage of the first 4 tracks in the playlist. We wanted to bring some of Paystack's brand to each cover image, so we opted for a simple, single hue design with Paystack's logomark at the top right, and the playlist's name at the bottom right. The background hue for each cover is determined by the most dominant colours that appear on the covers of the first four tracks of each playlist. To create each cover, we:

1. Use Color Thief library to extract the dominant colour in the first four tracks of the playlist
2. Use Puppeteer to generate an HTML page with the Paystack logomark and the playlist name
3. Automatically take a screenshot of the page, and upload it as the new cover image.

4. Send playlist URL to channel: After a playlist is created, the bot would then share a link to the Spotify playlist on #fun-music using another one of Slack's APIs.

We used Zapier (which allows you automate simple, repetitive tasks) to trigger the playlist creation at the beginning of every month. We set it up to send a POST request to our playlist endpoint on the first day of every month at 6 am.

The Music Bot (v2.0)

The v1.0 of the bot worked well within the Slack-Spotify loop. To be able to expose the project to the outside world through Paystack Music, however, we had to make a few changes that would help us:

1. Fetch the list of playlists and details about each playlist.
2. Collect more data about the tracks in each playlist, such as the artists' names.
3. Fetch all the microsite data without calling any external APIs. This helps us optimise for speed and avoid being rate-limited.
4. Store playlist data properly. V1.0 of the bot used LowDB, which worked well because all we had to store were Spotify authentication tokens which are temporary. Once we started storing tracks, artists, playlists and contributors, however, we knew it would quickly fall apart because of the short life span of our web server. We decided to use MongoDB. LowDB is a small JSON local database that would not be suitable for storing all the data we planned to. Mongo allowed us to store larger bits of data and provided a database server which meant we could inspect and query our data easily without having to SSH into our application server.

To make Paystack Music work, we updated our music bot so it can now:

1. Save contributor profiles: The profiles of contributors who share tracks on #fun-music are fetched and stored in the database. In the scenario where more than one person shares a track in a month, they're all added as contributors for the track.
2. Fetch each track's mood: Every song evokes a mood — happy, high-energy, etc. — and we wanted to share a sense of the general mood that the playlist itself gives off. Was the team vibing to Sean Paul-type hyper or Lana Del Rey-type sombreness? Spotify's Audio Features API allows us to fetch these insights.
3. Save playlists/tracks: Metadata for the playlist and tracks are saved in the database so they can be served to the microsite.

How we built the UI

We always try to serve the lightest possible frontend code to users, so we typically limit our dependency on frameworks and libraries.

We built Paystack Music using HTML, CSS and Javascript. We also used two very lightweight libraries — Splitting JS and Dogstudio's Highway — for in-page interactions. Tree shaking and bundling happen via Parcel, and our modified version of Airbnb's base Eslint config helped us harmonise our code.

Generating playlist pages

To optimise browser performance, we generate all HTML pages on the server-side. We built a lightweight NodeJS-based static site generator to help with this. The NodeJS app retrieves playlist information via our custom Paystack Music API and generates static HTML pages for each playlist. We use Shopify's LiquidJS as the templating engine to generate HTML.

One challenge we faced was setting up the correct deployment order. We wanted to generate HTML pages pre-build, so Parcel could run the necessary optimisations behind the scenes. To solve this, we ported the NodeJS app to a Netlify build plugin. This gave us access to Netlify's lifecycle hook. With this, we were able to achieve our ideal flow: Push to Github > Generate Static playlist pages > Run Parcel's Build script > Serve the site to the user.

Iterating on the Player

We originally intended to allow visitors to listen to full tracks in the browser, right on the Playlist page, by using Spotify's Web Playback SDK.

During testing, however, we noticed a few performance inconsistencies across browsers. With our deadline fast approaching, we decided to optimize the user experience to allow visitors listen to 30-second song previews, and direct them to the Spotify or Apple Music app where they'll be able to listen to the full song. We also automatically skip to the next song after the end of each preview, which creates a radio-like listening experience.

The current implementation makes use of the browser's native audio API and triggers song previews on demand.

We intend to revisit this in a later iteration and hopefully figure out an optimal way to allow visitors log into Spotify and listen to full tracks right on the page.

Animations and Page Transitions

We always try to use the simplest tool for the job, and as a result, default to CSS animation for a lot of our animations. Depending on the use case, we sometimes augment these animations with CSS variables, set dynamically with Javascript. We use similar easing functions across all our animations and tweak animation duration accordingly.

Build a Spotify-Slack music bot of your own

We had so much fun leveraging the Slack and Spotify APIs to build this project, and we’ve made the source code public so you can build automatic monthly mixtapes for your team or other exciting projects of your own.

Paystack Music is a gift from our team to yours. We hope you find your next favourite song in these mixtapes, and that these tunes provide good company as you work on your next big thing.

Enjoy! ❤

Get more stories like this

Enter your email to get similar stories about how we build things at Paystack

Subscribe

You can unsubscribe at any time. Learn more about our Privacy Policy

You're awesome ❤️