The classic messenger. Reimagined as a full-stack web application with real-time WebSocket communication.
All the nostalgic WLM features, rebuilt with modern full-stack technology.
A modern full-stack powering a classic experience.
How messages travel from client to server and back to all connected users.
📨 Supported Message Types
🛡️ Server Middleware Pipeline
🔄 Connection Lifecycle
Client connects → WS Server assigns rate-limit tokens
Client sends AUTH {token} → Server validates → Sends HISTORY + AUTH_SUCCESS
Server broadcasts USER_STATUS_UPDATE to all clients
Client sends messages → Validated → Stored → Broadcast to all
Client disconnects → Removed from clients → Status re-broadcastGet DOT Messanger running locally — both backend and frontend.
1. Clone the repository
git clone https://github.com/aarab-abderrahmane/messager.git
cd messager2. Backend setup
cd server
npm install
# Create .env from example
cp .example.env .envPORT=5000 # Express + WS server port
MAX_TOKENS=10 # Rate limiter token bucket size
JWT_SECRET=mysecretkey # Auth secret3. Frontend setup
cd ../frontEnd
npm install4. Run both servers
# Terminal 1 — Backend
cd server && npm run dev # starts on http://localhost:5000
# Terminal 2 — Frontend
cd frontEnd && npm run dev # starts on http://localhost:3000📁 Project Structure
messager/
├── server/ # Backend
│ ├── package.json
│ └── server/
│ ├── server.js # Express + HTTP entry point
│ ├── config/socket.js # WebSocket server setup
│ ├── controllers/ # signup, GIF proxy
│ ├── handlers/ # auth, message, reaction handlers
│ ├── memory/ # In-memory userStore & chatStore
│ ├── middleware/ # auth, rateLimiter, validation
│ ├── routes/chatRoutes.js # REST API endpoints (/Dot)
│ └── services/ # broadcast, messageFactory
│
└── frontEnd/ # Frontend
├── public/ # Static assets, avatars, stickers
└── src/
├── App.tsx # Root — SignupPage or ChatPage
├── types.ts # Message, UserData, NewsItem
├── constants.ts # Avatars, stickers, emojis
└── components/
├── common/ # TitleBar, Toast
├── signup/ # SignupPage
└── chat/ # ChatPage + all dialogs
├── ChatPage.tsx
├── ThemeDialog.tsx
├── StickerDialog.tsx
├── ProfileDialog.tsx
├── PhotoPreviewDialog.tsx
├── PdfPreviewDialog.tsx
├── NewsDialog.tsx
├── GiftDialog.tsx
└── FormatButton.tsxKey props and interfaces for the main components.
TitleBar
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Window title text displayed in the blue bar |
| icon | ReactNode | — | Optional icon before the title |
| onClose | () => void | — | Callback for the ✕ close button |
| showControls | boolean | true | Show min/max/close window controls |
ChatPage
| Prop | Type | Description |
|---|---|---|
| user | UserData | Current authenticated user (token, email, username, avatar) |
| onLogout | () => void | Clears localStorage and returns to SignupPage |
Message Interface
| Field | Type | Description |
|---|---|---|
| id | string | Unique message identifier (UUID) |
| type | 'text' | 'image' | 'voice' | 'pdf' | 'sticker' | 'gif' | 'gift' | 'nudge' | 'system' | Message content type |
| content | string | Text content or base64-encoded media |
| sender | 'me' | 'them' | Message direction |
| reactions | {[emoji]: string[]} | Map of emoji → array of user emails |
| replyTo | {id, text, username} | Optional threaded reply reference |
| attachments | {name, content}[] | PDF file attachments (up to 3) |
ThemeDialog
| Prop | Type | Description |
|---|---|---|
| isOpen | boolean | Controls dialog visibility |
| onClose | () => void | Callback to close the dialog |
| onApply | (theme) => void | Applies font, colours, and font-size globally |
DOT Messanger windows — faithful to the original WLM 7 layout.