NN
Music.

I developed a music player integrated with FiveM, combining a React interface with a Lua backend and MariaDB persistence. It brings together playback, library, playlists, lyrics and spatial audio, with critical actions validated on the server.

FiveMJavaScriptLuaMariaDBReact

Open demo

01 / Technical case study

Problem, objective
and implementation.

01 / Problem

Media integrated with the game world

Playback needed to combine an external catalog, persistent library and spatial audio without trusting the NUI to control shared sessions.

02 / Objective

A complete music experience

Bring search, player, queue, favorites, playlists and lyrics into an interface connected to the world state and nearby players.

03 / My contribution

Interface, backend and integrations

I developed the React NUI, Lua session and proximity engine, MariaDB persistence, and catalog and lyrics adapters.

Key features

What the system delivers.

External catalog search
Queue and player
Favorites and playlists
Synchronized lyrics
Proximity audio
DJ booths and vehicle sessions

Technical decisions

How risks were addressed.

SecurityServer-authorized sessions

The server validates owner, entity, model, distance, routing bucket and revision before creating or changing a session.

PerformanceProximity-based deltas

A spatial index distributes only relevant upserts and removals to each player, avoiding global session broadcasts.

IntegrationsControlled provider failures

Catalog and lyrics use isolated contracts, caching, request coalescing, timeouts, negative caching and backoff.

02 / Project preview

A music experience
integrated with the game.

The NUI brings together search, playback, queue, lyrics, favorites and playlists. Each action connects to the resource’s client and server.

The demo shows the original interface in Brazilian Portuguese.

03 / Architecture & implementation

How NN Music
was built.

The experience is divided into layers with clear responsibilities across interface, client, server, data and integrations. Select a layer to explore the details.

01 / Interface and state

NUI / React

The NUI handles catalog, library, queue, lyrics and playback. Named callbacks connect the interface to the game, while the audio engine selects YouTube or SoundCloud and discards outdated session revisions.

Bootstrap with 5 favorites, 20 recent and 12 most-played tracks
Favorites paginated in batches of 50 with an opaque cursor
Player and library updated by session revision

Transport: NUI callbacks + messages
Players: YouTube / SoundCloud
Consistency: Monotonic revision

CSSHTMLJavaScriptReact