Diagnóstico ao vivo para o workshop Appolo

1. 01

   Tela pensada para projeção: QR code de entrada pelo WhatsApp, barras ao vivo da pergunta ativa, a média de cada seção por alguns segundos quando ela termina e, no final, os resultados da sala: média por seção, estágio das empresas, principais gargalos, a forma mais comum de organizar a agenda e nuvem de palavras.

2. 02

   Painel do host para notebook ou celular: o acesso é por PIN, os comandos são enviados um de cada vez (um clique duplo em “Próxima” envia apenas um) e os comandos sensíveis pedem confirmação explícita.

3. 03

   Sincronização ao vivo: cada aviso do Supabase Realtime dispara uma consulta do estado completo, com no máximo duas consultas por segundo e uma consulta periódica de reserva a cada 5 segundos (a cada 3 se o canal cair).

4. 04

   Modo demo que simula um evento completo em loop com dados fictícios e passa pelo mesmo sincronizador, para revisar as telas e o design sem uma sala real.

5. 05

   Enquanto está aberta, a tela impede que o computador entre em repouso e esconde o cursor após 3 segundos sem movimento.

No workshop presencial da Appolo, os participantes respondem pelo WhatsApp a um diagnóstico empresarial de 20 perguntas em três seções (visão e liderança, organização operacional e automação), além de uma pergunta aberta de encerramento. Era preciso projetar para a sala o que ela vai respondendo, ao vivo, e permitir que o apresentador conduzisse o questionário pelo notebook ou pelo celular sem expor as chaves do backend ao navegador.

A aplicação tem duas visões. A tela ao vivo, somente leitura, mostra o QR code para entrar pelo WhatsApp, a pergunta ativa com suas barras, a média de cada seção quando ela termina, uma nuvem de palavras para a pergunta aberta e os resultados da sala. O painel do host, protegido por PIN, serve para avançar e reenviar perguntas, enviar os resultados, encerrar a sessão e abrir uma nova. A aplicação lê o estado com uma RPC do Supabase, recebe avisos pelo Supabase Realtime e envia os comandos do host ao n8n por meio de funções serverless na Vercel.

• O navegador nunca vê a chave secreta do Supabase, a chave de host da sessão nem a URL do n8n: o painel conversa com três funções serverless próprias, que validam o PIN e leem do Supabase a sessão vigente a cada requisição, em vez de guardá-la em variáveis de ambiente.
• O PIN é comparado em tempo constante, sobre o seu hash, para que a duração também não dependa do tamanho, e cada tentativa malsucedida leva cerca de 600 ms.
• A tela recebe apenas dados agregados e anônimos: nunca nomes nem telefones dos participantes.
• O encerramento de cada seção é calculado apenas com a resposta da RPC e o horário do servidor; assim, a tela o mostra corretamente mesmo depois de ser recarregada.

• Se a rede falhar, a tela mantém o último conteúdo exibido, mostra um aviso discreto de “Reconectando…” e se atualiza sozinha quando a conexão volta. Uma consulta que demora mais de 8 segundos é cancelada e a seguinte tenta de novo.
• Se uma tela falhar, aparece a mensagem “Algo deu errado” e a página se recarrega sozinha depois de 10 segundos.
• Se duas pessoas estiverem com o painel aberto, só uma sessão nova é criada, e os comandos do painel que ficou olhando a anterior não são aplicados: o servidor responde com a sessão vigente, e o painel avisa e passa para ela.
• Tentar de novo repete o último comando exatamente igual; ao avançar, o comando leva a pergunta de onde parte, então uma nova tentativa não pula perguntas.

Escrevi o código deste repositório: as duas visões em React e TypeScript, as funções serverless do host, a sincronização com o Supabase, o modo demo e os testes com Vitest e Testing Library. O backend do evento (o banco de dados no Supabase e os fluxos do n8n do bot de WhatsApp) fica fora do repositório; a aplicação apenas lê o estado dele e envia os comandos do host.

• O apresentador conduz o evento pelo notebook ou pelo celular, e a sala vê ao vivo as respostas agregadas, sem nomes nem telefones.