Clayton BorgesDESENVOLVEDOR
← ← Todos os Projetos
Cliente: DSRPTV Records

DSRPTV Records – Plataforma de Música

2023
Creative Commerce Platform

Plataforma de e-commerce e streaming musical. Checkout duplo Stripe + Mercado Pago, Spotify API, armazenamento AWS S3, visuais Three.js. Construído com Raphael Palmer (DISCLAYMER).

Mídia
Visão Geral

DSRPTV Records é uma plataforma de e-commerce e streaming musical para uma gravadora independente brasileira. Permite que os fãs comprem e ouçam música em uma única experiência — gerenciando fluxos de pagamento brasileiro e internacional, entrega de assets de áudio e uma identidade visual Three.js distintiva que reflete a estética da gravadora.

Problema

A gravadora precisava monetizar seu catálogo diretamente — sem dividir receita com distribuidoras — enquanto alcançava públicos brasileiros e internacionais. Nenhuma plataforma pronta existente suportava checkout de dupla moeda com integração Spotify e identidade visual personalizada.

Objetivo

Construir uma plataforma completa de comércio musical com streaming, compras digitais, checkout de pagamento duplo e uma identidade visual forte o suficiente para funcionar como experiência de marca independente.

Meu Papel
  • ◈Co-desenvolvedor com Raphael Palmer (estúdio DISCLAYMER)
  • ◈Frontend, visuais Three.js, integração de pagamento
Stack
ReactTypeScriptViteThree.jsFirebaseAWS S3StripeMercado Pago
Decisões Técnicas
  1. 01Stripe para pagamentos internacionais, Mercado Pago para o Brasil — ambos com confirmação de compra por webhook. Um modelo de evento de compra compartilhado normaliza os dois provedores em um único fluxo de fulfillment, para que a entrega de áudio downstream não dependa de qual gateway disparou.
  2. 02Spotify API para sincronização de catálogo e reprodução incorporada — mantendo a experiência de escuta dentro da plataforma consistente com o que os fãs já conhecem, em vez de construir um player de áudio personalizado do zero.
  3. 03AWS S3 com entrega por URL assinada para arquivos de áudio comprados — URLs com tempo limitado significam que os arquivos comprados não podem ser compartilhados ou hotlinkados após o vencimento.
  4. 04Three.js para identidade visual — a estética da gravadora é central para o produto, não um detalhe. WebGL permitiu movimento e profundidade que o CSS estático não poderia alcançar.
O Que Aprendi
  • →Dois provedores de pagamento significam dois handlers de webhook. O insight crítico é normalizar os dois em um evento de compra agnóstico de provedor o mais cedo possível — o fulfillment downstream (entrega de áudio, escrita no DB) nunca deve conter ramificações if-Stripe / if-MercadoPago.
  • →Os tokens de embed do Spotify expiram silenciosamente. Sem um mecanismo de atualização proativo, a reprodução quebra no meio da sessão. A atualização silenciosa de token em segundo plano, acionada antes da expiração, é o mínimo necessário para apps integrados ao Spotify.
Status

No ar