Frontend Developer (Angular)

Коммуникационная платформа: кроссплатформенный React SPA (desktop, iOS, Android) с модулем голосовых звонков в чате (LiveKit), управление медиаустройствами и запись разговоров через REST API.
Стек: React, TypeScript, livekit-client, WebRTC, WebSocket, REST API, Rspack, Docker, GitLab CI.

Задачи:
- Разработка и развитие React SPA: модульная структура (auth, chat), собственная UI-библиотека, сборка Rspack, GitLab CI, Docker.
- Кроссплатформенная вёрстка интерфейса звонков и чата: адаптация под мобильные браузеры iOS (Safari) и Android, учёт safe area, touch-управления и особенностей доступа к камере и микрофону на мобильных устройствах.
- Реализация слоя LiveKit: подключение к комнате, publish/subscribe аудио- и видеотреков, жизненный цикл сессии, обработка событий участников и треков.
- Модуль звонков в чате: UI участников, индикация активного говорящего, управление камерой и микрофоном, смена устройств без переподключения к комнате.
- Синхронизация звонка с платформой через WebSocket параллельно с LiveKit-медиа.
- Интеграция записи в интерфейс звонка: старт и остановка, отображение состояния и списка записей; JWT-авторизация.
- Клиентский слой данных: типизированные хуки, утилиты API, обработка ошибок доступа к устройствам и нестабильной сети.

Результат:
- Модуль звонков встроен в чат платформы: пользователь управляет устройствами и записью из одного интерфейса на desktop, iOS и Android.
- Состояние записи отображается в UI: активная запись, ошибки, список и статистика.
- Управление медиаустройствами и переключение камеры/микрофона работает без переподключения к комнате LiveKit, в том числе в мобильных браузерах.

Образовательная платформа: кабинеты студента и куратора, аналитика успеваемости, журнал и отчётность.
Стек: TypeScript, Angular 17–19, Nx (монорепозиторий), RxJS, Angular Material, Storybook, Jest, Transloco (i18n), Sentry, HTML5, CSS/Sass, REST (HttpClient). Обновление мажорной версии ~через 4 месяца после релиза.

Задачи:
- Проектирование и развитие многомодульного SPA в Nx-монорепозитории: кабинеты студента и куратора, разделы по направлениям обучения, lazy loading, переиспользуемые компоненты и сервисы.
- Управление состоянием на типизированном сторе поверх RxJS (общая библиотека монорепозитория): рефакторинг состояния разделов, сохранение состояния интерфейса между сессиями.
- Интеграция frontend с несколькими backend-сервисами через REST / HttpClient: единый слой данных для экранов, нормализация ответов, обработка ошибок и состояний загрузки (скелетоны, лоадеры).
- Разработка компонентов в Storybook, покрытие тестами, код-ревью, оптимизация производительности разделов.
- Переработка таблиц отчётности (вторая версия): состав и ширины колонок, фильтрация по предметам и периодам, сортировка, тултипы с описанием метрик, работа с большими выборками.
- Работа с датами и часовыми поясами в журнале успеваемости: согласование времени студента и московского времени.
- Реализация правил прохождения тестов и итоговых работ: доступность, блокировки, количество попыток, сроки, отображение ограничений в интерфейсе.
- Разработка интерфейсов кабинета студента: главная с прогрессом, блоки предметов и занятий, метрики по направлениям, домашние задания, новости, расписание, интерактивные сценарии.
- Разработка кабинета куратора: отчёты по успеваемости, детализация показателей, цветовая индикация рисков по студентам, посещаемость вебинаров.
- Локализация интерфейса (ru / en) для нескольких продуктов платформы.
- Участие в проектировании клиентских решений совместно с backend и аналитиками, устранение дефектов в production.

Результат:
- Успеваемость доступна куратору в едином интерфейсе вместо выгрузок из нескольких систем, что сокращает время принятия решений по студентам.
- Цветовая индикация рисков в отчётах позволяет куратору находить отстающих студентов без ручного анализа таблиц.
- Данные из разных сервисов сведены в единую модель прогресса: студент и куратор работают с согласованной информацией.
- Правила доступа к тестам и итоговым работам вынесены в интерфейс и не требуют участия разработки.

Платформа умной домофонии: личный кабинет, веб-плеер камер и видеостена для B2B-клиентов. Параллельно — Go-сервис проксирования RTSP → WebRTC для браузерного просмотра.
Стек: Angular 14–16, TypeScript, RxJS, NgRx, PrimeNG, Angular Material / CDK, HLS.js, WebRTC / MSE, WebSocket (STOMP), Canvas, ngx-translate, PWA (Service Worker), ESLint, Karma / Jasmine; Go, Gin, Pion WebRTC, Gorilla WebSocket, JWT, GitLab CI.

Задачи:
- Разработка и развитие Go-сервиса RTSP → WebRTC (Pion): проксирование потоков камер в браузер для видеостены и веб-плеера, HTTP/WebSocket-сигналинг, REST API (/api/v1/stream), JWT-авторизация.
- Поддержка видеокодеков H.264/H.265 и AAC в WebRTC muxer: обработка RTP-пакетов, определение keyframe (IRAP) для H.265, передача AAC через RTCDataChannel на каждую камеру.
- Настройка ICE-кандидатов и конфигурации Pion WebRTC для работы за NAT; рефакторинг сервиса в модульную структуру internal/ (stream, signal, http, config).
- Управление жизненным циклом RTSP-потоков: on-demand подключение, переподключение при обрыве, уведомления об ошибках (Mattermost).
- Разработка личного кабинета: интерфейсы управления, состояния, адаптивная вёрстка, интеграция с REST API.
- Развитие веб-плеера камер в браузере (WebRTC, HLS.js, MSE) с одновременным отображением нескольких потоков в одной вкладке.
- Разработка новой услуги «видеостена»: сетка плиток с трансляциями нескольких объектов на одной странице в реальном времени, потоки камер проксируются RTSP → WebRTC.
- Рефакторинг плеера: отказ от устаревшей сложноподдерживаемой библиотеки, вынос логики плеера из разрозненных участков кода в отдельную внутреннюю библиотеку — компоненты, типизированный стор на RxJS и реестр сторов на каждый экземпляр плеера для изоляции состояния при мультистриминге.
- Настройка Dependency Injection под мультистриминг: кастомные инжекторы (Injector.create, InjectionToken) для сигналинга и транспорта сообщений — WebSocket или HTTP — со своим набором зависимостей на каждый плеер.
- Реализация состояний плеера и фоллбека: при ошибках WebRTC — автоматическое переключение на альтернативный режим real-time воспроизведения с большей задержкой.
- Разработка таймлайна архива на Canvas: отрисовка периодов записи, событий и пропусков, слайдер и навигация по времени, тултипы.
- Реализация элементов управления плеером: режим «картинка в картинке» (Picture-in-Picture), полноэкранный режим, громкость, индикаторы качества потока и задержки.
- Кросс-браузерная отладка воспроизведения (Safari, Firefox), настройка буферизации и информативной обработки ошибок при нестабильной сети.
- Оптимизация клиентской части при большом числе одновременных потоков: контроль подписок и жизненного цикла трансляций, освобождение ресурсов плеера и соединений.
- Работа с реестрами оборудования и абонентов: переиспользуемые таблицы на PrimeNG с серверной пагинацией и поиском, скелетон-загрузка, компоненты форм на Angular Material.
- Поддержка локализации интерфейса (ngx-translate, Crowdin) для нескольких языковых версий продукта.

Результат:
- Развёрнут Go-сервис RTSP → WebRTC: браузерный просмотр камер без плагинов и нативных приложений, в том числе на видеостене с несколькими потоками одновременно.
- Запущена услуга видеостены для B2B-клиентов: наблюдение за несколькими объектами ведётся с одного экрана — собственником, охраной или консьержем, без выделенного оборудования.
- Услуга стала конкурентным преимуществом: на момент запуска аналогичного решения у конкурентов на рынке не было, что усилило продажи новых подключений.
- Просмотр камер организован непосредственно в браузере, без установки отдельного приложения и плагинов.
- Логика плеера консолидирована в переиспользуемую библиотеку с изолированным состоянием: снижена стоимость поддержки и упрощено подключение плеера к новым разделам продукта.
- Повышена отказоустойчивость просмотра: при проблемах с WebRTC отрабатывает фоллбек на альтернативный режим воспроизведения.

Платформа видеосвязи, внутренний инструмент диагностики и автоматизация для техподдержки.
Стек: TypeScript, Angular 14–17, Angular CLI, RxJS, Jest, Nx (монорепозиторий), Storybook, HTML/CSS, Node.js. Постепенные обновления: 14 → 15 → 16 → 17

Платформа видеосвязи

Задачи:
- Развитие многомодульного SPA: компоненты, сервисы, маршрутизация, состояние на RxJS, вёрстка HTML/CSS. Dependency Injection: кастомные инжекторы для сервисов звонка и медиа.
- Интеграция клиента с backend через REST / HttpClient, код-ревью, ведение технической документации.
- Обеспечение производительности нагруженных экранов: Change Detection OnPush, анализ избыточных перерисовок в DevTools.
- Реализация пользовательских сценариев звонка: выбор камеры и микрофона, смена устройств в процессе звонка, режимы отображения окна с видео, обработка ошибок доступа к устройствам.
- Реализация адаптации качества при ухудшении сети и альтернативного сценария подключения (P2P).
- Разработка виртуальных фонов и AR-эффектов на MediaPipe.
- Развитие видеоклиента как переиспользуемой библиотеки в Nx-монорепозитории: общие компоненты и логика видеосвязи для нескольких продуктов компании.
- Написание модульных тестов на Jest: поведения на метриках соединения (RTT, потери пакетов, битрейт, ограничение качества), стратегия переподключения со сменой медиасервера, обработка ошибок плагина и таймаутов.
- Тестирование асинхронных RxJS-сценариев через fakeAsync / tick, изоляция зависимостей через jest.mock, общие фабрики тестовых данных WebRTC-статистики для переиспользования в тестах.

Результат:
- Снижено количество обращений по качеству связи — основной причины возвратов средств за занятия.
- Повышено удобство видеосвязи: гибкая раскладка видео, виртуальные фоны и эффекты, управление устройствами без выхода из звонка.
- Сокращено время устранения инцидентов: причина сбоя определяется по данным звонка, а не подбором решений.
- Логика переподключения и обработки метрик покрыта автотестами: регрессии в сценариях восстановления связи выявляются до релиза.

Troubleshooter — внутренний инструмент диагностики видеосвязи для технической поддержки

Задачи:
- Проектирование и разработка SPA на Angular: экраны разбора инцидентов, хронология событий звонка, фильтрация по конференции, пользователю и периоду.
- Объединение клиентских логов и серверных логов медиасервера Janus Gateway в одну картину звонка: события сопоставляются по времени и участникам.
- Реализация сложной агрегации данных на клиенте: сведение разнородных событий из нескольких источников в единый набор метрик и состояний по каждому участнику.
- Разработка сложных таблиц: многоуровневая фильтрация, сортировка, группировка, выделение проблемных участков звонка.
- Визуализация метрик соединения на Chart.js: RTT, битрейт, потери пакетов, jitter — графики по каждому участнику в динамике.
- Приведение сырых логов из Kibana к человекочитаемому виду: действия в конференции, ошибки, состояния видеосвязи.
- Разработка раздела AI-разбора: анализ совокупности клиентских и серверных логов с формированием вывода о причине проблемы.

Результат:
- Снижена рутинная нагрузка на техническую поддержку и на команду разработки: источник неполадки — клиент, сеть или медиасервер — определяется в интерфейсе, без анализа сырых логов.
- Диагностика проблем на стороне пользователя выполняется силами поддержки, на разработку передаются только подтверждённые дефекты.
- Метрики качества связи стали наглядными: по графикам RTT и битрейта видно момент и характер деградации соединения.

Автоматизация для технической поддержки (Node.js)

Стек: Node.js, TypeScript, REST API, Google Calendar API

Задачи:
- Разработка ботов на Node.js для автоматизации рутины технической поддержки.
- Бот-ассистент для разбора обращений: первичная обработка и структурирование входящих тикетов от саппорта.
- Интеграция с Google Calendar: уведомления о событиях и напоминания для команды.
- Бот статистики работы операторов техподдержки: сбор и отображение метрик по обращениям.

Результат:
- Сокращена рутина при разборе обращений: часть первичной обработки выполняется автоматически.
- Команда получает своевременные уведомления из календаря без ручного мониторинга.
- Статистика работы операторов доступна в одном месте, без ручных выгрузок.