From 1cc5294d5284af6b0ebf84c2ea8cfd8c1b7fbc1c Mon Sep 17 00:00:00 2001 From: denis0001-dev Date: Mon, 13 Jul 2026 18:57:15 +0300 Subject: [PATCH] New README --- README.en.md | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 254 +++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 488 insertions(+), 17 deletions(-) create mode 100644 README.en.md diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..6d2c3fb --- /dev/null +++ b/README.en.md @@ -0,0 +1,251 @@ +# FromChat Web Client — Messaging Web App + +[Читать на других языках: Русский](./README.md) + +
+ FromChat Logo + + **Web client for FromChat messenger** + + [🌐 Web Client](https://github.com/fromchat-messenger/web) • [🖥️ Backend](https://github.com/fromchat-messenger/backend) • [📱 Android](https://github.com/fromchat-messenger/android) • [🌍 Website](https://github.com/fromchat-messenger/site) +
+ +--- + +## 📝 Description + +FromChat Web Client is a React application for messaging via browser. It's a modern interface for accessing the FromChat server. + +--- + +## 📊 Client Comparison + +| Feature | Android | Web | iOS | +|---|---|---|---| +| **Messaging & Profiles** | ✅ | ✅ | ✅ | +| **Voice/Video Calls** | ✅ | ❌ | ❌ | +| **Screen Sharing** | ✅ | ❌ | ❌ | +| **Message Reactions** | ❌ | ✅ | ❌ | +| **Rich Attachment Support** | ✅ | ❌ | ❌ | + +**Note:** Landing pages and legal documents are in a separate repository [fromchat-messenger/site](https://github.com/fromchat-messenger/site). + +--- + +## ✨ Features + +- **Protected Messages** — legal message encryption +- **Message Reactions** — unique to the web client +- **Profile Management** — update user data +- **Device Management** — control active sessions +- **Public Chats** — join communities +- **WebSocket** — real-time updates +- **Dark Mode** — easy on the eyes +- **Open Source** — full transparency + +--- + +## 🏗️ Tech Stack + +| Component | Version | +|---|---| +| React | 19 | +| TypeScript | latest | +| Vite | latest | +| MDUI | Material Design | +| Zustand | state management | +| Framer Motion | animations | +| TweetNaCl.js | cryptography | + +--- + +## 🔒 Security + +- **Message Encryption** — legal server-side encryption +- **WebSocket SSL/TLS** — secure connection +- **Token Management** — secure JWT storage +- **CORS** — cross-site request protection +- **Open Source** — full transparency + +--- + +## 🔧 Development + +### Requirements + +- Node.js 20+ +- npm +- Backend API running on `http://localhost:8300` + +### Quick Start + +**1. Clone repository:** + +```bash +git clone https://github.com/fromchat-messenger/web.git +cd web +``` + +**2. Install dependencies:** + +```bash +npm install +``` + +**3. Configure .env:** + +```bash +cp .env.example .env +``` + +Edit `.env`: + +```env +# Backend API +VITE_API_URL=http://localhost:8300 +VITE_WS_URL=ws://localhost:8300 + +# App settings +VITE_APP_NAME=FromChat +VITE_APP_VERSION=1.0.0 +``` + +**4. Start dev server:** + +```bash +npm run dev +``` + +Web client will be available at `http://localhost:8304` + +**5. Open in browser:** + +Go to `http://localhost:8304` and log in. + +### Commands + +```bash +# Dev server (with hot reload) +npm run dev + +# Type checking (TypeScript) +npm run typecheck + +# Build for production +npm run build + +# Preview production build +npm run preview + +# Lint (code style check) +npm run lint +``` + +### Project Structure + +``` +web/ +├── src/ +│ ├── pages/ # Application pages +│ │ ├── auth/ # Authentication (login, register) +│ │ ├── chat/ # Chat interface +│ │ └── profile/ # User profile +│ ├── core/ # Core business logic +│ │ ├── api/ # API client +│ │ ├── calls/ # WebRTC/LiveKit integration +│ │ ├── websocket.ts # WebSocket manager +│ │ └── types.d.ts # TypeScript definitions +│ ├── state/ # Zustand stores +│ ├── utils/ # Utility functions +│ └── css/ # SCSS modules (Material Design) +├── vite.config.ts # Vite configuration +├── .env.example # Example environment variables +└── package.json # Dependencies +``` + +### API Configuration + +Connect to the backend API via `.env`: + +```env +# Development +VITE_API_URL=http://localhost:8300 +VITE_WS_URL=ws://localhost:8300 + +# Production +VITE_API_URL=https://api.fromchat.ru +VITE_WS_URL=wss://api.fromchat.ru +``` + +The API supports both URL variants: +- `/api/endpoint` +- `/endpoint` (without prefix) + +Both work identically. + +--- + +## 🐳 Docker + +### Build image + +```bash +docker build -t fromchat-web:latest . +``` + +### Run container + +```bash +docker run -p 8304:8304 \ + -e VITE_API_URL=http://localhost:8300 \ + -e VITE_WS_URL=ws://localhost:8300 \ + fromchat-web:latest +``` + +### Production with Caddy + +Web client is automatically routed to `web.fromchat.ru` when using Caddy. + +--- + +## 🤝 Contributing + +Contributions are welcome! Please: + +1. Create a branch for your feature +2. Submit a pull request with description +3. Ensure TypeScript checks pass: `npm run typecheck` + +--- + +## 📄 License + +This project is licensed under the GNU Affero General Public License v3.0. See [LICENSE](./LICENSE) for details. + +--- + +## 🔗 Related Repositories + +- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI server +- [Android Client](https://github.com/fromchat-messenger/android) — Android application +- [Website](https://github.com/fromchat-messenger/site) — Landing & legal pages + +--- + +## ❓ FAQ + +**Q: How do I use the web client?** +A: Open `http://localhost:8304` in your browser and log in with FromChat credentials. + +**Q: Which browsers are supported?** +A: Chrome, Firefox, Safari, Edge (latest versions). + +**Q: Are video calls supported?** +A: No, video calls are only available in the Android client. Use Android for calls. + +**Q: How do I report a bug?** +A: Open an issue on GitHub with a description, reproduction steps, and screenshots. + +--- + +**[⬆ back to top](#fromchat-web-client--messaging-web-app)** diff --git a/README.md b/README.md index aa3cf50..837374f 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,251 @@ -# FromChat +# FromChat Web Client — веб-приложение для обмена сообщениями -FromChat - полностью открытый мессенджер. +[Read in other languages: English](./README.en.md) -Его можно попробовать на [сайте](http://fromchat.ru). +
+ FromChat Logo + + **Веб-клиент для FromChat мессенджера** + + [🌐 Веб-клиент](https://github.com/fromchat-messenger/web) • [🖥️ Backend](https://github.com/fromchat-messenger/backend) • [📱 Android](https://github.com/fromchat-messenger/android) • [🌍 Website](https://github.com/fromchat-messenger/site) +
-## Содержание: +--- -- [Основные моменты](#highlights) -- [Использование](#usage) -- [Часто задаваемые вопросы](#faq) -- [Внос вклада](#contributing) +## 📝 Описание -## Основные моменты +Веб-клиент FromChat — это React приложение для обмена сообщениями через браузер. Это современный интерфейс для доступа к серверу FromChat. -- Написан на HTML, SCSS, TypeScript (фронтэнд) и Python (бэкэнд). -- 100% открытый исходный код позволяет настроить вид и поведение мессенджера полностью под себя. +--- -## Использование +## 📊 Сравнение клиентов -*В разработке.* +| Возможность | Android | Веб | iOS | +|---|---|---|---| +| **Обмен сообщениями и профили** | ✅ | ✅ | ✅ | +| **Голосовые/видеозвонки** | ✅ | ❌ | ❌ | +| **Совместное использование экрана** | ✅ | ❌ | ❌ | +| **Реакции на сообщения** | ❌ | ✅ | ❌ | +| **Расширенная поддержка вложений** | ✅ | ❌ | ❌ | -## Часто задаваемые вопросы +**Примечание:** Лендинг-страницы и юридические документы находятся в отдельном репозитории [fromchat-messenger/site](https://github.com/fromchat-messenger/site). +--- +## ✨ Возможности -*В разработке.* +- **Защищённые сообщения** — легальное шифрование сообщений +- **Реакции на сообщения** — уникальная функция веб-клиента +- **Управление профилем** — обновление данных пользователя +- **Управление устройствами** — контроль активных сеансов +- **Публичные чаты** — присоединяйтесь к сообществам +- **WebSocket** — реал-тайм обновления +- **Тёмный режим** — удобно для глаз +- **Открытый исходный код** — полная прозрачность -## Внос вклада +--- -Внести свой вклад в разработку FromChat можно при помощи pull request или вступления в нашу команду. Заявку на вступление в команду можно оставить [здесь](https://t.me/denis0001-dev). \ No newline at end of file +## 🏗️ Технологический стек + +| Компонент | Версия | +|---|---| +| React | 19 | +| TypeScript | последняя | +| Vite | последняя | +| MDUI | Material Design | +| Zustand | управление состоянием | +| Framer Motion | анимации | +| TweetNaCl.js | криптография | + +--- + +## 🔒 Безопасность + +- **Шифрование сообщений** — легальное серверное шифрование +- **WebSocket SSL/TLS** — безопасное соединение +- **Управление токенами** — безопасное хранение JWT +- **CORS** — защита от межсайтовых запросов +- **Открытый исходный код** — полная прозрачность + +--- + +## 🔧 Разработка + +### Требования + +- Node.js 20+ +- npm +- Backend API работает на `http://localhost:8300` + +### Быстрый старт + +**1. Клонировать репозиторий:** + +```bash +git clone https://github.com/fromchat-messenger/web.git +cd web +``` + +**2. Установить зависимости:** + +```bash +npm install +``` + +**3. Настроить .env:** + +```bash +cp .env.example .env +``` + +Отредактируйте `.env`: + +```env +# Backend API +VITE_API_URL=http://localhost:8300 +VITE_WS_URL=ws://localhost:8300 + +# App settings +VITE_APP_NAME=FromChat +VITE_APP_VERSION=1.0.0 +``` + +**4. Запустить dev-сервер:** + +```bash +npm run dev +``` + +Веб-клиент будет доступен на `http://localhost:8304` + +**5. Открыть в браузере:** + +Перейдите на `http://localhost:8304` и войдите с учётными данными. + +### Команды + +```bash +# Dev сервер (с горячей перезагрузкой) +npm run dev + +# Type checking (TypeScript) +npm run typecheck + +# Build для production +npm run build + +# Preview production build +npm run preview + +# Lint (проверка стиля кода) +npm run lint +``` + +### Структура проекта + +``` +web/ +├── src/ +│ ├── pages/ # Страницы приложения +│ │ ├── auth/ # Аутентификация (вход, регистрация) +│ │ ├── chat/ # Интерфейс чата +│ │ └── profile/ # Профиль пользователя +│ ├── core/ #核心业务逻辑 +│ │ ├── api/ # API клиент +│ │ ├── calls/ # Интеграция WebRTC/LiveKit +│ │ ├── websocket.ts # WebSocket менеджер +│ │ └── types.d.ts # TypeScript определения +│ ├── state/ # Zustand stores +│ ├── utils/ # Вспомогательные функции +│ └── css/ # SCSS модули (Material Design) +├── vite.config.ts # Конфигурация Vite +├── .env.example # Пример переменных окружения +└── package.json # Зависимости +``` + +### API Configuration + +Backend API можно подключить через `.env`: + +```env +# Development +VITE_API_URL=http://localhost:8300 +VITE_WS_URL=ws://localhost:8300 + +# Production +VITE_API_URL=https://api.fromchat.ru +VITE_WS_URL=wss://api.fromchat.ru +``` + +API поддерживает оба варианта URL: +- `/api/endpoint` +- `/endpoint` (без префикса) + +Оба варианта работают одинаково. + +--- + +## 🐳 Docker + +### Build image + +```bash +docker build -t fromchat-web:latest . +``` + +### Run container + +```bash +docker run -p 8304:8304 \ + -e VITE_API_URL=http://localhost:8300 \ + -e VITE_WS_URL=ws://localhost:8300 \ + fromchat-web:latest +``` + +### Production с Caddy + +Веб-клиент автоматически маршрутизируется на `web.fromchat.ru` при использовании Caddy. + +--- + +## 🤝 Внесение вклада + +Приветствуются внесение вклада! Пожалуйста: + +1. Создайте ветку для вашей функции +2. Отправьте пулл-реквест с описанием +3. Убедитесь, что TypeScript проверка проходит: `npm run typecheck` + +--- + +## 📄 Лицензия + +Этот проект лицензирован в соответствии с лицензией GNU Affero General Public License v3.0. Подробности см. в файле [LICENSE](./LICENSE). + +--- + +## 🔗 Связанные репозитории + +- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI сервер +- [Android Client](https://github.com/fromchat-messenger/android) — Android приложение +- [Website](https://github.com/fromchat-messenger/site) — Лендинг и юридические страницы + +--- + +## ❓ Часто задаваемые вопросы + +**Q: Как я могу использовать веб-клиент?** +A: Откройте `http://localhost:8304` в браузере и войдите с учётными данными FromChat. + +**Q: Какой браузер поддерживается?** +A: Chrome, Firefox, Safari, Edge (последние версии). + +**Q: Поддерживаются ли видеозвонки?** +A: Нет, видеозвонки доступны только в Android клиенте. Используйте Android для звонков. + +**Q: Как сообщить об ошибке?** +A: Откройте issue на GitHub с описанием проблемы, шагами воспроизведения и скриншотами. + +--- + +**[⬆ вернуться к началу](#fromchat-web-client--веб-приложение-для-обмена-сообщениями)**