BokBok — Real-Time Chat Rooms

Project Overview

BokBok is a frictionless, ephemeral public chat platform. Create or join real-time chat rooms instantly — no account, no sign-up required. Rooms expire automatically, and all messages are deleted when they do.

The platform is split into two repositories: the frontend (React + Vite + TailwindCSS + DaisyUI) and the backend (Express + MongoDB + Socket.IO). Together they deliver a lightweight, privacy-first chat experience that lives only as long as you need it.

Core Problem & Solution

Most messaging apps require you to create an account, verify an email, or accept tracking cookies just to send a quick message. BokBok removes all of that friction.

The solution is a zero-account, time-boxed chat room system:

• Create a room with a name and an expiry window
• Share the room link with anyone — no invite codes needed
• Chat in real time, then let the room expire and vanish automatically

This makes BokBok ideal for one-off conversations, event co-ordination, or any situation where permanence is a liability.

Key Features

⚡ Real-Time Messaging via Socket.IO

Messages are broadcast instantly across all connected clients using a persistent WebSocket connection. There is no polling and no page refresh required.

🔐 No Account Required

Users pick a nickname when they join a room. The nickname is stored in localStorage under a room-specific key (bokbok_name_<roomId>), so returning to the same room skips the name prompt automatically.

⏳ Expiring Rooms

When creating a room, the host sets an expiry duration. Once the clock runs out, the room and every message inside it are automatically deleted from the database. A live countdown timer in the room header shows how much time remains, changing colour as the deadline approaches.

💬 Typing Indicators & Online Count

A real-time typing indicator shows when other participants are composing a message. A live online user count gives the room a sense of presence.

😀 Emoji Picker

An emoji picker is embedded directly in the message composer, so users can react expressively without leaving the chat interface.

🔗 One-Click Invite Link

Rooms can be shared via a native share sheet on mobile or a one-click copy button on desktop. No extra apps or logins needed for the recipient.

🌍 Multiple Themes

Built on DaisyUI, BokBok ships with Light, Dark, Synthwave, Halloween, and several other themes. The selected theme is persisted in localStorage and applied before React mounts to prevent a flash on reload.

📱 Fully Responsive

Optimised for mobile, tablet, and desktop. The room layout adapts cleanly at every breakpoint.

🔍 SEO Ready

Per-page meta tags, Open Graph, and Twitter Card support are handled via react-helmet-async, so shared links render rich previews on social platforms.

Technical Architecture & Deep Dive

Backend Architecture

The backend is a Node.js server built with:

• Express.js — RESTful API for room and message management
• Mongoose — Schema definition and MongoDB ODM
• Socket.IO — Real-time bidirectional event communication
• TTL Indexes — MongoDB automatically expires room documents after the configured duration

Key API routes:

Socket.IO events handle join/leave, message broadcast, typing indicators, and user count updates.

Frontend Architecture

The frontend is a React SPA powered by Vite with:

• React Router — Client-side routing with animated page transitions
• Axios — HTTP requests to VITE_BACKEND_URL
• Socket.IO Client — Connects to VITE_SOCKET_URL for live events
• react-helmet-async — Per-page SEO meta management
• DaisyUI + Tailwind CSS — Component library and utility-first styling

How Room Auth Works

BokBok uses localStorage instead of server-side accounts:

1. On joining a room, the chosen nickname is saved as bokbok_name_<roomId>.
2. On revisiting the same room URL, the saved nickname is restored — skipping the name prompt.
3. Joined room history is tracked in bokbok_joined_rooms for quick rejoin.
4. Theme preference is persisted under the theme key and applied before React loads.

Application Routes

Development Process & Challenges

Ephemeral Room Cleanup

Ensuring rooms and messages were reliably purged after expiry — without a long-running cron job blocking the event loop — was solved by combining MongoDB TTL indexes on the expiresAt field with a lightweight cleanup utility that runs at server startup to catch any stragglers.

Real-Time Presence Management

Tracking which users are in which rooms across potentially many concurrent Socket.IO connections required maintaining an in-memory map on the server and broadcasting diff events (user joined / user left) efficiently to avoid redundant re-renders on the client.

Zero-Account Identity

Designing a UX that feels seamless without any authentication required rethinking every flow. The localStorage-based identity approach means users are never blocked by a sign-up wall, but it also means the app must gracefully handle cleared storage and re-prompt for a nickname when needed.

Key Learnings

• WebSocket lifecycle management and event-driven architecture with Socket.IO
• Stateless, identity-free user flows using browser localStorage
• MongoDB TTL indexes for automatic document expiry
• Building responsive, multi-theme UIs with DaisyUI
• SEO metadata management in React SPAs using react-helmet-async