Chat Leads
Портфолио-кейс системного аналитика

Chat Leads — lead management система с real-time чатом

Production-прототип системы для сбора, квалификации и обработки заявок с сайта: форма, чат-бот, WebSocket-чат с оператором, админка, роли, аудит, Telegram-интеграция, UTM и аналитика.

Next.jsTypeScriptPostgreSQLPrismaSocket.IOTelegram Bot APIЯндекс МетрикаNginx / PM2 / VPS
Открыть сайтВойти в демо-админку

Роль и охват

Роль: системный аналитик + разработчик/интегратор.

формализация бизнес-идеи
декомпозиция скоупа
выделение MVP
проектирование модели данных
описание API и WebSocket-взаимодействия
реализация production-прототипа
настройка VPS, Nginx, PM2 и SSL
тестирование пользовательских и edge-case сценариев

Вызов

Изначальная идея была широкой: “сайт с умным чатом для заявок”. Нужно было структурировать хаотичный скоуп и превратить его в понятную lead management систему.

Не просто форма

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

Не просто чат

Чат должен быть связан с заявкой, историей диалога, оператором и админкой.

Не просто уведомление

Telegram используется как канал уведомления, а основной источник данных — PostgreSQL.

Что реализовано

лендинг и форма заявки
серверная обработка /api/lead
PostgreSQL + Prisma
Telegram-уведомления
IntegrationLog
LeadEvent
OperatorComment
UTM tracking
Яндекс Метрика и цели
админка лидов
карточка заявки
смена статусов
комментарии менеджера
история событий
фильтры заявок
чат-виджет
ChatSession и Message
operator handoff
real-time чат через Socket.IO
User / роли admin/operator/viewer
AuditLog
User management UI
деплой на VPS с HTTPS

Архитектура

Для MVP выбран модульный монолит: публичный сайт, API, админка, чат, интеграции и аналитика находятся в одной кодовой базе. Real-time часть вынесена в отдельный Socket.IO-процесс, который разворачивается рядом с Next.js-приложением и использует общую PostgreSQL-базу.

Основной поток

Пользователь
↓
Next.js public site
↓
/api/lead
↓
PostgreSQL
↓
Telegram / CRM feature flag
↓
Admin panel

Real-time поток

Visitor ChatWidget
↔
Socket.IO server
↔
Admin Chat Panel
↓
PostgreSQL Messages

Модель данных

Центральная сущность — Lead. Вокруг неё строятся комментарии, события, интеграционные логи, источники и чат-сессии.

Фактически реализованные сущности

LeadUserChatSessionMessageLeadEventOperatorCommentIntegrationLogAuditLog

Целевая модель развития

LeadStatusIntegrationJobVisitorLeadSource / UTMAnalyticsEventSettings

Часть целевой модели реализована физически, часть заложена как проектное развитие.

API и WebSocket

REST API

  • POST /api/lead
  • POST /api/chat/session
  • GET /api/chat/session/{id}
  • POST /api/chat/session/{id}/handoff
  • PATCH /api/admin/leads/{id}/status
  • POST /api/admin/leads/{id}/comments
  • POST /api/admin/chats/{id}/messages
  • POST /api/admin/chats/{id}/assign
  • POST /api/admin/chats/{id}/close
  • POST /api/admin/users
  • PATCH /api/admin/users/{id}

WebSocket / Socket.IO events

  • chat:join
  • chat:message
  • operator:message
  • chat:typing
  • message:new
  • typing:update
  • presence:update
  • chat:closed
  • chat:error

Для real-time чата описаны события, payload, роли visitor/operator, комнаты chat:{sessionId}, обработка ошибок и fallback-сценарии.

Админка

список заявок
фильтры и поиск
карточка заявки
смена статуса
комментарии менеджера
история событий
логи интеграций
история чата
список чат-сессий
real-time панель оператора
управление пользователями
роли admin/operator/viewer
AuditLog
Роль viewer может просматривать данные без права изменения. Admin управляет пользователями и аудитом.

Интеграции и аналитика

Интеграции

Telegram
  • заявка отправляется в Telegram после сохранения в БД
  • результат фиксируется в IntegrationLog
  • ошибка не удаляет Lead
CRM
  • Bitrix24-интеграция заложена через feature flag
  • при включённом webhook заявка может быть отправлена в CRM
  • результат логируется

UTM и Яндекс Метрика

UTM
utm_sourceutm_mediumutm_campaignutm_contentutm_termreferrerlandingPage
Яндекс Метрика
cta_clicklead_form_submitlead_successthanks_page_viewchat_openchat_lead_submit

Безопасность и надёжность

HTTPS через Certbot
Nginx reverse proxy
PM2 для автозапуска процессов
PostgreSQL не открыт наружу
env-переменные не хранятся в Git
пароли пользователей хранятся в виде hash
роли ограничивают действия
AuditLog фиксирует действия админки
IntegrationLog не хранит секреты
fail2ban / firewall / backups подготовлены на уровне сервера

Документация

Для проекта подготовлен комплект аналитической документации.

Architecture overview
ERD
OpenAPI
WebSocket contract
Business process
Functional requirements
Non-functional requirements
Test cases
User stories
Backlog MoSCoW
Edge cases
Portfolio case

Документация хранится в репозитории в папке docs.

Результат

Получился production-прототип lead management системы: пользователь может оставить заявку через форму или чат, оператор может обработать обращение в админке, real-time чат сохраняет историю, а система фиксирует статусы, события, интеграции, UTM и действия пользователей.

заявка не теряется при сбое внешнего сервиса
Telegram — канал уведомления, PostgreSQL — источник истины
оператор видит контекст диалога
админка поддерживает роли и аудит
система готова к развитию CRM/retry/analytics

Что можно развить дальше

IntegrationJob и retry-механизм
полноценная Bitrix24/CRM-интеграция
Visitor и cookie-based tracking
LeadSource как отдельная сущность
внутренние AnalyticsEvent
Settings UI
управление сценариями бота из админки
улучшенный RBAC
Docker deployment
CI/CD

Смотреть рабочий прототип

Открыть сайтВойти в админку

Демо-доступ лучше передавать отдельно, чтобы не публиковать пароль на сайте.