Tech-Stack: Next.js 16 (App Router, Turbopack), React 19, TypeScript, Tailwind CSS v4, Lucide React, Upstash Redis, PeerJS (WebRTC), DeepSeek AI API, Web Audio API, Canvas API
Hauptergebnis: Erstellung temporärer Chat-Räume in unter einer Sekunde mit vollständig null dauerhaftem Tracking, null Benutzerkonten, null Nachrichtenspeicherung in Datenbanken und garantierter Datenvernichtung bei Ablauf des Raums (T).
Zusammenfassung: 4momentary ist ein brutalistisches, reibungsloses ephemeres Kommunikationsprotokoll und Echtzeit-Messagingsystem, entwickelt mit Next.js 16, React 19 und Tailwind CSS v4. Basierend auf dem mathematischen Prinzip, dass nach Ablauf des Raumes (T) keinerlei Daten verbleiben, bietet es temporäre Multikanal-Räume, browseroptimierten 1-MB-Bildertransfer, WebRTC-Peer-to-Peer-Übertragung, eine interaktive 3D-Weltraum-Radarkarte sowie einen clientseitigen BYOK-KI-Begleiter (The Moth) mit Persona-Direktiven und Live-Web-Tools.
Mathematisches Fundament & Produktphilosophie
Die gesamte Architektur des Systems ist als formale mathematische Gleichung definiert:
room (Raum): Ein Bereich mit einem Namen und einer verbindlichen Countdown-Uhr. Keine weiteren Einstellungen nötig.
channel (Kanal): Unbegrenzte Unterkanäle innerhalb eines Raumes, jeweils mit eigenem Chatverlauf.
category (Kategorie): Eine logische Bündelung von Kanälen, die für sich steht und Kanalnamen niemals verändert.
link (Link): Eine saubere URL. Keine Einladungen anzunehmen, keine Registrierung, keine Installation.
timer (Timer): Verbindlicher Countdown von 30 Minuten bis 24 Stunden. Der Host kann den Raum vorzeitig schließen.
⊕ (Hinzufügen): Teilnehmer und Nachrichten werden bei Eintreffen dynamisch angefügt.
− accounts (Abzug: Konten): Niemand registriert sich, niemand loggt sich ein.
− archive (Abzug: Archiv): Keine Nachrichten oder Anhänge überleben T.
− tracking (Abzug: Tracking): Keine Cookies, keine Analysen, kein Profiling, keine Werbepixel.
T (Ablauf): Der unveränderliche Zeitpunkt, an dem der Raum und all seine Speicherzuweisungen endgültig aufhören zu existieren.
∅ (Leere Menge): Nicht bloß „soft-deleted“ – es existiert schlichtweg nichts mehr, was gelöscht werden könnte.
Das Problem & die strategische Chance
Überwachung & permanente Archive: Moderne Chatplattformen (Discord, Slack, Telegram, WhatsApp) speichern Unterhaltungen, Dateianhänge, Beziehungsgraphen und Metadaten dauerhaft auf Cloud-Servern. Ein kurzes Treffen hinterlässt dauerhafte digitale Spuren.
Einstiegshürden: Für kurze Vorfälle, Bewerbungsgespräche, Design-Kritiken oder Gaming-Vorbereitungen müssen bisher Accounts angelegt, OAuth-Logins durchgeführt und Apps heruntergeladen werden.
Überladene Oberflächen: Konventionelle Anwendungen überfluten Nutzer mit Benachrichtigungen, Badges, Serverlisten und visuellen Spielereien.
Die Chance: Ein fokussiertes Werkzeug mit markantem Schwarz-Weiß-Brutalismus, Ein-Klick-Räumen, absoluten Datenschutzgarantien und leichtgewichtiger KI-Assistenz.
Architektur & Technische Entscheidungen
1. In-Memory Edge Relay & Redis TTL-Ablauf
Kern ohne Datenbank: Räume laufen vollständig im flüchtigen Arbeitsspeicher des Servers (/api/room/[roomId]).
Redis TTL-Absicherung: In Verbindung mit Upstash Redis erhalten Räume eine Time-To-Live (TTL), die ihrer Restdauer entspricht. Bei null löscht Redis alle Schlüssel automatisch ohne Garbage-Collector-Prozesse.
Serverautoritative Uhr: Die Ablaufzeit (expiresAt) wird strikt auf dem Server geprüft. Nach Ablauf blockiert die API alle weiteren Nachrichten mit HTTP 403.
2. Direktes WebRTC-Peer-to-Peer-Mesh
Direkte P2P-Datenkanäle: Browser im selben Raum versuchen über PeerJS und öffentliche STUN-Server eine direkte WebRTC-Verbindung für minimale Latenz aufzubauen.
Zuverlässiger Fallback: Verhindern Unternehmensfirewalls oder symmetrische NATs eine Direktverbindung, fällt der Client nahtlos auf das Edge-Relay des Servers zurück.
Multi-Tab BroadcastChannel: Geöffnete Tabs auf demselben Gerät synchronisieren sich verzögerungsfrei über die BroadcastChannel-API ohne Netzwerklast.
3. Multikanal- & Kategorie-Hierarchie
Kein Schema-Overhead: Kanäle sind einfache Metadaten-Tags (Message.channelId) an Nachrichten, ohne separate Datenbanktabellen.
Einklappbare Kategorien: Kanäle lassen sich in Ordnern strukturieren (Message.categoryId) – wie in Discord, jedoch ohne Backend-Konfiguration.
Kanal-Isolation: Nachrichtenübersicht, Erwähnungen und Suche beziehen sich nur auf den aktiven Kanal; Systemmeldungen des Raumes bleiben global sichtbar.
4. 3D-Weltraum-Radarkarte & Telemetrie
Räumliche 3D-Koordinaten: Jedem Raum werden Koordinaten im virtuellen Raum (X, Y, Z) zugewiesen.
Interaktives Orbitalradar: Erkundung aktiver Räume auf einem 3-Achsen-Radar mit Steuerung für Orbit, Schwenken, Zoom und Koordinaten-Warp.
Dynamischer Nutzerspan: Verbundene Teilnehmer werden als animierte Dither-Schmetterlinge im virtuellen Raum dargestellt, was die Aktivität lebendig visualisiert.
Canvas-Bildkomprimierung: Eingefügte Bilder (Strg+V) oder Dateiauswahlen werden im HTML5-Canvas automatisch herunterskaliert, um das 1-MB-Limit einzuhalten.
Vergängliche Medien: Vorschau vor dem Senden, Vollbild-Lightbox-Ansicht im brutalistischen Design und unwiderrufliche Löschung beim Schließen des Raumes.
39-teiliges Beehive-Wabenfeld: Ineinandergreifende spitze SVG-Sechsecke mit automatischer Kontrasterkennung (isLightColor) für optimale Lesbarkeit.
6. The Moth: BYOK-KI-Begleiter & Direktiven-Marktplatz
Bring-Your-Own-Key (BYOK): Nutzt den DeepSeek-API-Schlüssel des Nutzers, der ausschließlich im sessionStorage des Browsers gehalten und niemals auf Servern gespeichert wird.
Direktiven-Marktplatz: Spezialisierte Verhaltensweisen wie Dota Coach (mit Dotabuff/Dotafury-Patch-Filter-Grammatik), Sportanalyst, Mathematik & Naturwissenschaft, Recherche und Business.
Sichere Web-Tools: DuckDuckGo-Suche und geschützter Seitenabruf über den Server mit In-Memory-Caching und Entfernung persönlicher Identifikatoren.
Raumübergreifende Subbegleiter: Möglichkeit, Subbegleiter in anderen Räumen zu stationieren.
Newsprint: Zeitungsdruck mit Kohle auf Papier (#f4efe6, Text #141311).
Industrial: Blaupausen-Cyan und Schiefer (#091018, Akzente #00e5ff).
Mobile-First-Aufbau: Auf 100dvh fixiertes Layout ohne horizontale Scrollbalken, untermalt von minimalistischem Soundfeedback über die Web Audio API.
Wichtige Metriken & Systemspezifikationen
Metrik / Parameter
Wert / Implementierung
Nutzen für die Architektur
Raumerstellungszeit
< 1.0s
Sofortige Nutzung ohne Registrierung
Kontenverwaltung
0 Nutzer / 0 Passwörter
Kein Risiko von Zugangsdaten-Leaks
Datenverbleib
0 Byte nach Ablauf
Automatische Redis-TTL-Löschung & RAM-Freigabe
Echtzeit-Latenz
P2P (< 50ms) / Relay (< 1s)
P2P-Mesh mit Server-Relay als Absicherung
Dateiobergrenze
Strikt 1 MB
Clientseitige Canvas-Komprimierung
KI-Begleiter
DeepSeek V3/R1 (BYOK)
Nur in Sitzungsspeicher, keine Serverpersistenz
3D-Radar
3-Achsen (X, Y, Z)
Räumliche Navigation aktiver Räume
Framework-Stack
Next.js 16 + React 19
Turbopack-Builds und React 19 Hooks
Datenschutz, Sicherheit & rechtliche Garantien
Was niemals erfasst wird: Keine E-Mail-Adressen, keine Telefonnummern, keine persönlichen Passwörter, keine Tracking-Pixel und keine dauerhaften Server-Logs, die IPs mit Raum-Inhalten verknüpfen.
Was der Browser speichert: Anzeigename, Beehive-Akzentfarbe und Theme-Wahl verbleiben im localStorage. DeepSeek-API-Schlüssel und Raum-Tokens liegen nur im sessionStorage und verfallen beim Schließen des Tabs.
Was das Relay während der Laufzeit hält: Teilnehmerliste (Heartbeat alle 25 Sekunden), Raum-Thema, 3D-Koordinaten und Nachrichten im Transit.
Garantierte Löschung: Zum Zeitpunkt T wird der gesamte Speicher freigegeben. Abgelaufene Räume liefern HTTP 404 zurück.
Reflexionen & Weiterentwicklung
Erkenntnisse: Die Echtzeitsynchronisation ohne relationale Datenbank meisterte das Projekt durch die clevere Kombination von BroadcastChannel und In-Memory-TTL-Strukturen.
WebRTC-Zuverlässigkeit: Die nahtlose Fallback-Brücke zwischen PeerJS-Direktverbindungen und Edge-Routen ist unverzichtbar für Anwender hinter strikten Firmen-Firewalls.
Zukunftsperspektiven: Geplant sind sitzungsbasierte Ende-zu-Ende-Verschlüsselungssignaturen über Web Crypto sowie multidimensionale Cluster auf der 3D-Weltraumkarte.
Eigene Beiträge
Protokoll & Backend-Architektur: Entwicklung des In-Memory-Raumspeichers, der Redis-TTL-Logik, der Countdown-Synchronisation und der Edge-API-Routen.
Frontend & UI/UX-Design: Gestaltung der Schwarz-Weiß-Brutalismus-Ästhetik, der 5 Themes, des mobilen 100dvh-Layouts und des 39-Zellen-Beehive-Pickers.
3D-Telemetrie & Raumkarte: Konzeption der 3D-Koordinatenprojektion, Orbitalsteuerung und des Partikel-Schwarms.
KI-Integration: Einbindung des BYOK-DeepSeek-Begleiters (The Moth), des Direktiven-Marktplatzes, der Dota-Patch-Grammatik und der Web-Suchwerkzeuge.
Qualitätssicherung: 0 Build-Fehler unter Next.js 16 / React 19, 0 ESLint-Warnungen und vollständige Erfüllung der Impeccable-Standards.
Live-Deployment & Repository
Live-Anwendung: Live in Produktion auf Vercel verfügbar unter 4momentary.vercel.app.
Repository-Zugriff: Privates Repository (Vollständig von Grund auf eigenständig entwickeltes Projekt).