OmniChat MERN — Real-Time Customer Messaging Workspace

A production-oriented MERN + WebSocket application inspired by the supplied customer-support chat dashboard. It includes authenticated real-time conversation rooms, message delivery/read states, typing indicators, contact context, queue management, assignment, tags, notes, uploads, quick replies, and a responsive three-panel interface.

Stack

React + TypeScript + Vite
Node.js + Express
MongoDB + Mongoose
Socket.IO WebSockets
JWT authentication
Multer file uploads
Docker Compose and Nginx

Main capabilities

Login with seeded administrator, manager, and support-agent accounts
Open, pending, and closed conversation queues
Search by customer, phone, email, company, or conversation subject
Live inbound and outbound messages
Typing indicators and agent presence
Delivered/read receipts and unread counters
Text, image, audio, and file messages
Reply-to message structure
Agent assignment and priority management
Customer profile and channel details
Tags and internal notes
Quick-response library
Responsive desktop, tablet, and mobile layout
Tenant-aware data model and API filtering
Audit-friendly message metadata

Quick start with Docker

cp .env.example .env
docker compose up --build

Open http://localhost:8080.

The server seeds demo data automatically when the database is empty.

Local development

1. MongoDB

Run MongoDB locally on port 27017, or use Docker:

docker compose up -d mongo

2. Backend

cd server
cp .env.example .env
npm install
npm run seed
npm run dev

Backend: http://localhost:5000

3. Frontend

cd client
cp .env.example .env
npm install
npm run dev

Frontend: http://localhost:5173

Demo accounts

Role	Email	Password
Administrator	[email protected]	Admin@123
Manager	[email protected]	Manager@123
Support Agent	[email protected]	Agent@123

Socket events

Client to server:

conversation:join
conversation:leave
message:send
typing:start
typing:stop
conversation:read

Server to client:

message:new
message:delivered
message:read
typing:update
presence:update
conversation:updated

Folder structure

omnichat-mern/
├── client/                 React application
├── server/                 Express, MongoDB, Socket.IO API
├── docker-compose.yml
├── nginx.conf
└── .github/workflows/ci.yml

Production notes

Replace demo JWT and tenant secrets.
Store uploads in S3-compatible object storage rather than local disk.
Add Redis adapter for horizontally scaled Socket.IO nodes.
Put the API behind TLS and a managed reverse proxy.
Configure MongoDB backups, indexes, observability, and secret management.

Additional documentation

docs/ARCHITECTURE.md — runtime topology, tenant boundary, event flow, collections, and scaling path
docs/API.md — REST endpoints and mock inbound webhook example

ShivamMathtech/OmniChat

README