NN
Music.

Desenvolvi um player de música integrado ao FiveM, combinando interface React com backend em Lua e persistência em MariaDB. O sistema reúne reprodução, biblioteca, playlists, letras e áudio espacial, mantendo ações críticas validadas no servidor.

FiveMJavaScriptLuaMariaDBReact

Abrir demonstração

01 / Case técnico

Problema, objetivo
e implementação.

01 / Problema

Mídia integrada ao contexto do jogo

A reprodução precisava combinar catálogo externo, biblioteca persistente e áudio espacial sem confiar na NUI para controlar sessões compartilhadas.

02 / Objetivo

Uma experiência musical completa

Reunir busca, player, fila, favoritos, playlists e letras em uma interface conectada ao estado do mundo e aos jogadores próximos.

03 / Minha participação

Interface, backend e integrações

Desenvolvi a NUI React, o motor Lua de sessões e proximidade, a persistência MariaDB e os adapters de catálogo e letras.

Principais funcionalidades

O que o sistema entrega.

Busca em catálogos externos
Fila e player
Favoritos e playlists
Letras sincronizadas
Áudio por proximidade
Mesas DJ e sessões em veículos

Decisões técnicas

Como os riscos foram tratados.

SegurançaSessões autorizadas pelo servidor

O servidor valida proprietário, entidade, modelo, distância, routing bucket e revisão antes de criar ou alterar uma sessão.

PerformanceDeltas por proximidade

Um índice espacial distribui somente upserts e remoções relevantes para cada jogador, evitando broadcasts globais de sessões.

IntegraçõesProviders com falhas controladas

Catálogo e letras usam contratos isolados, cache, coalescimento, timeout, cache negativo e backoff.

02 / Preview do projeto

Uma experiência musical
integrada ao jogo.

A NUI concentra busca, reprodução, fila, letras, favoritos e playlists. Cada ação se conecta ao client e ao servidor do recurso.

03 / Arquitetura & implementação

Como o NN Music
foi construído.

A experiência foi dividida em camadas com responsabilidades claras entre interface, client, servidor, dados e integrações. Selecione uma camada para ver os detalhes.

01 / Interface e estado

NUI / React

A NUI concentra catálogo, biblioteca, fila, letras e player. Callbacks nomeados conectam a interface ao jogo, enquanto o motor de áudio seleciona YouTube ou SoundCloud e descarta revisões de sessão já superadas.

Bootstrap com 5 favoritas, 20 recentes e 12 mais tocadas
Favoritos paginados em lotes de 50 com cursor opaco
Player e biblioteca atualizados por revisão de sessão

Transporte: NUI callbacks + mensagens
Players: YouTube / SoundCloud
Consistência: Revisão monotônica

CSSHTMLJavaScriptReact