Projeto de portfólio
YTB Superchat
Uma control room para streamers: captura mensagens de chat, organiza tudo em um dashboard web e envia destaques em tempo real para um overlay consumido pelo OBS.
O que é
Este projeto foi publicado como case de produto + engenharia. Ele demonstra integração ponta a ponta entre extensão de navegador, frontend estático e backend Go com atualização em tempo real.
Repositório: github.com/ericklucioh/ytb-superchat
O problema que ele resolve
Quem faz live normalmente precisa alternar entre múltiplas janelas de chat, ferramentas de moderação e fontes do OBS. O YTB Superchat reduz esse atrito ao transformar captura, triagem e destaque de mensagens em um único fluxo.
Hoje, o fluxo principal documentado é:
- YouTube live chat;
- Twitch pop-out chat;
- overlay servido pelo backend para consumo no OBS.
O suporte a Kick existe no código da extensão, mas o próprio repositório trata isso como secundário até validação no ambiente real.
Arquitetura
3 partes
extensão, portal estático e backend Go separados por responsabilidade
Tempo real
WebSocket
estado do overlay publicado por sessão e atualizado ao vivo
Entrega
OBS-ready
mensagens promovidas viram overlay em uma URL consumida no browser source
Qualidade
Build + testes
scripts de build, testes de frontend/extensão e go test no backend
Como a arquitetura funciona
O sistema foi dividido de propósito em três camadas:
Extensão do navegador
- lê o DOM das páginas de chat suportadas;
- normaliza os eventos de mensagem;
- encaminha os dados para a bridge local do dashboard.
Portal / dashboard
- recebe e organiza os eventos capturados;
- mantém filtros e estado de interface no navegador;
- permite ao streamer selecionar qual mensagem vai para a tela.
Backend em Go
- mantém o estado mais recente do overlay por sessão;
- expõe endpoints HTTP para sessão e eventos;
- transmite mudanças em tempo real via WebSocket;
- serve a URL
/overlay?session=...usada pelo OBS.
Separação importante
O repositório documenta dois conceitos de sessão: uma para ligar extensão e dashboard, e outra para o overlay. Essa separação evita que captura local e exibição no OBS se sobrescrevam acidentalmente.
Fluxo principal
- A extensão observa uma página de chat suportada.
- As mensagens são extraídas e transformadas em um formato consistente.
- O dashboard recebe esses eventos e organiza a moderação local.
- O streamer escolhe uma mensagem para destacar.
- O portal envia esse payload para o backend.
- O backend atualiza o estado da sessão e notifica clientes conectados.
- O OBS consome o overlay e reflete a mudança em tempo real.
Stack e engenharia
- JavaScript + Chrome Extension para captura e bridge local.
- Portal estático para dashboard e fluxo de seleção.
- Go 1.22 para estado de sessão, API HTTP e fanout via WebSocket.
- Scripts de build e testes automatizados para validar frontend, extensão e backend.
- Mock mode local para iterar layout e UX sem depender do chat ao vivo o tempo todo.
Tradeoffs e limites assumidos
O repositório é honesto sobre os limites da versão pública:
- a captura depende da estrutura DOM das plataformas suportadas;
- o estado de sessão do backend fica em memória;
- o setup padrão é melhor para demo, desenvolvimento local e self-hosting;
- endurecimento real de produção exigiria autenticação e borda confiável na frente do backend.
Ponto forte como portfólio
O valor deste projeto não está em uma tela isolada, e sim em coordenar extensão, UI, sessão compartilhada, tempo real e entrega final para OBS em um fluxo coerente de produto.
O que eu destacaria no portfólio
- integração entre browser extension, frontend web e backend Go;
- modelagem clara de responsabilidades e fronteiras de estado;
- entrega de overlay em tempo real para um caso real de uso;
- documentação pública explicando arquitetura, segurança e limitações;
- projeto com foco prático, não apenas visual.