A real-time emotion tracker where anyone can share how they feel and see how the world is feeling right now. Built with vanilla JavaScript, a CSS 3D globe, and Supabase real-time subscriptions.
Most developers reach for React or Vue before writing a single line of logic. For HITWF, I chose the opposite. Vanilla JavaScript, hand-written DOM manipulation, zero dependencies.
The result is a fast, lightweight app where every line of code exists for a reason. No virtual DOM overhead, no build framework, no abstraction layers between the code and the browser. The entire front-end is under 2,000 lines of JavaScript and loads instantly. Terser and CSSO handle minification for production, deployed to 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});
When someone in Tokyo shares that they’re feeling grateful, every connected user sees it immediately. Not after a refresh, not after a poll. Instantly.
Supabase Realtime handles the WebSocket layer, pushing every new emotion submission to all connected clients. Statistics reorder live using FLIP animations — smooth, staggered transitions that make the data feel alive. A debounced refresh keeps the server load manageable. Dual-layer rate limiting (client-side cooldowns plus a PostgreSQL trigger enforcing 10 submissions per hour) prevents abuse without hurting the experience.
Emotions are personal. HITWF treats them that way. No accounts, no login, no email. Users share an emotion and optionally their city — nothing else.
A unified ConsentManager handles analytics and geolocation permissions with explicit opt-in. Location data comes from the BigDataCloud API with a 5-minute cache to minimize requests. Client fingerprinting uses a random UUID stored locally — only for rate limiting, never for identification. The database stores emotion, optional location, and a timestamp. That’s it.
The centerpiece of HITWF is a 3D wireframe globe — built entirely with CSS transforms, not WebGL or Canvas. Meridians and parallels are mathematically positioned using 3D rotation matrices, creating a smooth, continuously rotating sphere.
The globe responds to mouse movement on desktop, shifts color based on the dominant global emotion (eight distinct color schemes), and displays floating location cards as new emotions arrive from around the world. Thirty animated particles add depth to the scene. The entire visualization runs on CSS transitions and requestAnimationFrame — no 3D library required.
HITWF proves you don’t need a framework to build a real-time, interactive, privacy-first web application. Sometimes vanilla JavaScript, good architecture, and thoughtful design are all it takes.