Reordenando os charts do Spotify

Me familiarizei com o conceito de vibe-coding por meio da newsletter Appetrecho, do jornalista Sérgio Spagnuolo (Núcleo). Entre dicas, análises de apps, ferramentas digitais e inteligência artificial, ele eventualmente compartilha seus próprios projetos - desde o portfólio pessoal até aplicações mais robustas como o Legislatech, onde o código, em muitos casos, é desenvolvido com o auxílio de IA.

O termo vibe-coding foi apresentado pelo cientista da computação Andrej Karpathy em fevereiro de 2025. A proposta é simples, mas poderosa: uma nova abordagem para a programação, em que o usuário expressa suas intenções em linguagem natural e uma ferramenta de IA as transforma em código executável.

O princípio central seria algo como “codifique primeiro, refine depois” (code first, refine later). A ideia é priorizar a construção inicial, deixando otimizações para fases posteriores. Claro, a IA apenas gera o código, sem criatividade, contexto e os inúmeros atributos humanos, o vibe-coding tem seus limites. E sim, há fragilidades: segurança, erros lógicos, inconsistências. Mas, para pessoas como eu - com conhecimento básico e que atuam nesse campo como hobby ou em projetos pessoais -, trata-se de uma possibilidade concreta de criação.

Desde cedo me interesso por web design e front-end. Meu contato com programação começou ali, por curiosidade e tentativa, devorando livros da Microcamp, editando layouts de blogs e mexendo em HTML e CSS. Ao longo dos anos, continuei exercitando esse interesse ao criar sites para colegas e portfólios para projetos pessoais, mesmo que de forma autodidata e esporádica.

Então, quando me aproximei do conceito de vibe-coding, já me sentia ambientada para colocar a mão na massa. Comecei recriando meu portfólio com HTML e CSS básico, e hospedado no Glitch (dica do Sérgio). Era um projeto simples, mas que consegui refinar bem com ajuda da IA. Com a descontinuidade do Glitch no início deste mês (triste, aliás), migrei para o Netlify e aproveitei a oportunidade para aprimorar ainda mais o que já havia feito, dessa vez usando Tailwind CSS e scripts em JavaScript. Gostei bastante do resultado.

Com o portfólio no ar, na semana passada pensei: "por que não ir além?". A ideia se conectou com uma vontade antiga de criar algo usando a API do Spotify, principalmente depois de conhecer o site Every Noise at Once, do pesquisador Glenn McDonald. A partir daí, e depois de zanzar nos pensamentos, cheguei no conceito: aplicar a mesma lógica do meu perfil do Instagram Mais Mulheres nos Festivais (inspirado pelo Book More Women), que consiste em remover os artistas homens dos cartazes de festivais para visualizar com mais clareza quantas mulheres realmente estão presentes, mas nos charts do Spotify.

Coloquei o nome de Blank Charts.

Como o projeto foi feito?

O desenvolvimento seguiu um processo bem pragmático, com alguns aprendizados no caminho:

1. Coleta de dados e uma canseira do Spotify: a primeira abordagem foi usar a API oficial do Spotify para extrair os dados de playlists (as Top 50), mas encontrei limitações técnicas que impediram o avanço, preciso pesquisar melhor os motivos (acho que tem a ver com autorizações). Diante disso, a estratégia foi ajustada: a API foi utilizada para extrair as imagens de capa e artistas, enquanto os dados dos charts de músicas passaram a ser coletados dos arquivos CSV oficiais do Spotify Charts (mas eles só liberam dos Weekly Top Songs). Para os charts de ouvintes mensais, utilizei uma extensão de web scraping para extrair os dados públicos do site Kworb.net (que aglutina os dados do próprio Spotify). Podia usar o Charmetric, mas é caro e só tem 7 dias grátis, não conseguiria atualizar semanalmente.
2. Processamento dos dados (Back-end): o núcleo do projeto é um script em Java, desenvolvido para automatizar a coleta, o processamento e a filtragem desses dados. A etapa mais crucial é o cruzamento das informações com uma base de dados interna, que montei manualmente com a categorização de gênero de cada artista para garantir precisão e respeito às identidades.
3. Interface e visualização (Front-end): a parte visual foi criada com HTML e estilizada com Tailwind CSS, buscando emular a identidade dos charts oficiais da plataforma. O projeto foi desenhado para ser limpo e focado na apresentação clara dos dados.
4. Desenvolvimento assistido por IA: durante todo o processo, utilizei ferramentas de IA (essencialmente Claude, Gemini - tenho o pro por causa do meu plano de Google One -, e um pouco de ChatGPT) como assistentes de programação para gerar blocos de código, depurar erros e otimizar o fluxo de desenvolvimento.

Finalmente, o site foi hospedado na plataforma Netlify. O resultado é este que vocês podem acessar agora.

Blank Charts

Cada chart tem uma página própria, exibindo a lista de artistas com duas colunas: a posição original e a posição no Blank Charts. Essa comparação visual ajuda a dimensionar o impacto da disparidade de gênero nos rankings. Também escrevi uma documentação simples, explicando os principais pontos do projeto.

O projeto ainda está em construção e há muito o que aprimorar, mas para um primeiro teste, acredito que o resultado já mostra potencial. Vai lá dar uma olhada, ficarei feliz em receber opiniões, sugestões ou críticas, toda contribuição vale.