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
Key Result: Sub-second disposable room provisioning with zero permanent tracking, zero user accounts, zero database message storage, and guaranteed total data destruction upon room expiration (T).
Summary: 4momentary is a brutalist, zero-friction ephemeral communication protocol and real-time messaging system built with Next.js 16, React 19, and Tailwind CSS v4. Engineered on an architectural equation where nothing survives room expiration (T), it delivers instant disposable chat rooms, multi-channel and category hierarchies, client-side 1MB image sharing, direct WebRTC peer-to-peer relaying, a 3D coordinate-based Space Map radar, and a custom BYOK AI companion (The Moth) with directive personas and web tooling.
The Mathematical Foundation & Product Philosophy
The entire product architecture is defined as a formal mathematical equation:
room: A space with a name and an authoritative countdown clock. Nothing else to configure.
channel: An unlimited sub-stream inside a room, each maintaining its own independent chat log.
category: A logical grouping of channels that exists independently—never polluting channel slugs.
link: A single clean URL. No invite codes to accept, no account registration, no app installations.
timer: Authoritative countdown from 30 minutes to 24 hours. The host can terminate the room early at will.
⊕ (Append): Participants and messages added dynamically as they arrive.
− accounts: Subtracted. Nobody signs up, nobody logs in.
− archive: Subtracted. No chat logs or attachments survive past T.
− tracking: Subtracted. No cookies, no analytics, no user profiling, no advertising pixels.
T (Expiry): The immutable timestamp when the room and all its memory allocations cease to exist.
∅ (Empty): Not merely "soft-deleted" or marked as archived—there is literally nothing left to delete.
The Problem & Strategic Opportunity
Surveillance & Permanent Archives: Modern chat services (Discord, Slack, Telegram, WhatsApp) permanently store messages, attachments, user graphs, and behavioral metadata on cloud servers. Spinning up a temporary discussion leaves behind permanent digital residue.
Onboarding Friction: Creating a temporary room for an incident call, interview, design critique, study group, or game prep currently requires accounts, OAuth logins, email verifications, and app downloads.
Bloated Interfaces: Mainstream messaging clients surround communication with notifications, badges, server lists, and distracting UI chrome.
The Opportunity: Build a disposable communication utility with stark brutalist aesthetics, instant one-click room creation, zero-persistence privacy guarantees, and lightweight AI assistance.
Architecture & Technical Decisions
1. In-Memory Edge Relay & Redis TTL Expiration
Zero-Database Core: Rooms run entirely in transient server memory (/api/room/[roomId]).
Redis TTL Fallback: When backed by Upstash Redis, rooms are stored with an active Time-To-Live (TTL) equal to their remaining duration. When the clock hits zero, Redis automatically purges all room keys without manual garbage collection routines.
Server-Authoritative Clock: Expiration timestamps (expiresAt) are calculated and validated strictly on the server. Once expired, the API immediately rejects all message dispatches with HTTP 403.
2. Direct WebRTC Peer-to-Peer Mesh
Direct P2P Data Channels: Browsers in the same room attempt direct peer-to-peer WebRTC connections via PeerJS and public STUN servers for ultra-low latency messaging.
Resilient Fallback: If firewall or NAT policies prevent direct peer connection, the client seamlessly falls back to the in-memory edge relay.
Multi-Tab BroadcastChannel: Local browser tabs synchronize room state instantly through the BroadcastChannel API without triggering unnecessary network hops.
3. Multi-Channel & Category Hierarchy
Zero Schema Overhead: Channels are represented as metadata tags (Message.channelId) on messages. There are no separate server database tables for channels.
Dynamic Category Groupings: Channels can be grouped into collapsible categories (Message.categoryId), allowing Discord-like organization with zero backend configuration.
Channel Scoping: Active transcript views, mention counts, and search filters isolate messages to the selected channel, while global system announcements remain visible across all channels.
4. 3D Space Radar Map & Telemetry
Spatial Room Projection: Every room is assigned 3D spatial coordinates (X, Y, Z).
Interactive 3D Radar: Users can explore active rooms on a 3-axis orbital radar map with pan, orbit, zoom, and coordinate warping capabilities.
Live User Swarm: Connected users render as animated dithered butterflies moving through virtual space, reflecting ambient live activity.
5. Client-Side 1MB Media Pipeline & Beehive Accent Picker
Browser-Side Canvas Downscaling: Images pasted via clipboard (Ctrl+V) or file picker are automatically downscaled on an HTML5 canvas to guarantee they stay strictly beneath the 1MB ceiling.
Ephemeral Media: Staged preview chips allow pre-flight inspection; sent images are rendered in full-screen brutalist lightboxes and vanish when the room expires.
Beehive 39-Cell Identity Hexagon: An interlocking pointy-topped SVG hexagonal comb allowing users to pick custom monochrome or vibrant accent colors with automatic luminance contrast calculation (isLightColor).
6. The Moth: BYOK AI Companion & Directive Marketplace
Bring-Your-Own-Key (BYOK): Powered by user-supplied DeepSeek API keys stored solely in sessionStorage—keys are never stored on servers or written into room logs.
Persona Directive Marketplace: A browsable catalog of specialized system directives including Dota Coach (equipped with real-time Dotabuff/Dotafury patch filter grammar), Sports Analyst, Math & Science, Research, and Professional.
Live Web Access: Built-in server-guarded DuckDuckGo search and page reading tools with in-memory caching and privacy stripping.
Cross-Room Stationed Subcompanions: Users can deploy subcompanions (deploy_companion) stationed across multiple rooms to provide continuous assistance.
7. Brutalist Multi-Theme Engine
Five Architectural Themes:
4momentary (Noir): Obsidian monochrome black (#000000 canvas, stark white borders).
Stark White: High-contrast paper brutalism (#ffffff canvas, deep black rules).
Terminal Phosphor: Retro CRT phosphor green (#050a05 canvas, glowing green typography).
Newsprint: Editorial paper and charcoal ink (#f4efe6 canvas, #141311 text).
Industrial: Blueprint cyan and slate (#091018 canvas, #00e5ff accents).
Mobile-First Layout: Locked 100dvh viewport, zero horizontal scrollbars, and tactile haptic audio feedback via Web Audio API.
Key Metrics & System Specifications
Metric / Parameter
Value / Implementation
Architectural Impact
Room Creation Latency
< 1.0s
Instant room launch with zero sign-up friction
Account Overhead
0 Users / 0 Passwords
Zero credential storage or breach surface
Data Retention
0 bytes post-expiry
Redis TTL auto-purge + Edge memory drop
Real-Time Latency
P2P (< 50ms) / Relay (< 1s)
Direct WebRTC mesh with Edge relay fallback
Media Ceiling
Strict 1MB
Client canvas auto-compression & preview
AI Integration
DeepSeek V3/R1 (BYOK)
Tab session storage, zero server persistence
3D Radar Dimension
3-Axis (X, Y, Z)
Real-time orbital navigation across active rooms
Framework Stack
Next.js 16 + React 19
Turbopack compilation and React 19 hooks
Technical Deep Dive: Privacy & Verification
What the Service Stores vs What It Discards
What is Never Collected: No email addresses, no phone numbers, no passwords, no analytics tracking pixels, and no persistent access logs linking IP addresses to room conversations.
What the Browser Keeps: The user's chosen display name, Beehive accent color, and theme preference remain in client localStorage. The DeepSeek API key and private room access tokens exist strictly in sessionStorage and are wiped when the tab closes.
What the Relay Holds While Live: Active participants roster (heartbeat every 25s), room topic, room coordinates, and in-flight message payloads.
Guaranteed Expiration: At timestamp T, the memory allocation is freed. Expired rooms return HTTP 404, preventing all subsequent reads or message dispatches.
Reflections & Future Enhancements
Lessons Learned: Managing real-time room synchronization across multiple browser tabs and devices without a persistent relational database required creative use of BroadcastChannel and in-memory TTL maps.
WebRTC Resilience: Building transparent fallback pathways between direct PeerJS data channels and server edge routes proved essential for users behind restrictive corporate NATs.
Future Roadmap: Implement encrypted end-to-end payload signing with Web Crypto keys generated per session, and extend the 3D space map to support multi-dimensional clustering algorithms.
My Contributions
Protocol & Backend Architecture: Designed the in-memory room store, Redis TTL expiration engine, server-authoritative countdown sync, and edge API relay routes.
Frontend & UI/UX Design: Conceived and built the entire White & Black Brutalist aesthetic, 5 multi-theme palettes, 100dvh mobile layouts, and the 39-cell Beehive color picker.
3D Telemetry & Space Map: Engineered the 3D coordinate space projection, orbital camera navigation, and butterfly particle swarm.
AI Agent Integration: Implemented the BYOK DeepSeek companion (The Moth), the Directive Marketplace, Dotabuff/Dotafury parsing grammar, and web search tooling.
Testing & Craft Verification: Achieved zero build errors on Next.js 16 / React 19, zero ESLint warnings, and complete compliance with Impeccable craft standards.