Clubinho Academy — Plataforma de Membros & LMS Enterprise

Contexto e Desafio de Engenharia

A construção de plataformas modernas de streaming de vídeo e gerenciamento de aprendizado (LMS/CMS) exige alta performance na entrega de arquivos, segurança rígida de propriedade intelectual e capacidade de escala elástica sem explosão de custos de infraestrutura.

O Clubinho Academy foi concebido como uma plataforma de streaming focada no desenvolvimento familiar, atualmente operando em produção estável na Vercel e atendendo a uma volumetria real de mais de 10.000 usuários ativos. O grande desafio técnico do projeto consistiu em projetar um ecossistema serverless robusto que garantisse uma experiência fluida de reprodução e download de conteúdos privados, blindagem multinível de dados de usuários e telemetria de engajamento assíncrona, anulando gargalos de rede comuns em grandes volumes de acessos concomitantes.

Engenharia da Arquitetura e Divisão de Camadas

1. Apresentação & UX Premium (Client-side & Vercel Edge)

• Arquitetura Front-end: Desenvolvida em React e TypeScript, utilizando o Vite como build tool e empacotada via Bun para garantir tempos mínimos de build e deploy ágil. A aplicação é distribuída globalmente através da infraestrutura de borda da Vercel, reduzindo o Time to First Byte (TTFB).
• Design System & Micro-interações: Interface responsiva construída com Tailwind CSS com foco em usabilidade infantil e familiar (cantos arredondados rounded-xl e sombras suaves). A tipografia adota a fonte Nunito para cabeçalhos e Inter para leitura de alto contraste. O Framer Motion governa transições fluidas de abas, barras de progresso dinâmicas e reações animadas em tempo real.
• Engine de Reprodução & Timeline: Player de vídeo inteligente que se adapta dinamicamente ao formato do conteúdo (vídeo, imagens, texto rico ou anexos), integrado a uma barra lateral de progresso visual cronológico que manipula o estado das aulas por meio de checkmarks reativos.

2. Persistência de Dados e Isolamento Enterprise (Supabase & PostgreSQL)

• Isolamento de Arquitetura: Para mitigar poluição de dados e centralizar a superfície de ataques, todo o ecossistema do banco PostgreSQL é hospedado sob um schema estruturado e isolado (clubinhoacademy).
• Zero-Trust via Row-Level Security (RLS): Segurança nativa forçada a nível de banco de dados. Políticas estritas garantem integridade referencial e barram adulterações via API, validando que registros de comentários e reações de aulas pertençam estritamente ao usuário requisitante (auth.uid() = user_id).
• Storage Privado e URLs Assinadas: Materiais didáticos extras são armazenados em buckets ocultos do Supabase Storage. O download seguro é controlado por Supabase Edge Functions (Deno/TypeScript), que geram URLs com assinaturas temporárias baseadas em service keys restritas, prevenindo vazamentos e links órfãos.

3. Engenharia de Contorno de Navegadores & Resiliência

• Contorno de Restrições do iOS/Safari: O sistema implementa uma camada de compatibilidade específica para dispositivos móveis:
  • Bloqueadores de Popups: Captura o clique do usuário em contexto síncrono para iniciar a abertura da aba de download antes de resolver a promessa do link privado da Edge Function.
  • Cross-Origin Blobs: Para mitigar o comportamento do Safari de ignorar o atributo download em mídias cross-origin, a plataforma baixa o arquivo assintoticamente como um fluxo binário (Blob via stream), mapeia o progresso e gera uma URL local temporária para forçar a retenção do nome original do arquivo.
• Orquestração de Falhas Orientada a Eventos (n8n): Em caso de falha de conexão na esteira de downloads protegidos da Edge Function, um webhook assíncrono é disparado para o n8n transportando metadados estruturados (plataforma, navegador, payload do erro e ID do usuário). O fluxo no n8n processa o alerta e aciona rotinas automáticas de observabilidade e suporte ativo.

Destaques Técnicos e Desafios Superados

• Logging de Auditoria Assíncrono Fire-and-Forget: Desenvolvimento de um módulo de log de telemetria altamente resiliente (EngagementEvents e audit_events) configurado para disparar em segundo plano sem travar a thread de navegação principal da interface. O padrão adota uma tratativa de erro que garante que falhas de analytics nunca interrompam a experiência de streaming do aluno.
• Mapeamento de Engajamento Fino: Captura comportamental detalhada de interações críticas no front-end (video_view, lesson_view, product_view), alimentando de forma assíncrona um painel administrativo com métricas reais de retenção de alunos.
• Rastreamento Administrativo: Estruturação de uma tabela central de auditoria que documenta de forma imutável o payload exato de qualquer modificação estrutural em módulos, vitrines dinâmicas ou banners de campanhas realizada por operadores do painel.

Resultados e Impacto de Engenharia

• Escala de Produção Comprovada: Arquitetura serverless de alta disponibilidade operando sob volumetria de mais de 10.000 usuários ativos, registrando zero downtime e latência controlada.
• Compatibilidade Omnichannel: Resolução completa de inconsistências de downloads de arquivos binários protegidos entre ecossistemas desktop e mobile (iOS/Android).
• Vazamento Zero de Links: Governança absoluta de arquivos e dados de alunos por meio da centralização de lógicas no PostgreSQL RLS e links assinados de curta duração gerados na borda.