Carregando
Tutorial completo para construir um dashboard que mostra odds em tempo real, detecta arbitragens e exibe tendências de mercado. React + Chart.js + APIs de odds.
Dashboard de Apostas Esportivas com React. Tutorial completo para construir um dashboard que mostra odds em tempo real, detecta arbitragens e exibe tendências de mercado. React + Chart.js + APIs de odds.
Galera, vou contar uma coisa que aprendi na prática: dados em tabela são ótimos pra armazenar informação, mas péssimos pra tomar decisão rápida. Quando uma odd de arbitragem aparece, ela dura minutos — às vezes segundos. Você não vai ficar scrollando uma planilha com 500 linhas tentando achar o número certo enquanto a oportunidade desaparece.
Um dashboard bem feito mostra pra você em 2 segundos o que importa. Gráfico de linha mostrando pra onde a odd está indo. Cards coloridos destacando arbitragens ativas. Tabela filtrada com só as oportunidades relevantes. Tudo atualizado em tempo real.
A stack que vamos usar aqui é React com TypeScript no front, Chart.js pra gráficos (via react-chartjs-2), e The Odds API como fonte de dados. Dá pra deployar como PWA, instalar no celular e usar como um app nativo. Custo de infraestrutura: zero se você usar Vercel ou Netlify no plano gratuito.
O projeto final tem três telas: overview com cards de métricas e gráfico de odds, tabela de arbitragens em tempo real, e tela de detalhes por jogo com histórico de movimento. Vamos construir tudo isso passo a passo.
Antes de sair codando, vale pensar na arquitetura. A estrutura de pastas que funciona bem pra esse tipo de projeto separa as preocupações em camadas: hooks pra lógica de dados, components pra UI, e services pra comunicação com APIs.
O componente raiz é o Dashboard, que orquestra três painéis: StatsOverview (cards com métricas), OddsChart (gráfico de linha) e ArbitrageTable (tabela interativa). Cada componente recebe dados via props e não faz fetch sozinho — toda a lógica de dados fica nos hooks.
O gráfico principal do dashboard mostra a evolução das odds de um jogo ao longo do tempo. Cada casa de apostas é uma linha no gráfico. Quando as linhas divergem muito, pode ter arbitragem. Quando convergem, o mercado está em consenso. Essa visualização sozinha já vale mais que qualquer planilha.
A tabela de arbitragens é a funcionalidade mais valiosa do dashboard. Arbitragem esportiva é quando você consegue apostar em todos os resultados possíveis de um jogo, usando odds de casas diferentes, e garantir lucro independente do resultado. Acontece quando a soma dos inversos das odds de casas diferentes é menor que 1.
Quando impliedProb é menor que 1, você tem arbitragem. Na prática, arbitragens acima de 1% de lucro são raras e duram pouco. Arbitragens de 0.5% aparecem mais, mas o lucro é tão pequeno que só vale se você opera com banca grande e tem as contas prontas nas casas certas. O dashboard te mostra tudo isso em tempo real pra você decidir se vale ou não.
Um detalhe que a maioria dos tutoriais ignora: casas de apostas cancelam apostas que fazem parte de arbitragem identificada. Não é ilegal, mas elas não gostam. Se você fizer arbitragem consistentemente, suas contas vão ser limitadas. Dito isso, o conhecimento de como detectar arbitragem é valioso pra entender a eficiência do mercado — mesmo que você não vá operar diretamente.
O dashboard ganha muito quando roda no celular. Você recebe a notificação de arbitragem via Telegram (usando o bot que ensinamos no artigo sobre Telegram Bot para value bets) e abre o dashboard direto no celular pra analisar os detalhes.
Com o plugin vite-plugin-pwa, transformar sua app React em PWA leva 5 minutos. Instale: npm install vite-plugin-pwa. No vite.config.ts, adicione o plugin com as configurações de manifest — ícone, nome, cores de tema. O service worker é gerado automaticamente e faz cache dos assets estáticos.
Deploy na Vercel é um git push. Netlify também. Ambos oferecem HTTPS gratuito, que é obrigatório pra PWA funcionar. Depois do deploy, acessa pelo celular, clica em 'Adicionar à tela inicial' e pronto — vira um app.
A tipagem forte com TypeScript aqui não é frescura. Quando você está lidando com dados financeiros e decisões que envolvem dinheiro, um campo undefined que passa batido pode custar caro. TypeScript pega isso no build.
O polling de 5 minutos é um bom ponto de partida. API gratuita tem limite, então não dá pra fazer requisição a cada 10 segundos. Mas 5 minutos pega a maioria dos movimentos relevantes. Pra quem quer algo mais agressivo, WebSocket com a Betfair API é o caminho — mas aí é outro nível de complexidade.
Deploy instantâneo com integração nativa de projetos React/Vite.
Full-stack deploy com banco e cron jobs no mesmo lugar.
Controle total do servidor. Mais trabalho, mais liberdade.
Esse dashboard é um projeto de portfólio que impressiona em entrevistas. Mostra que você sabe React, TypeScript, integração com APIs, visualização de dados e deploy. Se quiser ir mais fundo, conecte com os modelos estatísticos do artigo de Poisson/ELO/xG e com o bot de Telegram pra ter um sistema completo de análise e alertas. A CrazyStack ensina essa stack inteira na prática.