ChatLo.io

A full-stack real-time chat application built with WebSockets, React, and Node.js.
Deployed with a high-performance decoupled architecture.

🌐 Live Site: chat.zafarr.xyz
🔌 WebSocket API: wss://chat-api.zafarr.xyz

Features • Tech Stack • Architecture • Quick Start • Project Structure • Configuration

---

🚀 Features

Messaging

• Real-Time Global Chat: Instant broadcasting to all users.
• Private & Secret DMs: Direct 1-on-1 messaging with member selection.
• Voice Messages: Record and play audio notes with a custom UI player.
• Rich Media: Support for images, videos, files, and location pins.
• Live Camera: Capture and send photos directly from the browser.
• Typing Indicators: Real-time visual feedback when others are typing.

Groups & Rooms

• Multi-Room Support: Join multiple channels simultaneously.
• Interactive Invites: Create groups and invite members via action cards.
• Persistent Status: Users can set custom status messages and avatars.

Security & UX

• Rate Limiting: Throttling to prevent spam and abuse.
• Dark/Light Mode: Smooth theme transitions with persisted preferences.
• Responsive Design: Mobile-first UI with framer-motion animations.

---

🛠 Tech Stack

Frontend

• React 19: Modern UI component library.
• Tailwind CSS v4: Utility-first styling with modern design tokens.
• Framer Motion: Smooth micro-interactions and transitions.
• Vite: Ultra-fast build tool and dev server.

Backend

• Node.js & TypeScript: Type-safe server logic.
• ws (WebSockets): Raw socket connections for maximum performance.
• Express: HTTP management and routing.
• PM2: Production process manager with auto-restart.

Infrastructure

• Vercel: Static frontend hosting with global CDN.
• AWS EC2 (Ubuntu): High-performance backend hosting for persistent sockets.
• Cloudflare: DNS management and SSL/TLS termination.
• Nginx: Reverse proxy and load balancing.

---

🏗 Architecture

ChatLo.io uses a Decoupled Architecture:

1. Frontend (Vercel): Deployed at chat.zafarr.xyz. It serves static assets globally.
2. Backend (AWS EC2): Deployed at chat-api.zafarr.xyz. A dedicated Linux instance running Node.js managed by PM2.
3. Communication: The frontend connects to the backend via a secure wss:// WebSocket tunnel proxied through Nginx and Cloudflare.

---

📁 Project Structure

ChatLo.io/
├── FE/                   ← Frontend (React + Vite)
│   ├── src/context/      ← Core WebSocket Logic
│   └── src/components/   ← UI Components
├── BE/                   ← Backend (Node.js + ws)
│   ├── src/handlers/     ← Socket Message Routing
│   └── src/services/     ← Business Logic
└── README.md

---

⚙️ Configuration

Backend (.env)

• PORT: Server port (default 3000)
• AUTH_ENABLED: Toggle JWT authentication
• WS_ALLOWED_ORIGINS: CORS whitelist for WebSocket origins

Frontend (.env)

• VITE_WS_URL: The production WebSocket endpoint (wss://chat-api.zafarr.xyz)

---

Made with ❤️ by Zafar

| Run compiled build | | Token | `npm run generate-token -- ` | Generate JWT |

Frontend (FE/)

Script	Command	Description
Dev	npm run dev	Vite dev server (port 5173)
Build	npm run build	Production build
Preview	npm run preview	Preview production build

---

Made with ❤️ using WebSockets + React