Music Streaming Feature

Clooza Music

React Native music streaming and playback architecture.

My role

React Native engineer focused on playback architecture, player UI, music discovery, album flows, lyrics, queue behavior, and API integration.

Overview

Clooza Music is a mobile music streaming experience inside the broader Clooza React Native app. As a React Native engineer, my role focused on building the playback foundation, player UI, music discovery flows, album playback, lyrics, queue behavior, and the API integration layer that connects the app to music content and stream manifests.

The feature includes a Music tab, search screen, album detail screen, full-screen music player, lyrics player, queue screen, and persistent mini-player. Users can search across songs, albums, podcasts, episodes, and artists; play tracks from search or album pages; open albums from the player; control playback; scrub progress; view synced or plain lyrics; and manage the upcoming queue with drag-and-drop reordering.

Technically, the feature is structured around an app-level PlayerProvider powered by expo-audio, with a Zustand player store managing the current track, queue, album queue, recommended queue, playback history, stream manifest, repeat mode, shuffle state, and autoplay/pause requests. Some discovery areas are still being extended, but the implemented foundation shows a production-grade approach to audio playback, stream lifecycle handling, queue state, lyrics synchronization, and mobile UX polish.

Key Features

Playback Foundation

App-level PlayerProvider powered by expo-audio.
Zustand store for current track, queue, album queue, recommended queue, playback history, stream manifest, repeat mode, and shuffle state.
Manifest-based stream loading with refresh behavior for expiring playback URLs.

Player and Queue UX

Full-screen player, persistent mini-player, lyrics player, queue screen, and album navigation.
Previous/next history, repeat-track, repeat-queue, and draggable queue ordering.
Blurred artwork backgrounds, optional motion-video backgrounds, gradients, and accessible player controls.

Lyrics

Timestamped LRC parsing, sorting, synchronization, auto-scroll, and tap-to-seek.
Plain lyrics fallback and focused test coverage for parser edge cases.

Technical Highlights

Added lock-screen/background playback readiness with audio mode configuration and media metadata updates.
Built synced lyrics support using LRC parsing, active-line tracking, auto-scroll, and tap-to-seek behavior.
Integrated React Query hooks for search, albums, tracks, stream manifests, queues, play history, latest releases, and top artists.
Added stream heartbeat events for play, end, and periodic listening analytics.
Internationalized the Music feature across English and French UI copy.

Tech Stack

React Native
React
Expo modules
expo-audio
Zustand
Axios
TanStack React Query
React Navigation
i18next
react-native-draggable-flatlist
react-native-linear-gradient

Architecture

Clooza Music separates the audio engine, global player state, stream manifest lifecycle, queue logic, player screens, search/album data hooks, and translated UI labels so playback can continue across navigation while the UI stays responsive.

Challenges and Solutions

Keeping playback alive across screens.

Solution: Moved player state and audio control into an app-level provider and shared Zustand store.

Supporting synced and plain lyrics.

Solution: Implemented LRC parsing, active-line detection, auto-scroll, and tap-to-seek with fallback rendering for plain lyrics.