Arquitetura de conteúdo

Como criei um site de figurinhas da Copa com 8.656 páginas

O catálogo reúne 980 figurinhas em oito idiomas, um álbum digital compartilhável e jogos para adivinhar jogadores. Montei as páginas com Astro, sem consultar um banco de dados.

Assistir ao vídeo original no YouTube
Thumbnail do vídeo: Como criei um site estruturado de 8000 páginas em 12 horas

Meu arrependimento com esse projeto foi ter começado tarde. A Copa já estava movimentando as figurinhas e o álbum quando resolvi entrar na conversa. Mesmo assim, passei o dia montando um catálogo que não existia de manhã: cada figurinha podia levar a dados do jogador, a um álbum compartilhável e até a um jogo para tentar adivinhar quem era.

Cada figurinha precisava ter uma página própria

O catálogo chegou a 980 figurinhas em português, inglês, espanhol, francês, italiano, japonês, coreano e alemão. Em vez de deixar uma página só com a foto e o nome, acrescentei o código da figurinha, a posição, o clube, a altura, o nascimento e a raridade. Também coloquei informações de carreira e dados como contrato, salário e marcas associadas ao jogador.

Cada item podia apontar para links de afiliado de lojas que vendiam a figurinha, inclusive a Amazon, e para produtos usados para guardar o álbum. Assim, a pessoa que chegava procurando um jogador também encontrava informações sobre a coleção e os acessórios relacionados a ela.

O álbum digital e os jogos davam outro uso ao catálogo

Eu também fiz um checklist para marcar as figurinhas que a pessoa já tinha. A lista fica no armazenamento local do navegador, então não exige cadastro nem uma tabela no banco. Dá para gerar um link e compartilhar a coleção com outra pessoa, mostrando o que já está no álbum e o que ainda falta. Como o dado fica naquele navegador, essa lista não é uma conta sincronizada entre aparelhos.

No subdomínio onde eu já mantinha jogos de adivinhar jogadores, criei dois desafios com tema da Copa. Em um deles, a pessoa usa pistas como clube, altura e ano de nascimento até chegar ao nome. No outro, tenta reconhecer o jogador pela imagem e tem até cinco palpites. Também montei uma página para recomendar capas, sleeves e outros produtos para guardar as figurinhas.

Usei Astro para gerar o catálogo sem consultar o D1

Dessa vez, escolhi Astro. Eu vinha usando mais Hono e ainda não conhecia bem o Astro; achava que precisaria puxar várias bibliotecas para conseguir montar o site. Para esse catálogo, os dados das figurinhas já podiam entrar no próprio projeto e virar páginas prontas. Eu não precisava consultar o D1 toda vez que alguém abria a ficha de um jogador.

Hospedei o site na Cloudflare, onde eu já usava CDN havia muitos anos e tinha começado a publicar aplicações no Workers. Como as fichas não dependiam de atualização em tempo real nem de uma conta individual para o álbum, manter uma base de dados para elas só acrescentaria trabalho. O armazenamento do álbum ficou no navegador de cada pessoa; o catálogo em si vinha dos dados usados para gerar as páginas.

Não usar D1 tirava da conta as leituras desse banco, mas não apagava os limites da hospedagem. Um site ainda pode usar requisições e CPU do Worker. A diferença é que, nessa versão, a visita à página não precisava procurar dados de jogador numa tabela para então montar a ficha.

As imagens que faltavam viraram substitutas organizadas

O ponto mais chato foi conseguir as imagens. Procurei em vários lugares até achar uma loja com pouco mais de 750 figurinhas. Baixei aquele lote em massa com uma extensão de navegador e organizei os arquivos para completar o diretório até 980 itens.

Para as figurinhas sem foto, pedi ao Codex imagens substitutas no mesmo formato. Cada espaço vazio recebeu uma arte própria, em vez de deixar um card quebrado ou sem contexto. Isso ajudou a terminar a estrutura antes de eu ter as imagens definitivas para todos os itens.

Também fui ampliando os perfis com informações como contrato, salário e marcas associadas. Esses dados precisam pertencer ao jogador certo e estar atualizados; quando uma ferramenta completa vários itens de uma vez, vale conferir as informações antes de deixar a ficha pública.

Planeje o catálogo antes de pedir as próximas mudanças

Eu passei o dia pedindo correções e acrescentando ideias. O Codex conseguiu atualizar o projeto, mas várias coisas só apareceram depois do primeiro catálogo: o álbum compartilhável, os modos de jogo, a página de produtos e mais campos de jogador. Se eu começasse de novo, decidiria antes quantos idiomas teria, quais dados formariam cada ficha, como representar uma foto que falta e quais interações viriam junto do catálogo. Ter essa lista definida reduz o vai e volta quando a estrutura já está pronta.

O sitemap chegou a mostrar 8.656 páginas encontradas no Search Console. Isso dizia que o Google havia encontrado aquelas URLs; não dizia que todas já estavam indexadas. O projeto tinha menos de 24 horas, então ainda não dava para avaliar o que entraria nos resultados nem quantas pessoas visitariam o site. Naquele dia, eu podia conferir o tamanho do catálogo e abrir as ferramentas que tinha criado. O restante dependia do tempo e do uso real.

Em outro projeto, usei dados de um catálogo para montar a ferramenta de MIDI com partituras e treino de músicas.