Diagnóstico en vivo para el workshop Appolo

1. 01

   Pantalla pensada para proyectarse: QR de ingreso por WhatsApp, barras en vivo de la pregunta activa, el promedio de cada sección durante unos segundos al cerrarse y, al final, los resultados de la sala: promedio por sección, etapa de las empresas, principales cuellos de botella, la forma más común de llevar la agenda y nube de palabras.

2. 02

   Panel del host para laptop o celular: se entra con PIN, las órdenes se mandan de una en una (un doble clic en «Siguiente» envía una sola) y las delicadas piden confirmación explícita.

3. 03

   Sincronización en vivo: cada aviso de Supabase Realtime dispara una consulta del estado completo, con un máximo de dos consultas por segundo y un sondeo de respaldo cada 5 segundos (cada 3 si el canal se cae).

4. 04

   Modo demo que simula un evento completo en bucle con datos inventados y pasa por el mismo sincronizador, para revisar las vistas y el diseño sin una sala real.

5. 05

   Mientras está abierta, la pantalla evita que el equipo entre en reposo y esconde el cursor a los 3 segundos sin moverlo.

En el workshop presencial de Appolo, los asistentes responden por WhatsApp un diagnóstico empresarial de 20 preguntas en tres secciones (visión y liderazgo, orden operativo y automatización), más una pregunta abierta de cierre. Hacía falta proyectar a la sala lo que va respondiendo, en vivo, y que el presentador condujera el cuestionario desde la laptop o el celular sin que el navegador viera las claves del backend.

La web tiene dos vistas. La pantalla en vivo, de solo lectura, muestra el QR para entrar por WhatsApp, la pregunta activa con sus barras, el promedio de cada sección al cerrarse, una nube de palabras para la pregunta abierta y los resultados de la sala. El panel del host, protegido con PIN, sirve para avanzar y reenviar preguntas, enviar los resultados, cerrar la sesión y abrir una nueva. La web lee el estado con una RPC de Supabase, escucha avisos por Supabase Realtime y manda las órdenes del host a n8n a través de funciones serverless en Vercel.

• El navegador nunca ve la clave secreta de Supabase, la clave de host de la sesión ni la URL de n8n: el panel habla con tres funciones serverless propias, que validan el PIN y leen de Supabase la sesión vigente en cada petición en lugar de guardarla en variables de entorno.
• El PIN se compara en tiempo constante, sobre su hash para que la duración tampoco dependa de su longitud, y cada intento fallido tarda unos 600 ms.
• La pantalla solo recibe agregados anónimos: nunca nombres ni teléfonos de los asistentes.
• El cierre de cada sección se calcula solo con la respuesta de la RPC y la hora del servidor, así que la pantalla lo muestra bien aunque se recargue.

• Si la red falla, la pantalla conserva lo último que mostró, enseña un aviso discreto de «Reconectando…» y se pone al día sola al volver la conexión. Una consulta que tarda más de 8 segundos se cancela y la siguiente la reintenta.
• Si una vista falla, aparece «Algo salió mal» y la página se recarga sola a los 10 segundos.
• Si dos personas tienen el panel abierto, solo se crea una sesión nueva, y las órdenes del panel que se quedó mirando la anterior no se aplican: el servidor responde con la sesión vigente y el panel avisa y pasa a ella.
• Reintentar repite la última orden tal cual; al avanzar, la orden lleva la pregunta de la que parte, así que un reintento no se salta preguntas.

Escribí el código de este repositorio: las dos vistas en React y TypeScript, las funciones serverless del host, la sincronización con Supabase, el modo demo y las pruebas con Vitest y Testing Library. El backend del evento (la base de datos en Supabase y los flujos de n8n del bot de WhatsApp) vive fuera del repositorio; la web solo lee su estado y le manda las órdenes del host.

• El presentador conduce el evento desde la laptop o el celular, y la sala ve en vivo sus respuestas agregadas, sin nombres ni teléfonos.