orlov.tech
Назад к проектам

Staff Focus

PWA + Android для сотрудников: KPI, задачи, мотивация, биометрия по WebAuthn, push, drag-n-drop дашборд, глубокая интеграция с Frappe ERP

Staff Focus
ReactViteTypeScriptTailwind CSSCapacitorWebAuthnWeb PushFirebase FCMRecharts@dnd-kitEmbla CarouselService WorkerNestJSFrappe ERPRedisDocker

Проблема

Сотрудникам и руководителям нужен был быстрый канал к KPI, задачам, базе знаний и мотивации прямо с телефона — с нативными ощущениями, биометрическим входом, офлайн-устойчивостью и адаптацией под особенности Telegram Mini App.

Решение

PWA с FSD-архитектурой на React + Vite, превращённая в нативный Android через Capacitor. Бэкенд — NestJS поверх Frappe ERP и Outline Wiki. Кастомный Service Worker с авто-обновлением и MessageChannel-коммуникацией. Биометрия — через WebAuthn / Passkey (а не Capacitor-плагин). Загрузка фото с историей и галереей. Drag-and-Drop реордеринг карточек на дашборде. Recharts-визуализация KPI. Отдельная админка управления мотивацией: руководитель настраивает правила, бонусы и штрафы и видит расчёт зарплаты по сотрудникам в реальном времени.

Результат

Нативное Android-приложение с биометрией и пуш-уведомлениями, используемое сотрудниками ежедневно для управления задачами и отслеживания KPI.

Мой вклад

  • Архитектура фронтенда по FSD-методологии
  • Конвертация PWA в Android-приложение через Capacitor и публикация в Google Play
  • Биометрическая аутентификация через WebAuthn / Passkey (FIDO2): challenge → attestation, поддержка TouchID/FaceID
  • Загрузка фото профиля с историей: API, swipe-галерея на Embla Carousel, нативная камера через input capture
  • Глубокая интеграция с Frappe ERP: CRUD над сотрудниками/должностями/ролями, sessionStorage-кеш с cache-bust для Telegram WebView
  • Кросс-девайс синхронизация настроек через Frappe User Settings DocType (shared vs per-device для mobile_tg / desktop_tg / mobile_web / desktop_web)
  • Drag-and-Drop реордеринг карточек дашборда через @dnd-kit + persistence layout
  • Кастомный Service Worker с авто-обновлением для Telegram Mini App, MessageChannel-коммуникацией, pull-to-refresh
  • Push-уведомления через Web Push API (VAPID) и Firebase Cloud Messaging
  • Leader Dashboard с мульти-магазинной аналитикой и Recharts (KPI gauge/donut, динамика, процентные графики со swipe-навигацией)
  • Lens Matrix — 2D-матрица категорий × сегментов с экспортом в XLSX
  • Админка управления мотивацией и калькулятор зарплат с реал-тайм прогнозом по KPI-слайдерам

Стек

ReactViteTypeScriptTailwind CSSCapacitorWebAuthnWeb PushFirebase FCMRecharts@dnd-kitEmbla CarouselService WorkerNestJSFrappe ERPRedisDocker

Следующий проект

Jarvis

Chrome-расширение, расширяющее возможности CRM Itigris