Web
Beranda musik
Rilisan, rekomendasi, dan pintasan library dalam satu halaman.
Kembali ke daftar proyek
- Streaming · Music & Video
- 2026
Studi kasus · 07 / 08
SoundNusantara
Satu pengalaman media dari discovery sampai pemutaran HiFi.
Platform streaming musik dan video lintas web serta mobile dengan library, player, lirik sinkron, playlist, pengelolaan konten, dan pipeline pemrosesan media.
- Peran saya
- Full-stack Engineer · Product UI · Media Pipeline
- Status
- Public repository
Pencapaian utama
Membangun platform streaming musik dan video untuk web dan mobile, dari player sampai pipeline pemrosesan media.
Lihat repository Real UI capture · fictional preview data used because the repository has no seeded media library
01 · Konteks
Masalah yang ingin diselesaikan.
Pengguna utama
- Pendengar musik dan video
- Content administrator
- Tim pengelola media
Masalahnya
Pengalaman mendengarkan mudah terpecah antara pencarian konten, player, lirik, playlist, dan pengelolaan file media. Di sisi admin, setiap upload juga memerlukan metadata serta versi kualitas yang konsisten.
Pendekatannya
SoundNusantara menyatukan discovery, library, player audio/video, lirik sinkron, dan preferensi pengguna dengan dashboard admin serta pipeline FFmpeg untuk menyiapkan media.
Angka kunci
02 · Peran saya
Bagian yang saya kerjakan.
Full-stack Engineer · Product UI · Media Pipeline
Teknologi yang digunakan
- React 19
- TypeScript
- Laravel 12
- Flutter
- FFmpeg
- MySQL
- Zustand
- Vite
- 01
Membangun player audio dan video dengan queue, Picture-in-Picture, dan pilihan kualitas.
- 02
Menyinkronkan lirik format LRC dengan posisi pemutaran.
- 03
Menyiapkan pipeline FFmpeg di background queue untuk beberapa versi kualitas media.
- 04
Membangun web React, aplikasi Flutter, dan dashboard admin yang memakai layanan media yang sama.
03 · Sorotan
Beberapa tampilan pilihan.
Klik gambar untuk melihatnya lebih besar.
Geser untuk melihat semua, ketuk gambar untuk memperbesar.
01 / 04
Web
Beranda musik
Rilisan, rekomendasi, dan pintasan library dalam satu halaman.
Mobile
Player mobile
Cover, progress, kontrol queue, dan akses lirik dalam satu layar Flutter.
Admin
Editor lirik sinkron
Lirik LRC dikelola bersama konten yang dipetakan ke waktu pemutaran.
Admin
Antrean pemrosesan media
Status job FFmpeg dan kegagalannya dapat dipantau dari dashboard admin.
04 · Tantangan & keputusan
Masalah teknis dan cara saya menyelesaikannya.
01 / 02
05 · Hasil
Apa yang dihadirkan solusi ini.
Satu fondasi produk dapat melayani pengalaman web, mobile, dan administrasi konten tanpa memisahkan lifecycle media dari pengalaman pendengar.
Alur penggunaan
- 01Masuk ke library
- 02Temukan konten
- 03Pilih lagu atau video
- 04Mulai streaming
- 05Sinkronkan lirik
- 06Simpan ke playlist
- 07Lanjutkan lintas perangkat
Arsitektur
Experience
React web · Flutter mobile · responsive media player
Media API
Laravel 12 · Sanctum · catalog · playlist · playback history
Processing
FFmpeg · queue worker · quality variants · metadata
Storage
MySQL · media files · thumbnails · lyric artifacts
Model data
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
