RANGGAEGHAPERMANA
ID
Back to projects
  • Streaming · Music & Video
  • 2026

Case study · 07 / 08

SoundNusantara

One media experience from discovery to HiFi playback.

SoundNusantara — screenshot

A web and mobile music and video streaming platform with a personal library, synchronized lyrics, playlists, content operations, and a media-processing pipeline.

My role
Full-stack Engineer · Product UI · Media Pipeline
Status
Public repository

Key achievement

Built a music and video streaming platform for web and mobile, from the player to the media-processing pipeline.

View repository Real UI capture · fictional preview data used because the repository has no seeded media library
SoundNusantara — screenshot

01 · Context

The problem this project solves.

Primary users

  • Music and video listeners
  • Content administrators
  • Media operations teams

The problem

Listening experiences are easily fragmented across discovery, playback, lyrics, playlists, and media-file operations.

The approach

SoundNusantara combines discovery, a media player, synchronized lyrics, user preferences, and an admin dashboard with an FFmpeg processing pipeline.

Key numbers

  • 3surfaces: web, mobile, admin
  • HiFilossless audio support
  • FFmpegmedia pipeline

02 · My role

What I worked on.

Full-stack Engineer · Product UI · Media Pipeline

Technology used

  • React 19
  • TypeScript
  • Laravel 12
  • Flutter
  • FFmpeg
  • MySQL
  • Zustand
  • Vite
  1. 01

    Built an audio and video player with a queue, Picture-in-Picture, and quality options.

  2. 02

    Synced LRC lyrics with the playback position.

  3. 03

    Set up an FFmpeg pipeline on a background queue to produce several quality versions.

  4. 04

    Built the React web app, Flutter app, and admin dashboard on the same media services.

03 · Highlights

A few selected screens.

Click an image to view it larger.

Swipe through them all, tap an image to enlarge it.

Web

Music home

Releases, recommendations, and library shortcuts on one page.

Mobile

Mobile player

Cover, progress, queue controls, and lyrics access on one Flutter screen.

Admin

Synced lyrics editor

LRC lyrics managed alongside content and mapped to playback time.

Admin

Media processing queue

FFmpeg job statuses and failures are tracked from the admin dashboard.

01 / 04

04 · Challenges & decisions

Technical problems and how I solved them.

01 · Challenge

Each upload needs several quality versions

Approach

FFmpeg processes media on a background queue with job statuses.

Result

Admins keep working while media is processed, and failures are easy to trace.

02 · Challenge

Lyrics must match the song

Approach

LRC lyrics are mapped to timestamps and follow the player position.

Result

Listeners see the line currently being played.

01 / 02

05 · Outcome

What the solution delivers.

One product foundation serves web, mobile, and content operations without separating the media lifecycle from the listener experience.

User flow

  1. 01Open library
  2. 02Discover content
  3. 03Choose music or video
  4. 04Start streaming
  5. 05Synchronize lyrics
  6. 06Save to playlist
  7. 07Continue across devices

Architecture

Experience

React web · Flutter mobile · responsive media player

Media API

Laravel 12 · Sanctum · catalog · playlists · playback history

Processing

FFmpeg · queue workers · quality variants · metadata

Storage

MySQL · media files · thumbnails · lyric artifacts

Data model

User

role

preferences

quality

Content

type

artist

duration

status

Playlist

user_id

name

visibility

Playlist Item

playlist_id

content_id

position

Favorite

user_id

content_id

created_at

Playback History

user_id

content_id

progress

Processing Job

content_id

preset

status

  • User 1—N Playlist / Favorite
  • Playlist 1—N Playlist Item
  • Content 1—N Playlist Item / Playback History
  • Content 1—N Processing Job
Next projectTokopedia Sentiment AnalysisTurning thousands of reviews into readable signals.