The problem

Enterprise teams and professional communities require instantaneous messaging, event orchestration, and collaborative article authoring without latency spikes or WebSocket connection drops during network changes.

The approach

Designed a real-time messaging pipeline using WebSocket with STOMP protocol over Node.js, combined with Redux Toolkit for central channel message caching and TipTap editor for rich content creation.

Architecture

Frontend

Next.js 15, React 19, TypeScript, Redux Toolkit, Tailwind CSS, Ant Design, Radix UI.

Backend

Node.js REST API with WebSocket server brokers handling STOMP pub/sub topics.

Database

MongoDB storing users, community spaces, discussion channels, and audit logs.

Authentication

Google OAuth 2.0 and JWT token authentication supporting RBAC for Individual and Corporate accounts.

Key decisions

  • Utilizing STOMP protocol over WebSockets for structured message frame parsing (SUBSCRIBE, SEND, UNSUBSCRIBE).
  • Implementing client-side message queue buffers in Redux Toolkit to prevent UI freezes during message spikes.
  • Lazy-loading TipTap rich-text editor instances to keep initial bundle size minimal.

Working through the challenges

  • Managing WebSocket auto-reconnect logic without creating duplicate message listeners.
  • Ensuring clean multi-role permissions across complex organization onboarding flows.

What the application supports

  • Real-time team chat and channel discussions using STOMP WebSockets.
  • Rich-text article and documentation publishing with TipTap editor.
  • Stripe integrated payment flows for community memberships.
  • Role-Based Access Control (RBAC) separating Individual, Enterprise, and Admin permissions.