Construí um site de estatísticas do Cartola FC
E aí, pessoal. Tudo certo? Primeira vez postando aqui no tabnews.
TLDR
Tô fazendo esse post mais pra divulgar esse projeto que tenho trabalhado nos últimos meses.
O projeto se chama cartola-statistics, mas eu deixei ele sob o domínio em pt-br:
Para os mais interessados e curiosos na história
Ultimamente eu estava bem desinteressado em programação até o Cartola FC da Globo despertar essa curiosidade de saber qual foi o jogador que eu mais escalei nesse ano. Com essa ideia em mente, eu comecei a construir esse projeto.
O meu único objetivo era contar o número de vezes que escalei cada jogador e ordenar de forma decrescente essa lista. O MVP ficou mais ou menos assim:
Depois, acabei me empolgando e resolvi melhorar como os jogadores estavam sendo expostos na página, usando a referência dos jogos eletrônicos da EA. E a segunda versão da aplicação ficou mais ou menos assim:
A partir daí, eu fui melhorando e comecei a relacionar os dados que voltavam do endpoint do Cartola. Criei algumas estatísticas cruzando os dados que as APIs abertas do Cartola retornam e fui aprimorando a aplicação.
Depois de construir várias estatísticas, resolvi aproveitar que estava usando Next.js 13+, explorei as server actions, criei um formulário e deixei que fosse parametrizável a pesquisa, pesquisando as equipes pelo nome (e hoje essa é a home do site).
O que achei mais legal de fazer nesse projeto
Explorando as documentações do Next.js, vi que existe uma funcionalidade muito legal de gerar os metadados de forma dinâmica. Isso despertou a ideia de fazer uma forma de divulgar o projeto no twitter, criando imagens customizadas pra cada estatística que eu quisesse compartilhar. Isso somado com a possibilidade de fazer uma ImageResponse nas server actions do Next.js, eu consegui construir uma forma de gerar uma imagem da estatística específica, e essa ficar como uma imagem de preview do tweet, dessa forma:
O que eu teria feito diferente
Eu não quis me preocupar muito com arquitetura e nem com um código manutenível, estava mais focado em "entregar" o produto e aprender as novidades que o Next.js tinha lançado nesses últimos releases que eu acabei ficando por fora.
- Poderia ter componentizado mais e ter feito um código bem mais reaproveitável. No começo, era muito rápido de criar novas estatísticas e fazer novas "entregas", mas isso acabou tendo um impacto bem grande à medida que o projeto foi evoluindo;
- Gerenciar melhor os dados que transitam na aplicação. A fim de diminuir a complexidade, eu acabei fazendo um prop-drilling imenso em alguns casos, o que gerou uma dificuldade em manter e evoluir o código;
- Utilizar melhor o TypeScript pra ajudar no desenvolvimento. Eu tinha uma meta de fazer os tipos tudo de forma dinâmica, pra eu aprender melhor as funcionalidades da linguagem, só que produzir um código assim em TS é bem trabalhoso. (Esse ponto é algo que vou evoluir nas próximas versões)
Planos para o futuro do projeto
Eu deixei o código do projeto aberto para quem quisesse contribuir. Dei uma detalhada básica no repositório e deixei algumas amostras das funcionalidades no readme do repo. Se tu te interessou pelo projeto e quer contribuir, dá uma passadinha lá no repo.
P.S.: O código tá uma bagunça, mas eu já tô melhorando ele, eliminando duplicidade de código, que é o que mais tem hoje hehe.