(Caso 01) — SuaMúsica · São João de Todos 2021
Era só uma votação. Até o Brasil inteiro clicar ao mesmo tempo.
Desenhei e construí do zero a votação que escolheu o artista do São João do SuaMúsica. Ela aguentou as ondas de acesso puxadas por artistas nacionais e mostrou ao público um placar que se mexia a cada cinco minutos.
Ver o projeto no ar (abre em nova aba)
(Contexto) A maior plataforma de música do Brasil
O SuaMúsica nasceu no Nordeste, em 2010, como um blog criado por um paraibano para divulgar gravações de shows de forró de bandas que ainda não tinham espaço no rádio nem nas grandes gravadoras. Virou o lugar onde o público encontrava primeiro aquilo que tocava nas festas, nos paredões e nas estradas da região. Por ali passaram, ainda no começo, nomes como Wesley Safadão, Aviões do Forró, Mano Walter e Jonas Esticado. Mais tarde, a plataforma revelou artistas como Zé Vaqueiro, João Gomes e Nattan.
Com o tempo, deixou de ser um blog para se tornar a maior plataforma de música do Brasil e ganhou o apelido de “Spotify do Nordeste”: streaming, distribuição e uma relação direta entre artistas independentes e o público que os escuta. Hoje está entre os 4.000 sites mais acessados do mundo, com mais de 12 milhões de acessos por mês.
Numa plataforma desse tamanho, cada projeto já estreia recebendo muita gente, e boa parte dela chega por um celular simples, com conexão instável. Por isso o código precisa ser enxuto e a página precisa abrir rápido em qualquer aparelho.
Capítulo 01
O convite
O pedido cabia em uma frase: deixar o público escolher o artista do São João do ano.
Era 2021, e o São João ainda não podia voltar às praças. O SuaMúsica decidiu levar a festa para a tela do celular, onde o público estava, e chamou a campanha de “o maior São João virtual da história”. Foi para isso que me procuraram: desenvolver uma série de projetos em torno da festa mais importante do calendário para boa parte do público da plataforma.
Um deles era o Talento São João de Todos. A ideia central era simples e bonita: quem decide quem sobe ao palco é quem escuta.
Confesso que, na primeira conversa, parecia um projeto tranquilo. Uma lista de artistas, um botão de votar, um placar. O tipo de coisa que se resolve em poucos dias.
Só que o SuaMúsica não é um site qualquer. São mais de 12 milhões de acessos por mês, um dos 4.000 endereços mais visitados do planeta. Ali, até o projeto mais simples recebe, no dia em que vai ao ar, o público de um dos maiores sites do país.
Capítulo 02
Onde o simples deixa de ser
A dificuldade estava em quem ficava do outro lado do botão.
Os artistas na disputa têm fã-clubes enormes e, como em toda época de votação, foram às redes sociais pedir voto. Um story, um post fixado, um áudio no grupo da torcida. Em segundos, milhares de pessoas chegavam juntas, pelo mesmo link, querendo a mesma coisa.
Tráfego assim chega em ondas, e cada onda tinha nome e sobrenome. Começava no minuto exato em que algum artista lembrava os fãs de votar.
O sistema seria julgado pelo pior minuto da campanha.
Capítulo 03
O dilema do tempo real
E o SuaMúsica queria a apuração em tempo real.
Fazia sentido. O fã que vê o seu artista subir, ou ser ultrapassado, volta no dia seguinte, vota de novo e chama mais gente.
Só que “tempo real”, levado ao pé da letra, significa recalcular o ranking a cada visita. Com milhares de pessoas chegando no mesmo segundo, o próprio placar derrubaria a votação no pico, quando todo mundo estava olhando.
A saída foi separar as duas perguntas que o sistema precisava responder: “registra o meu voto” e “como está a disputa?”. A primeira precisa de resposta na hora, para cada pessoa. A segunda pode ser calculada uma vez e entregue igual para todo mundo.
(Arquitetura)Votação · 2021
Dois caminhos, um banco
- Peça-chave
- Sentido dos dados
Caminho do votoEscrita · sempre na hora
- Fã clica em votar Vindo do link que o artista postou nas redes
- Verificação invisível reCAPTCHA confere se é gente, sem desafio na tela
- Função sob demanda Grava o voto e escala junto com a onda de acessos
Caminho do placarLeitura · direto do cache
- Apuração recalculada A conta pesada roda uma vez a cada 5 min, para todos os visitantes
- Página pronta no cache Servida sem tocar no banco; a versão nova entra sem ninguém esperar
- Visitante abre o placar Milhares ao mesmo tempo, todos recebendo a página instantânea
- Por voto
- 1 função, criada sob demanda
- Por visita ao placar
- 0 consultas ao banco
- Apuração
- 5 min entre uma fotografia e outra
Cada voto vai direto para uma função serverless, que cresce e encolhe junto com o tráfego. Não há servidor para dimensionar no chute. Já o placar é gerado como página estática e servido pela borda da rede. A cada cinco minutos o cache vence e uma nova apuração roda em segundo plano. Enquanto isso, quem chega recebe na hora a versão anterior.
Na prática, o banco de dados faz a conta pesada uma vez a cada cinco minutos, e não uma vez por visitante. Num pico de campanha, é isso que mantém o site no ar.
Cinco minutos foi o ponto de equilíbrio: perto o bastante para o público sentir a disputa viva, longe o bastante para o sistema respirar.
Capítulo 04
Um voto em que dá para confiar
Votação disputada atrai torcida e também quem tenta ganhar no robô.
Antes de cada voto entra uma verificação invisível. O fã de verdade toca em “Votar” e o voto está registrado. Quem fica pelo caminho é o script. Proteger o resultado sem castigar o público era inegociável, porque uma vitória em votação suspeita não vale nada para o artista que venceu.
E depois do voto, em vez de um “obrigado” genérico, cada pessoa caía numa página de compartilhamento do próprio artista. Os fãs já estavam fazendo campanha nas redes; a gente só entregou a eles a ferramenta certa para continuar.
Capítulo 05
Do desenho ao pico
Fiz o caminho inteiro e fiquei por perto depois do lançamento.
Cuidei do UX/UI, do front-end, da camada serverless e da entrega. O São João de Todos tem poucas peças, e cada uma tem um motivo claro para existir. Ele é um dos quatro projetos que desenvolvi do zero para o SuaMúsica.
Durante a campanha, acompanhei acessos e performance de perto. Ver as ondas chegando e o site respondendo me deu a certeza de que o desenho aguentava fora do papel.
(Resultado) Apuração final
Talento São João de Todos6
artistas finalistas
na disputa pelo público
Percentual de votos de cada finalista. Dados da apuração publicada no site do projeto.
- 01 Fernando Amorim 62,1%
- 02 Artur Lima 21,2%
- 03 Pedro Vilar 8,9%
- 04 Cris Olliver e Rodrigo Paiva 3,3%
- 05 Junior Paiva 2,3%
- 06 Maisa Lima 2,2%
(Depoimento) Do lado do SuaMúsica
Recomendação no LinkedIn (abre em nova aba)Joer é um desenvolvedor criativo, pró-ativo e ainda um excelente UI-Designer com senso estético aguçado. Um profissional multidisciplinar e como resultado de sua abrangência ajuda a descobrir novos insights e ideias sobre o produto. Por dentro das tendências e focado em oferecer a melhor experiencia de usabilidade pro usuário, possui ainda conhecimentos de negócio e tecnologia, o que nos ajudou imensamente a nós do SuaMúsica a encontrar a melhor solução tecnológica, reduzindo custos com infra nas 2 oportunidades que trabalhamos juntos. Um grande profissional, faz a diferença em qualquer equipe, com certeza recomendo!
Darlison Azevedo
Zé Pretim · CCO · SuaMúsica
(O que fica)
Para o público, tempo real é ver a disputa se mexer. Cinco minutos bastaram.
(Bastidores) Decisões técnicas
(05)- Next.js com geração estáticaPlacar pré-renderizado e revalidado a cada 5 minutos (ISR). Abre rápido para o público e pesa pouco no banco.
- Funções serverlessUma rota dedicada ao voto, que escala sozinha nas ondas de acesso puxadas pelas redes sociais.
- CDN na bordaA página do placar sai do cache mais próximo de quem acessa, sem passar pela aplicação.
- reCAPTCHA invisívelProteção contra votos automatizados sem adicionar nenhum passo para o fã.
- Página de compartilhamento por artistaDepois de votar, o fã recebe um link pronto para levar a campanha adiante.