MeshChat Realtime

MeshChat demonstrates end-to-end ownership of a realtime product surface: authenticated REST APIs, channel-scoped events, presence via heartbeat plus broadcast sync, and a responsive client with explicit loading and error recovery. Suitable as a case study for SaaS messaging, ops dashboards, or collaboration tooling.

Features

• Signup and login with JWT
• Group conversations with participant management
• Live messages, typing indicators, and global presence
• Delete conversations and associated messages
• Health endpoints for process and Pusher connectivity
• Client-side loading, error, and retry states for core data paths

Tech stack

Layer	Choice
UI	React 18, Vite
API	Node.js, Express
Data	MongoDB, Mongoose
Realtime	Pusher Channels
Auth	JWT (Bearer), bcrypt password hash

Prerequisites

• Node.js 18 or newer
• MongoDB instance (local or hosted)
• Pusher Channels app (app id, key, secret, cluster)

Setup

Install dependencies from the repository root:

npm install --prefix server
npm install --prefix client

Copy environment templates (variable names are fixed for existing deployments):

• server/.env.example → server/.env
• client/.env.example → client/.env

Required server variables: PORT, MONGO_URI, CLIENT_ORIGIN, JWT_SECRET, PUSHER_APP_ID, PUSHER_KEY, PUSHER_SECRET, PUSHER_CLUSTER.

Required client variables: VITE_API_BASE_URL, VITE_PUSHER_KEY, VITE_PUSHER_CLUSTER.

Run locally

npm run dev

• Client: http://localhost:5173
• API: http://localhost:4000

Production build

npm run build
npm run start

Serve the client/dist assets with any static host or CDN; point VITE_API_BASE_URL at the deployed API during the client build.

Goal

Ship a maintainable realtime chat foundation: clear separation between HTTP transport, application services, and UI, with predictable error handling and environment-driven configuration.

Mermaid diagram

flowchart TB
  subgraph client [React client]
    UI[UI sections and components]
    HTTP[HTTP client service]
    RT[Pusher client]
  end

  subgraph api [Express API]
    R[Routes]
    C[Controllers]
    S[Services]
    M[Auth middleware]
    E[Error handler]
  end

  subgraph data [Data and providers]
    DB[(MongoDB)]
    PS[Pusher HTTP API]
  end

  UI --> HTTP
  UI --> RT
  HTTP --> R
  R --> M
  R --> C
  C --> S
  S --> DB
  S --> PS
  RT --> PS
  E --> UI

Loading