Diagnostic en direct pour l'atelier Appolo

1. 01

   Un écran conçu pour la projection : QR code pour rejoindre la session sur WhatsApp, barres en direct pour la question en cours, moyenne de chaque section pendant quelques secondes à sa clôture et, à la fin, les résultats de la salle : moyenne par section, stade des entreprises, principaux goulets d'étranglement, façon la plus courante de gérer l'agenda et nuage de mots.

2. 02

   Panneau de l'animateur pour ordinateur portable ou téléphone : l'accès se fait par code PIN, les commandes partent une par une (un double clic sur « Suivant » n'en envoie qu'une) et les commandes sensibles demandent une confirmation explicite.

3. 03

   Synchronisation en direct : chaque notification Supabase Realtime déclenche une requête de l'état complet, avec au plus deux requêtes par seconde et une interrogation de secours toutes les 5 secondes (toutes les 3 si le canal tombe).

4. 04

   Un mode démo qui simule en boucle un événement complet avec des données fictives et passe par le même synchroniseur, pour vérifier les vues et le design sans vraie salle.

5. 05

   Tant qu'il est ouvert, l'écran empêche l'ordinateur de se mettre en veille et masque le curseur après 3 secondes d'inactivité.

Lors de l'atelier Appolo en présentiel, les participants répondent sur WhatsApp à un diagnostic d'entreprise de 20 questions réparties en trois sections (vision et leadership, organisation opérationnelle et automatisation), suivies d'une question ouverte de clôture. Il fallait projeter en direct les réponses de la salle et permettre à l'animateur de piloter le questionnaire depuis un ordinateur portable ou un téléphone, sans exposer les clés du backend au navigateur.

L'application comporte deux vues. L'écran en direct, en lecture seule, affiche le QR code pour rejoindre la session sur WhatsApp, la question en cours avec ses barres, la moyenne de chaque section à sa clôture, un nuage de mots pour la question ouverte et les résultats de la salle. Le panneau de l'animateur, protégé par un code PIN, permet d'avancer et de renvoyer les questions, d'envoyer les résultats, de clôturer la session et d'en ouvrir une nouvelle. L'application lit l'état via une RPC Supabase, reçoit des notifications par Supabase Realtime et transmet les commandes de l'animateur à n8n via des fonctions serverless sur Vercel.

• Le navigateur ne voit jamais la clé secrète Supabase, la clé d'animateur de la session ni l'URL de n8n : le panneau s'adresse à trois fonctions serverless dédiées, qui vérifient le code PIN et lisent la session en cours dans Supabase à chaque requête au lieu de la stocker dans des variables d'environnement.
• Le code PIN est comparé en temps constant, sur son hash pour que la durée ne dépende pas non plus de sa longueur, et chaque tentative échouée prend environ 600 ms.
• L'écran ne reçoit que des données agrégées anonymes : jamais les noms ni les numéros de téléphone des participants.
• La clôture de chaque section est calculée uniquement à partir de la réponse de la RPC et de l'heure du serveur : l'écran l'affiche donc correctement même après un rechargement.

• Si le réseau tombe, l'écran conserve le dernier affichage, montre un discret « Reconnexion… » et se remet à jour tout seul au retour de la connexion. Une requête qui dépasse 8 secondes est annulée et la suivante la relance.
• Si une vue plante, le message « Un problème est survenu » s'affiche et la page se recharge d'elle-même au bout de 10 secondes.
• Si deux personnes ont le panneau ouvert, une seule nouvelle session est créée, et les commandes du panneau resté sur l'ancienne ne sont pas appliquées : le serveur renvoie la session en cours, et le panneau prévient puis bascule dessus.
• Réessayer répète la dernière commande à l'identique ; pour avancer, la commande indique la question de départ, si bien qu'une nouvelle tentative ne saute jamais de question.

J'ai écrit le code de ce dépôt : les deux vues en React et TypeScript, les fonctions serverless de l'animateur, la synchronisation avec Supabase, le mode démo et les tests avec Vitest et Testing Library. Le backend de l'événement (la base de données Supabase et les flux n8n du bot WhatsApp) se trouve en dehors du dépôt ; l'application se contente de lire son état et de lui transmettre les commandes de l'animateur.

• L'animateur pilote l'événement depuis un ordinateur portable ou un téléphone, et la salle voit ses réponses agrégées en direct, sans noms ni numéros de téléphone.