Ein Echtzeit-Emotions-Tracker, bei dem jeder teilen kann, wie er sich fühlt, und sieht, wie die Welt gerade gestimmt ist. Gebaut mit purem JavaScript, einem CSS-3D-Globus und Supabase-Echtzeit-Subscriptions.
Die meisten Entwickler greifen zu React oder Vue, bevor sie eine einzige Zeile Logik schreiben. Für HITWF habe ich das Gegenteil gewählt. Pures JavaScript, handgeschriebene DOM-Manipulation, null Abhängigkeiten.
Das Ergebnis ist eine schnelle, leichtgewichtige App, in der jede Zeile Code einen Grund hat. Kein Virtual-DOM-Overhead, kein Build-Framework, keine Abstraktionsschichten zwischen Code und Browser. Das gesamte Frontend umfasst unter 2.000 Zeilen JavaScript und lädt sofort. Terser und CSSO übernehmen die Minifizierung für die Produktion, deployed auf Vercel.
1realtimeChannel = supabaseClient2.channel('emotions-realtime')3.on('postgres_changes',4{ event: 'INSERT', schema: 'public', table: 'emotions' },5(payload) => {6const newEmotion = payload.new;7createLocationCard(newEmotion.emotion, newEmotion.location);8debouncedRefreshStats();9}10)11.subscribe((status) => {12const statusDot = document.getElementById('statusDot');13if (status === 'SUBSCRIBED') {14isConnected = true;15statusDot.className = 'status-dot connected';16}17});
Wenn jemand in Tokio teilt, dass er dankbar ist, sieht jeder verbundene Nutzer es sofort. Nicht nach einem Refresh, nicht nach einem Poll. Sofort.
Supabase Realtime übernimmt die WebSocket-Schicht und pusht jede neue Emotions-Übermittlung an alle verbundenen Clients. Statistiken ordnen sich live mit FLIP-Animationen um — flüssige, gestaffelte Übergänge, die die Daten lebendig wirken lassen. Ein gedrosselter Refresh hält die Serverlast beherrschbar. Doppeltes Rate-Limiting (clientseitige Cooldowns plus ein PostgreSQL-Trigger mit maximal 10 Übermittlungen pro Stunde) verhindert Missbrauch, ohne das Erlebnis zu beeinträchtigen.
Emotionen sind persönlich. HITWF behandelt sie auch so. Keine Konten, kein Login, keine E-Mail. Nutzer teilen eine Emotion und optional ihre Stadt — sonst nichts.
Ein einheitlicher ConsentManager verwaltet Analytics- und Geolocation-Berechtigungen mit explizitem Opt-in. Standortdaten kommen von der BigDataCloud-API mit einem 5-Minuten-Cache zur Minimierung der Anfragen. Client-Fingerprinting nutzt eine zufällige UUID, lokal gespeichert — nur für Rate-Limiting, nie zur Identifikation. Die Datenbank speichert Emotion, optionalen Standort und einen Zeitstempel. Das war’s.
Das Herzstück von HITWF ist ein 3D-Drahtmodell-Globus — komplett mit CSS-Transforms gebaut, nicht mit WebGL oder Canvas. Meridiane und Breitenkreise werden mathematisch mit 3D-Rotationsmatrizen positioniert und bilden eine glatte, kontinuierlich rotierende Kugel.
Der Globus reagiert auf Mausbewegungen am Desktop, wechselt die Farbe basierend auf der dominanten globalen Emotion (acht verschiedene Farbschemata) und zeigt schwebende Standortkarten, wenn neue Emotionen aus der ganzen Welt eintreffen. Dreißig animierte Partikel verleihen der Szene Tiefe. Die gesamte Visualisierung läuft auf CSS-Transitions und requestAnimationFrame — keine 3D-Bibliothek nötig.
HITWF beweist, dass man kein Framework braucht, um eine Echtzeit-, interaktive, Privacy-First-Webanwendung zu bauen. Manchmal reichen pures JavaScript, gute Architektur und durchdachtes Design.