Feature	Android	Web	iOS
Messaging & profiles	✅	✅	❌
Voice/video calls	✅	✅	❌
Screen sharing	✅	✅	❌
Message reactions	❌	✅	❌
Rich attachment support	✅	❌	❌

⚠️ iOS is temporarily not supported.

✨ Features

Protected DMs (legal encryption scheme)
Voice/video calls and screen sharing
Message reactions
Public chats and profiles
Device management
WebSocket real-time updates
Dark mode
Optional Electron desktop build

🏗️ Tech Stack

Component	Notes
React 19	UI
TypeScript	strict typing
Vite 7	dev server & build
MDUI	Material Design
Zustand + use-immer	state
Motion	animations
TweetNaCl.js	cryptography
Electron	desktop (optional)

🔧 Development

Requirements

Node.js 20+ (Docker image uses Node 24)
npm
Backend API on http://localhost:8300 (proxied as /api)

Quick start

git clone https://github.com/fromchat-messenger/web.git
cd web
npm install
cp .env.example .env   # if needed; install may copy it for you
npm run frontend:dev

Open http://localhost:8301.

.env:

# HTTP API host (Vite proxy target for /api)
VITE_API_BASE_URL=http://localhost:8300

In the browser the client uses same-origin /api (HTTP and WebSocket, e.g. /api/chat/ws).

Commands

npm run frontend:dev              # Vite on :8301
npm run frontend:typecheck        # TypeScript
npm run frontend:build            # typecheck + production build → build/normal
npm run frontend:preview          # preview built frontend
npm run frontend:electron:dev     # Electron + Vite
npm run frontend:electron:build   # Electron package

Project structure

web/
├── src/
│   ├── index.html
│   ├── main/                 # React app (@/)
│   │   ├── pages/            # auth, chat, profile, …
│   │   ├── core/             # API, websocket, calls, …
│   │   ├── state/            # Zustand stores
│   │   ├── utils/
│   │   └── css/              # SCSS (Material Design)
│   ├── electron/             # Electron main/preload
│   └── protocol/             # shared protocol (@fromchat/protocol)
├── plugins/                  # Vite plugins
├── vite.config.ts
├── compose.yml               # production web image (:8301→80)
├── Dockerfile
├── .env.example
└── package.json

🐳 Docker

docker build -t fromchat-web:latest .
# or via compose:
docker compose --env-file .env up --build

Container listens on port 8301 (static server on 80 inside).

Production edge (Caddy/HAProxy) is configured via the deployment repo / backend compose.prod.yml.

🤝 Contributing

Branch for your change
Open a PR with a description
Ensure npm run frontend:typecheck passes

📄 License

GNU Affero General Public License v3.0 — see LICENSE.

❓ FAQ

Q: How do I run locally?
A: Start the backend on :8300, then npm run frontend:dev and open http://localhost:8301.

Q: Which browsers?
A: Current Chrome, Firefox, Safari, Edge.

Q: Do calls work on web?
A: Yes — voice/video and screen share (server needs LiveKit).

Q: How do I report a bug?
A: GitHub Issues with reproduction steps.

⬆ back to top

README.en.md

FromChat Web Client — Messaging Web App

📝 Description

📊 Client Comparison