mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
178 lines
4.5 KiB
Markdown
178 lines
4.5 KiB
Markdown
# FromChat Web Client — Messaging Web App
|
|
|
|
[Читать на других языках: Русский](./README.md)
|
|
|
|
<div align="center">
|
|
<img src="https://raw.githubusercontent.com/fromchat-messenger/android/main/app/android/src/main/ic_launcher-playstore.png" width="120" alt="FromChat Logo" />
|
|
|
|
**Web client for FromChat messenger**
|
|
|
|
[🌐 Web Client](https://github.com/fromchat-messenger/web) • [🖥️ Backend](https://github.com/fromchat-messenger/backend) • [📱 Android / Desktop](https://github.com/fromchat-messenger/android) • [🌍 Website](https://github.com/fromchat-messenger/site)
|
|
</div>
|
|
|
|
---
|
|
|
|
## 📝 Description
|
|
|
|
FromChat Web is a React/TypeScript browser client for the FromChat server. The desktop client is Compose Multiplatform in the [Android/KMP repository](https://github.com/fromchat-messenger/android).
|
|
|
|
**Note:** Landing pages and legal documents live in [fromchat-messenger/site](https://github.com/fromchat-messenger/site).
|
|
|
|
---
|
|
|
|
## 📊 Client Comparison
|
|
|
|
| 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
|
|
|
|
---
|
|
|
|
## 🏗️ 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 |
|
|
|
|
---
|
|
|
|
## 🔧 Development
|
|
|
|
### Requirements
|
|
|
|
- Node.js 20+ (Docker image uses Node 24)
|
|
- npm
|
|
- Backend API on `http://localhost:8300` (proxied as `/api`)
|
|
|
|
### Quick start
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```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
|
|
|
|
```bash
|
|
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
|
|
```
|
|
|
|
### 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)
|
|
│ └── protocol/ # shared protocol (@fromchat/protocol)
|
|
├── plugins/ # Vite plugins
|
|
├── vite.config.ts
|
|
├── compose.yml # production web image (:8301→80)
|
|
├── Dockerfile
|
|
├── .env.example
|
|
└── package.json
|
|
```
|
|
|
|
---
|
|
|
|
## 🐳 Docker
|
|
|
|
```bash
|
|
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
|
|
|
|
1. Branch for your change
|
|
2. Open a PR with a description
|
|
3. Ensure `npm run frontend:typecheck` passes
|
|
|
|
---
|
|
|
|
## 📄 License
|
|
|
|
GNU Affero General Public License v3.0 — see [LICENSE](./LICENSE).
|
|
|
|
---
|
|
|
|
## 🔗 Related Repositories
|
|
|
|
- [Backend API](https://github.com/fromchat-messenger/backend)
|
|
- [Android / Desktop (KMP)](https://github.com/fromchat-messenger/android)
|
|
- [Website](https://github.com/fromchat-messenger/site)
|
|
- [Deployment](https://github.com/fromchat-messenger/deployment)
|
|
|
|
---
|
|
|
|
## ❓ 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](#fromchat-web-client--messaging-web-app)**
|