← Back to Projects

Real Time Chat Application

Socket.IO broadcasting with anonymous signups and multiple concurrent chat rooms

Real Time Chat Application
Real Time Chat — chat room UI with live messaging, typing indicators, and multiple concurrent rooms

Overview

A real-time chat application built to explore bidirectional event-driven communication with Socket.IO. Users can create and join named chat rooms, send messages, and see live typing indicators — all without an account. Message history is persisted in MongoDB and loaded on join, so latecomers see context.

Stack

Layer Technology
FrontendVanilla JavaScript, HTML, CSS
BackendNode.js / Express
Real-timeSocket.IO
DatabaseMongoDB + Mongoose
SecurityHelmet

Features

Real-time messaging

Socket.IO broadcasts messages to all members of a room instantly. Join/leave events and live typing indicators are emitted as separate socket events so the UI stays in sync without polling.

Message persistence

Messages are stored in MongoDB via Mongoose. The last 50 messages are loaded when a user joins a room, so latecomers have context without fetching the full history.

Room & user management

Multiple rooms run simultaneously and independently. Duplicate usernames are prevented per room. Active user list is maintained in-memory and synced to all room members on each join/leave.

Onboarding tour

A coach marks tutorial runs on first visit, highlighting each UI element with a tooltip. Plays once on the home page and once in the chat room. Replayable via the New here? button.