content-image

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

content-image

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.

content-image

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 development using nuxtjs for frontend development strapi development laravel development ios app development android app development using vuejs for forntend development using redis for caching using postgresql database
content-image

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.

using vuejs for forntend development

Cross Platform

Developed for Android, iOS and Web

using vuejs for forntend development

4.8 out of 5

Average rating on all platforms

using vuejs for forntend development

2000+

Downloads in 2 months

We want to keep working with CitrusLeaf Software as much as we can. It’s incredible how they’re always on time and meet every deadline we set. They’re highly professional and work diligently to ensure they do everything the way we like, even if we change the requirements during development. They’re very professional.

using vuejs for forntend development
Stephen S., Product Owner, Sange Music

Have an idea? Develop it with us