4momentary: Protocole temps réel éphémère et relais spatial 3D
Protocole de salon jetable sans base de données ni friction, alliant esthétique brutaliste noir et blanc, télémétrie spatiale 3D et compagnons IA avec clé personnelle (BYOK).
Stack Technique: Next.js 16 (App Router, Turbopack), React 19, TypeScript, Tailwind CSS v4, Lucide React, Upstash Redis, PeerJS (WebRTC), API DeepSeek AI, Web Audio API, Canvas API
Résultat Clé: Déploiement de salons jetables en moins d'une seconde, avec zéro suivi permanent, zéro compte utilisateur, zéro stockage de messages en base de données, et destruction totale des données garantie à l'expiration (T).
Résumé: 4momentary est un protocole de communication éphémère brutaliste et sans friction conçu avec Next.js 16, React 19 et Tailwind CSS v4. Fondé sur le principe mathématique selon lequel aucune donnée ne subsiste après l'expiration du salon (T), il intègre des salons jetables multicanaux, le partage d'images optimisé côté navigateur jusqu'à 1 Mo, la transmission P2P WebRTC, une carte radar spatiale 3D interactive et un compagnon IA (The Moth) avec personas directifs et outils de recherche web en direct.
Fondement Mathématique & Philosophie du Produit
L'architecture globale du système est formulée sous la forme d'une équation mathématique stricte :
T (Expiration) : L'instant immuable où le salon et l'ensemble de ses allocations mémoire cessent d'exister.
∅ (Ensemble vide) : Pas une simple suppression logique : il ne reste littéralement plus rien à effacer.
Le Problème & l'Opportunité Stratégique
Surveillance & Archives Perpétuelles : Les plateformes modernes (Discord, Slack, Telegram, WhatsApp) stockent indéfiniment conversations, fichiers, graphes relationnels et métadonnées sur des serveurs distants. Ouvrir un échange temporaire laisse une empreinte numérique indélébile.
Friction à l'Adoption : Organiser une réunion d'urgence, un entretien, une session d'étude ou la préparation d'un match exige actuellement la création d'un compte, des identifiants OAuth et l'installation d'applications lourdes.
Interfaces Encombrées : Les logiciels classiques submergent l'utilisateur de notifications, badges et menus décoratifs parasites.
L'Opportunité : Créer un outil de communication jetable au style brutaliste épuré en noir et blanc, offrant une ouverture de salon en un clic, une confidentialité garantie et une assistance IA réactive.
Architecture & Choix Techniques
1. Relais en Mémoire Edge & Expiration TTL Redis
Cœur Sans Base de Données : Les salons tournent intégralement dans la mémoire vive volatile du serveur (/api/room/[roomId]).
Filet de Sécurité Redis TTL : En combinaison avec Upstash Redis, les salons reçoivent une durée de vie (TTL) égale à leur temps restant. Dès que le compte atteint zéro, Redis efface automatiquement les clés sans nécessiter de ramasse-miettes.
Horloge Serveur Faisant Foi : L'échéance (expiresAt) est vérifiée côté serveur. Une fois le délai passé, l'API rejette immédiatement toute tentative de message avec une erreur HTTP 403.
2. Maillage Direct WebRTC Peer-to-Peer
Canaux de Données P2P Directs : Les navigateurs d'un même salon établissent une liaison WebRTC directe via PeerJS et des serveurs STUN publics pour une latence minimale.
Bascule Transparente : En cas de blocage par un pare-feu d'entreprise ou un NAT symétrique, le client bascule instantanément sur le relais en mémoire du serveur.
BroadcastChannel Multi-Onglets : Les onglets ouverts sur un même appareil se synchronisent instantanément via l'API BroadcastChannel sans solliciter le réseau externe.
3. Hiérarchie Multicanal & Catégories
Zéro Surcharge de Schéma : Les canaux sont gérés comme de simples étiquettes de métadonnées (Message.channelId) attachées aux messages, sans tables complexes en base de données.
Catégories Dépliables : Organisation des canaux en dossiers (Message.categoryId), offrant une structure proche de Discord sans aucune configuration serveur.
Cloisonnement des Salons : L'affichage, les notifications et la recherche restent isolés au canal actif, tandis que les alertes système demeurent visibles partout.
4. Carte Radar Spatiale 3D & Télémétrie
Projection Spatiale en 3D : Chaque salon se voit assigner des coordonnées spatiales virtuelles (X, Y, Z).
Radar Orbital Interactif : Les utilisateurs peuvent parcourir les salons actifs sur un radar à trois axes avec orbite, translation, zoom et saut téléporté par coordonnées.
Nuée d'Utilisateurs Connectés : Les participants en direct sont représentés par des papillons tramés en mouvement dans l'espace virtuel.
5. Traitement d'Images 1 Mo Côté Client & Sélecteur Beehive
Compression Canvas Locale : Les images collées depuis le presse-papier (Ctrl+V) ou importées sont automatiquement redimensionnées dans un canvas HTML5 pour respecter la limite stricte de 1 Mo.
Médias Éphémères : Vignette de prévisualisation avant envoi, visionneuse plein écran brutaliste et disparition totale à l'expiration.
Sélecteur Hexagonal Beehive 39 Alvéoles : Motif en nid d'abeille SVG interconnecté permettant de choisir sa couleur avec détection automatique de contraste (isLightColor).
6. The Moth : Compagnon IA BYOK & Marché de Directives
Modèle BYOK (Bring-Your-Own-Key) : Fonctionne avec la clé API DeepSeek de l'utilisateur, conservée uniquement dans le sessionStorage du navigateur (jamais stockée sur le serveur ni écrite dans le chat).
Marché de Personas Directifs : Directives spécialisées prêtes à l'emploi incluant Coach Dota (avec grammaire d'analyse de correctifs Dotabuff/Dotafury en direct), Analyste Sportif, Mathématiques & Sciences, Recherche et Professionnel.
Outils Web Sécurisés : Recherche DuckDuckGo et lecture de pages protégées via le serveur, avec mise en cache mémoire et suppression des identifiants personnels.
Sous-Compagnons Postés : Déploiement d'assistants dans d'autres salons pour une présence multi-salons.
Stark White : Brutalisme papier à fort contraste (#ffffff, tracés noir profond).
Terminal Phosphor : Vert phosphore CRT rétro (#050a05, typographie luminescente).
Newsprint : Rendu papier journal et encre de charbon (#f4efe6, texte #141311).
Industrial : Bleu cyan et ardoise de plan industriel (#091018, accents #00e5ff).
Conception Mobile-First : Hauteur verrouillée à 100dvh, aucun défilement horizontal et retours sonores discrets via la Web Audio API.
Métriques Clés & Spécifications
Métrique / Paramètre
Valeur / Implémentation
Impact Architectural
Délai de Création de Salon
< 1.0s
Démarrage instantané sans formulaire d'inscription
Gestion des Comptes
0 Utilisateur / 0 Mot de passe
Aucun risque de fuite d'identifiants
Rétention des Données
0 octet après expiration
Purge automatique Redis TTL + libération mémoire
Latence Temps Réel
P2P (< 50ms) / Relais (< 1s)
Maillage WebRTC direct avec relais Edge de secours
Plafond Fichier Image
1 Mo Strict
Compression automatique sur canvas client
Intégration IA
DeepSeek V3/R1 (BYOK)
Stockage session navigateur, sans persistance serveur
Radar Spatial 3D
3 Axes (X, Y, Z)
Navigation orbitale fluide entre les salons
Stack Logicielle
Next.js 16 + React 19
Compilation Turbopack et hooks React 19 récents
Confidentialité, Sécurité & Garanties Légales
Ce Qui N'Est Jamais Collecté : Pas d'adresse e-mail, pas de numéro de téléphone, pas de mot de passe personnel, aucun pixel publicitaire et aucun journal serveur reliant les adresses IP aux propos tenus.
Ce Que Conserve le Navigateur : Le pseudonyme, la couleur d'accent Beehive et le thème sont stockés dans le localStorage. La clé API DeepSeek et les jetons de salons privés résident uniquement dans le sessionStorage et disparaissent à la fermeture de l'onglet.
Ce Que Conserve le Relais en Direct : La liste des participants (signal de présence toutes les 25 secondes), le sujet du salon, ses coordonnées 3D et les messages en cours de transit.
Disparition Inéluctable : Au temps T, la mémoire allouée est entièrement libérée. Tout salon expiré renvoie une erreur HTTP 404.
Retours d'Expérience & Évolutions
Enseignements : Assurer la synchronisation temps réel entre onglets et terminaux sans base de données pérenne s'est appuyé sur une utilisation judicieuse de BroadcastChannel et des tables de correspondance en mémoire vive.
Résilience WebRTC : Le basculement automatique entre les canaux directs PeerJS et les routes Edge du serveur s'est avéré indispensable pour les usagers situés derrière des pare-feux d'entreprise.
Pistes Futures : Intégration de signatures cryptographiques de bout en bout via Web Crypto et ajout d'algorithmes de regroupement spatial sur la carte 3D.
Mes Contributions
Architecture Protocole & Backend : Conception du stockage en mémoire vive, du moteur d'expiration TTL Redis, de la synchronisation d'horloge et des routes de relais Edge.
Design UI/UX & Frontend : Élaboration de l'esthétique brutaliste noir et blanc, des 5 palettes de thèmes, de la mise en page mobile 100dvh et du sélecteur hexagonal Beehive.
Télémétrie & Carte 3D : Développement de la projection tridimensionnelle, de la caméra orbitale et du système de particules de papillons.
Intégration IA & Outils : Mise en place du compagnon DeepSeek BYOK (The Moth), du catalogue de directives, de l'analyseur de données Dota et des outils de recherche web.
Excellence & Tests : Zéro erreur de build sous Next.js 16 / React 19, zéro avertissement ESLint et conformité totale aux standards Impeccable.