Business Chat
Private Discord-like real-time chat with WebSocket messaging, file sharing, and user presence awareness.
A private business chat application modeled after Discord. Connects users through WebSocket-driven real-time messaging, handles file uploads and playback, displays who's online, and lets users customize display names and avatars.
- Node.js
- Express
- WebSocket (ws)
- SQLite3
- bcryptjs
- React
- Vite
- Tailwind CSS
- React Router
- axios
- Multer
- react-icons
The app splits cleanly into a Node.js/Express backend serving a Vite-built React frontend. The server runs an HTTP server with integrated WebSocket upgrade handling to broadcast messages and presence events to all connected clients. Authentication uses bcrypt-hashed credentials stored in SQLite, with session cookies managing login state.
The client is a single-page app built with React Router. It opens a persistent WebSocket connection authenticated via session cookie, streams incoming messages and online-user lists, and provides a Discord-like interface with a chat window and sidebar for viewing uploaded files. Users can edit their display name and profile picture, triggering avatar crops and server updates.
Real-time presence is handled through a separate broadcast channel—when users connect or disconnect, the server sends the full online-user list (with display names and avatar URLs) to all clients. File uploads are multipart-form POST requests that trigger database inserts and WebSocket broadcasts so all users see new files immediately. The build is deployed by serving the React dist folder from Express under the /chat route.
- WebSocket broadcast messaging: real-time text and file message delivery to all connected clients with server-side persistence in SQLite
- User presence tracking and display: online users list with avatars and display names, refreshed on every connection/disconnection
- File uploads and preview: multipart upload with MIME filtering, in-sidebar thumbnails, modal previews for images, video, audio, and PDFs
- User profiles: avatars with image cropping (react-easy-crop), customizable display names, session-based authentication with bcrypt hashing
- Dual routing structure: both /api and /chat/api routes to support the SPA's /chat path prefix, with proper static file serving fallbacks