FluxoSports — A Arquibancada Digital "Onde o torcedor joga junto."
🌱 A Inspiração Tudo começou com uma pergunta simples: por que a experiência do torcedor termina quando ele sai do estádio?
No Brasil, o futebol é mais que esporte — é cultura, identidade e comunidade. Milhões de torcedores acompanham seus clubes de casa, pelo celular, mas a experiência se resumia a assistir passivamente. Não havia um lugar que unisse transmissão ao vivo, interação em tempo real, palpites e recompensas em uma única plataforma feita para o torcedor brasileiro.
O FluxoSports nasceu dessa lacuna: criar uma arquibancada digital onde o torcedor não apenas assista, mas participe, vibre e seja recompensado.
🏗️ Como Construímos Stack Tecnológica O projeto é uma aplicação full-stack de produção real, construída com:
Camada Tecnologia Frontend React 18 + TypeScript + Vite + Tailwind CSS Realtime Socket.io + Redis (PubSub & Cache) + Node.js Cluster Streaming Ant Media Server (SRT → WebRTC/LL-HLS) Backend Supabase (PostgreSQL + Auth + RLS + RPCs + Edge Functions) Pagamentos Mercado Pago (Pix + Webhooks) Mobile Capacitor (PWA → Android/iOS nativo) Notificações Firebase Push + WhatsApp via Evolution API/n8n Infraestrutura VPS Hetzner + PM2 + Docker + Nginx Arquitetura do Sistema O FluxoSports opera com uma arquitetura distribuída em quatro camadas principais:
┌─────────────────────────────────────────────────┐ │ CLIENTES (Torcedores) │ │ PWA Web · Android · iOS · Smart TVs (webOS) │ └──────────────┬──────────────────┬────────────────┘ │ │ WebSocket/HTTP WebRTC/HLS │ │ ┌──────────────▼──────┐ ┌───────▼────────────────┐ │ Socket Server │ │ Ant Media Server │ │ (Node.js Cluster) │ │ (SRT Ingest → HLS) │ │ Chat · Overlays │ │ Ultra-low latency │ │ Campanhas · TTS │ │ Adaptive bitrate │ │ ┌────────────┐ │ └────────────────────────┘ │ │ Redis │ │ │ │ PubSub/Cache│ │ │ └────────────┘ │ └──────────────┬──────┘ │ ┌──────────────▼──────────────────────────────────┐ │ Supabase Cloud │ │ PostgreSQL · Auth · RLS · RPCs · Edge Functions │ │ Storage · Webhooks Mercado Pago │ └─────────────────────────────────────────────────┘ Escala do Projeto O FluxoSports cresceu para uma plataforma robusta:
42+ páginas entre torcedor e administrador 15+ famílias de componentes (live, pool, shop, vip, recado, partners...) 1.282 linhas de schema SQL com 30+ tabelas Versão 1.6.11 em produção Suporte a múltiplos clubes (Cruzeiro, Atlético-MG e mais) Funcionalidades Principais O sistema abrange o ciclo completo da experiência do torcedor:
📺 Transmissão ao Vivo — Player com WebRTC (latência ( < 1s )) e fallback HLS, chat em tempo real, overlays OBS e sistema de campanhas de patrocinadores.
🎯 Bolões de Placar — O torcedor faz seu palpite, paga via Pix, e o sistema calcula ganhadores automaticamente. A lógica de distribuição de prêmios segue:
$$P_{\text{winner}} = \frac{T_{\text{approved}} \times (1 - f_{\text{house}})}{N_{\text{winners}}}$$
Onde ( T_{\text{approved}} ) é o total de apostas aprovadas, ( f_{\text{house}} ) é a taxa da casa e ( N_{\text{winners}} ) é o número de acertadores. Se ( N_{\text{winners}} = 0 ), o valor acumula para o próximo bolão.
🎰 Sorteios e Rifas — Sistema "Resta Um" ao vivo com eliminação em tempo real.
🛒 Loja — E-commerce integrado com produtos, variações, estoque e checkout via Mercado Pago.
⭐ VIP & Recados — Sistema de assinaturas VIP com badges, recados pagos com TTS (texto para áudio) no overlay da transmissão.
📊 Dashboard Admin — Painel completo com analytics de live, gestão de usuários, pagamentos, campanhas e parcerias comerciais (pacotes Bronze/Prata/Ouro para patrocinadores).
📚 O Que Aprendi
- Realtime em escala é um mundo à parte A primeira versão usava os canais Realtime do Supabase para o chat. Funcionava bem com 10 pessoas. Com 500+ simultâneos, tudo travava. A migração para Socket.io + Redis com clusterização Node.js via PM2 foi uma das decisões mais importantes do projeto. Aprendi na prática que:
A taxa de mensagens no chat cresce de forma não linear com o número de espectadores. Com ( n ) usuários ativos, a carga de broadcast escala como ( O(n) ) por mensagem, e o volume de mensagens tende a crescer proporcionalmente, resultando em pressão ( O(n^2) ) no pior caso sem otimizações como throttling e buffer.
Pagamentos precisam de paranoia saudável Integrar Mercado Pago com bolões me ensinou que dinheiro e código exigem idempotência absoluta. Cada webhook precisa ser revalidado contra a API do provedor. O status local nunca é fonte de verdade. Antes de fechar um bolão, o sistema busca e reprocessa todos os pagamentos pendentes com payment_id — caso contrário, um torcedor que pagou poderia perder o prêmio por uma falha de webhook.
Streaming de vídeo ao vivo é o boss final Configurar o pipeline OBS → SRT → Ant Media Server → WebRTC/HLS exigiu mergulhar em protocolos de rede, codecs, bitrates adaptativos e diagnóstico de latência. A latência objetivo era:
$$\Delta t_{\text{glass-to-glass}} < 1\text{s (WebRTC)}, \quad < 6\text{s (LL-HLS)}$$
Conseguir isso de forma estável em VPS com largura de banda limitada, servindo para celulares com internet instável no Brasil, foi um dos maiores desafios técnicos.
Mobile-first não é só CSS responsivo Empacotar uma PWA React com Capacitor para Android e iOS trouxe desafios inesperados — desde gerenciamento de orientação de tela e status bar, até push notifications nativas, deep links e builds CI/CD no CodeMagic com CocoaPods vs SPM.
Produto real > código perfeito O FluxoSports roda em produção com torcedores reais. Isso me ensinou que shipping importa mais que refactoring infinito. O codebase tem cicatrizes de batalha — scripts de hotfix, patches emergenciais, deploys de madrugada antes de jogos. E está tudo bem. Cada "fix" na raiz do projeto representa um problema real resolvido sob pressão real.
🧗 Desafios Enfrentados Desafio Problema Solução Chat em massa Supabase Realtime não suportava centenas de conexões simultâneas no chat Migração para Socket.io + Redis adapter com cluster Node.js Sincronização de pagamentos Webhooks Mercado Pago chegavam fora de ordem ou com atraso Revalidação ativa via API antes de fechar bolões; fluxo idempotente Latência de vídeo Players travando em conexões móveis instáveis Fallback automático WebRTC → HLS com detecção de travamento Deploy multi-plataforma Manter PWA + Android + iOS + Smart TVs (webOS/Tizen) Capacitor + builds CI/CD + configurações por plataforma Segurança Chaves de API expostas em repositório (incidente real documentado) Rotação completa de chaves, variáveis de ambiente e revisão de segurança Escala de banco Queries lentas com crescimento de dados RPCs PostgreSQL otimizadas, RLS e índices estratégicos UX mobile-first Experiência fluida em telas pequenas com muitas funcionalidades Design por contexto de clube, lazy loading, navegação por barra inferior 🔮 Próximos Passos Testes automatizados E2E para fluxos críticos (bolão, pagamento, live) Sistema de campanhas segmentadas por comportamento do torcedor Expansão multi-clube com experiências personalizadas Dashboard de observabilidade e alertas de produção Recomendações inteligentes baseadas no perfil do torcedor 🏟️ Conclusão O FluxoSports é mais do que um projeto técnico — é a prova de que um desenvolvedor brasileiro, com determinação e as ferramentas certas, pode construir uma plataforma de produção completa que rivaliza com soluções corporativas.
De um simples sistema de rifas até uma plataforma de experiência digital esportiva com streaming ao vivo, pagamentos, e-commerce, gamificação e monetização por patrocínio — cada linha de código carrega a paixão pelo futebol e pela engenharia de software.
"O futebol é jogado com os pés, mas vencido com a cabeça." — adaptado para o código: é escrito com as mãos, mas arquitetado com visão.
🇧🇷 Desenvolvido com ❤️ para o torcedor brasileiro.
Log in or sign up for Devpost to join the conversation.