Executando verificação de segurança...
21

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 e está hospedado na vercel sob o domínio:

https://cartola-statistics.vercel.app

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:
edc-mvp

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:
edc-v2

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).

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:
suarez-statistic

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.

Carregando publicação patrocinada...
1

Cara, ficou muito dahora, parabéns!

Uma dúvida, tem alguma documentação da API Oficial do Cartola? Qual API você usou? Ja quis fazer algo com Cartola também, mas não achei a doc. da API do Cartola :(

2

Pior que não tem, cara. Eu acabei pegando os endpoints diretos do site do cartola, vendo pelo F12 do navegador, e a partir daí fui entendendo como funciona.
Mas spoiler, é bizarro como é mal estruturada a informação nas apis do cartola. Tem algumas coisas que acabaram ficando bem complexas por conta de como os dados estão expostos nos endpoints. :/

1

parabéns!! projeto muito show. Eu também planejei fazer um projeto parecido, mas só para estudar coisas novas mesmo no meu tempo livre, pretendo fazer um site com algumas estatisticas de futebol, mas usando firebasse e algumas APIs gratuítas, a ideia é aprender um pouco de firebase, já que sou backend e não costumo mexer muito com front.

1

Eu até comecei usando o supabase nesse projeto pra armazenar alguns dados, mas achei o plano free deles bem limitado.
Além dos problemas de infra que tive com eles. Infelizmente, acabei por remover o supabase e migrar pro postgres da vercel, mesmo. O postgres da Vercel não tem a mesma qualidade e dev experience do supabase, mas pelo menos não é inconsistente. :/

-1
-1