WebRTC Hub — Comunicação em tempo real, direto do navegador

O WebRTC Hub é uma aplicação web que reúne, em uma única plataforma, três formas de comunicação em tempo real: videochamada, transferência de arquivos peer-to-peer e chat em grupo. Todo o tráfego acontece diretamente entre os navegadores dos usuários, usando WebRTC — sem passar por um servidor intermediário para os dados, o que garante mais privacidade e menor latência.

Stack e arquitetura

O projeto foi construído com React 18, Vite e React Router v6, com a interface migrada para MUI v5 sobre um tema dark inspirado em estética cyberpunk — cores contrastantes, tipografia customizada e um visual que foge do padrão genérico de UI.

Na camada de arquitetura, a lógica compartilhada entre as páginas foi centralizada usando Context API combinada com hooks customizados, reduzindo duplicação de código e deixando os componentes mais enxutos e fáceis de manter.

Transferência de arquivos: o módulo mais desafiador

O módulo de transferência peer-to-peer passou por diversas rodadas de otimização até chegar num sistema robusto e performático:

Throughput: pipeline de leitura antecipada (read-ahead prefetch), chunk sizing dinâmico baseado em `dataChannel.maxMessageSize` e ajuste fino de watermarks de buffer.
Confiabilidade: envio sequencial com handshake de ACK por chunk, atualização de status em tempo real na interface e um frame de protocolo dedicado (`file-done`) para marcar o fim de cada transferência.
Arquivos grandes: streaming direto para disco via `showDirectoryPicker`, com modo híbrido memória/disco decidido automaticamente conforme o tamanho do lote.
Performance de código: substituição de buscas O(n) com `Array.find` por lookups O(1) com `Map`, e abertura de múltiplos file handles em paralelo com `Promise.all` — resolvendo deadlocks que ocorriam em lotes grandes de arquivos.

Deploy e infraestrutura

O projeto conta com um pipeline de CI/CD via GitHub Actions, com deploy automatizado para a Hostinger via SSH, e build otimizado no Vite (code splitting por chunk e lazy loading de rotas) para reduzir o tempo de carregamento inicial.

Resultado

O WebRTC Hub demonstra domínio prático de comunicação em tempo real de ponta a ponta: desde os detalhes de baixo nível do protocolo WebRTC até a experiência do usuário final, passando por arquitetura de frontend, performance e automação de deploy.

Tecnologias: React 18, Vite, React Router v6, MUI v5, WebRTC, Context API, GitHub Actions.

Demo

https://webrtc.rodrigoalvesguerra.com.br