Multichan
A real-time chat and synchronization platform for coordinating playback across multiple computers via mouse click events.
Multichan is a full-stack chat and sync application that routes real-time messages through WebSocket and coordinates simultaneous user actions across networked devices. Built as an Electron desktop app with a React frontend, Express backend, and SQLite persistence.
- Express.js
- React 19
- Electron 37
- WebSocket (ws library)
- SQLite3
- Vite
- Tailwind CSS
- React Router 7
- React Icons
- Axios
- Node.js
Multichan enables users to join real-time chat rooms while keeping playback synchronized across multiple computers. The core use case is group watching—everyone runs their own video player, and Multichan keeps them in sync by broadcasting coordinated mouse clicks (e.g., play/pause) to all participants. Users mark their mouse position on their local screen, the system queues them as ready, then triggers a simultaneous click on all machines when the group is prepared.
The backend is a modular Express server exposing REST and WebSocket endpoints. Messages and settings live in SQLite; a broadcast loop pushes state changes (new messages, edits, read status, active user lists) to all connected clients in real time. The ActiveUsers service tracks WebSocket connections by username and maintains a deduplicated list. The frontend is a React + Electron desktop app built with Vite and hot-reloaded during development through concurrent npm processes that start the Vite dev server and Electron main process simultaneously.
The UI is theme-aware (light/dark), built entirely with Tailwind CSS, and split into composition-based components. Login, chat, and settings pages route via React Router v7. Unread message highlighting, edit in-place functionality, and theme persistence showcase careful UX polish. Git history (36 commits, 19 by Myles + 17 by collaborator) and structured AGENTS.md documentation show collaborative authorship and intentional architectural planning from the start.
- WebSocket broadcast architecture with active user presence tracking and read status synchronization
- Electron desktop app with concurrent dev server (Vite + hot reload + Electron main spawned together)
- Modular Express backend with SQLite schema for messages, settings, and structured API/WS routing
- Theme-aware React UI built entirely with Tailwind CSS and Feather Icons (react-icons), supporting light and dark modes
- Edit-in-place message functionality and focus-aware unread marking—messages marked read when window regains focus