WHI$KY BEATSPlataforma imersiva de artista com loja de beats.
01 — Visão geral
A plataforma do artista WHI$KY: um percurso contínuo pelo álbum THOUGHTLESS, com vinil que gira ao scroll, gira-discos 3D ligado ao Spotify, vídeos e galeria — e uma loja de beats com licenças, pagamento e entrega automática dos ficheiros.
- Cliente
- WHI$KY (artista)
- Papel
- Full-stack / Arquitetura / Pagamentos / Testes
02 — Fluxo
- 01Ouvir o beat
- 02Escolher licença
- 03Carrinho
- 04Checkout Stripe
- 05Webhook confirma
- 06E-mail com links
- 07Download
03 — Em números
20
tabelas Postgres
10
migrações SQL
9
áreas no painel
E2E
desktop + mobile
04 — Stack
- Next.js 16
- TypeScript
- Supabase
- PostgreSQL
- Stripe
- Resend
- Three.js
- GSAP
- Vitest
- Playwright
- Vercel
05 — Destaques técnicos
- 01Loja de beats com licenças por beat (MP3, WAV, stems, exclusiva) e reserva temporária da exclusiva durante o pagamento.
- 02Checkout Stripe com webhook e tarefa diária de reconciliação; entrega automática por e-mail com links de download que expiram.
- 03Base de dados Postgres com Row Level Security, testada sem Docker num Postgres em WebAssembly.
- 04Painel de administração: beats, licenças, música, agenda, media, pedidos, vendas e textos.
- 05Motor de áudio fora do React (um único <audio> + Web Audio) com leitor persistente entre páginas.
- 06Bilingue PT/EN sem biblioteca de i18n e contas de cliente com código de acesso por e-mail.
06 — Backend & painel
Por trás do site há um sistema completo: o artista gere tudo num painel próprio, sem tocar em código, e cada venda passa por pagamento, confirmação, entrega e registo de downloads.
Arquitetura
01 Interface
- Site público PT/EN
- Painel /admin
- Conta de cliente
02 Servidor
- Server Components e Server Actions
- API: checkout, webhook, downloads
- Booking, códigos de acesso, revalidação
03 Dados
- Postgres com Row Level Security
- Auth (admin e clientes)
- Storage: media público, entregas privado
04 Serviços
- Stripe: checkout e webhook
- Resend: e-mails transacionais
- Vercel Cron: reconciliação diária
Painel de administração — /admin
01
Beats
Criar e editar beats (BPM, tom, género, duração), pré-escuta e ficheiros de entrega com upload retomável.
02
Licenças
Tipos de licença e preço por beat.
03
Música
Lançamentos e faixas, com ligações para as plataformas.
04
Agenda
Concertos com local, cidade e bilhetes.
05
Fotos e vídeos
Galeria e vídeos do site.
06
Pedidos
Pedidos de booking feitos no formulário do site.
07
Vendas
Vendas, reembolsos, códigos promocionais e fila de pendentes a resolver.
08
Textos
Textos do site em PT e EN, editáveis sem código.
09
Aparência e contactos
Cor de destaque, redes sociais e e-mails de contacto.
07 — Vender ficheiros sem perder vendas
O desafio principal foi garantir que cada pagamento resulta em ficheiros entregues, mesmo quando o webhook falha. O pedido é confirmado pelo webhook do Stripe e, se algo escapar, uma tarefa diária reconcilia os pagamentos pendentes.
08 — Áudio e 3D sem pesar
O gira-discos é uma cena Three.js carregada só quando aparece; o áudio vive num motor próprio fora do React, para a música não parar ao navegar.
09 — Galeria
Próximo projeto →
Dashboard — Exemplo