Building Africa’s One of the Largest Music Streaming Service

This article first appeared on CitrusLeaf Software.

01 Challenge

Sange Music is a music streaming service based out of Ghana. With Sange Music, you get the largest collection of Ghana music in your pocket in the form of an app. It also allows you to upload your own music and share it with everyone for free. CitrusLeaf was selected to build the whole platform from scratch using Flutter, Laravel/PHP and VueJS. It offers a bouquet of apps for Android, iOS and the Web.

Project Scope

Mobile Application, Web Application, Backend systems, UX/UI Design

02 Solution

Because the application was required to run on both iOS and Android based devices, we decided to go with Flutter — The Cross-platform App Development Framework. With Flutter, we achieved amazing design to development speeds and the designers were able to directly work with the developers to quickly iterate the design based on the Client’s feedback.

The mobile app also has the ability to download music for offline listening. The challenge was to store the tracks in an encrypted format. For this we used native iOS and Android file encryption techniques.

For the backend, we decided to go with Laravel, Strapi, PostgreSQL, Redis and Minio. We’ve worked with this stack for more than 25 projects and we’ve always been able to deliver them in record times. We decided to go with Strapi headless CMS for faster API creation. The other tasks in the backend were to implement the algorithms and to make it as scalable as possible. Strapi helped us reduce the basic development time and focus more on complex algorithms. To achieve scalability, we decided to go with distributed architecture, wherein each service was hosted on a different server. Every component is hosted on DigitalOcean. We essentially created a headless backend and exposed REST APIs to be consumed by mobile apps, the website and the admin panel.

We’d like to bring more light to Redis here because we believe that it’s an amazing piece of technology. We essentially use Redis to store the output of the algorithms so that we do not have to run them every time the user opens the app. This has a profound impact on the database queries. We also use it as a secondary index for many complex PostgreSQL queries.

The backend also has an analytics pipeline and data engine which ingest analytics from web and mobile apps in real-time. The data is then given different algorithms like trending tracks, search etc to enhance the user experience with personalized recommendations.

For the web-based application, we used VueJS and the NuxtJS framework. Nuxt has been a boon to VueJS developers. It’s amazingly fluid and has all the required components like server-side rendering, file-based routing, state management using VueX etc. Since the website has social sharing and it was required to be crawled by search engines for SEO purposes, we built a server-side rendered web-app, which gives best of both worlds- server-side rendering and SPA-like feel to the user.

Technologies used

Flutter, NuxtJS, Strapi, Laravel, VueJS, Reddis, PostgreSql

03 Effect

Since the app was user facing, we decided to ensure that the UI/UX of the application remained consistent across the platforms and extremely usable while retaining the design aesthetics of a typical entertainment app.

Since launch, the app has seen amazing response from it’s target audience and has been growing steadily. Because of scalable design of the systems, it can grow without the need of special maintenance.