TMPA Support Chat

May 2026

Previous
AgencyPro
Next
Smart RAG

A real-time support chat module built during my internship at Tanger Med Port Authority (TMPA). Designed as a reusable messaging component, it plugs into different TMPA applications so users can reach support directly from the tool they are working in. Clients, support agents and administrators each get a dedicated interface, all kept in sync live over WebSockets.

Preview for tmpa-support-chat

Key Features

  • Floating support widget that opens a conversation automatically on the first message
  • Real-time messaging with Socket.IO, using JWT-authenticated sockets and per-conversation rooms
  • Role-based access for clients, agents and admins, enforced on both REST routes and sockets
  • Agent dashboard to pick up pending conversations, set priority and close tickets
  • Admin dashboard to manage agents and conversations and monitor chat activity
  • Seen/unseen read receipts and online presence tracking
  • Containerized frontend and backend with Docker and Docker Compose

Tech Stack

ReactViteMaterial UINode.jsExpress.jsSocket.IOMongoDBJWTDocker