SPA для работы с несколькими сайтами разом

Описание

Сотрудники компании работали одновременно с несколькими сервисами: CRM и тремя внешними ресурсами.
Для выполнения операций им приходилось держать открытыми 4–5 браузеров и постоянно переключаться между вкладками.
Это приводило к ряду проблем:
- медленная обработка заказов
- ошибки при ручном переносе данных между системами
- сложность работы с несколькими аккаунтами
- дублирование загрузки документов
Необходимо было создать единое решение, которое позволит менеджерам работать со всеми сервисами из одного интерфейса.
Разработка выполнялась под NDA, поэтому скриншоты доступны только вне публичных заказов.

Решение

На старте я провел полный аудит API текущей CRM и трех внешних ресурсов, с которыми нужно было синхронизировать данные. У двух ресурсов была документация, а у третьего — только открытые эндпоинты. Исходя из аудита, я принял решение отказаться от разработки промежуточного бэкенда в пользу чистого Frontend SPA. Все API позволяли безопасно работать напрямую со стороны клиента, что существенно сэкономило бюджет и время на разработку. Я провел реверс-инжиниринг этого недокументированного API (через DevTools): отследил сетевые запросы, выявил все необходимые методы, полезную нагрузку (payload) и логику необходимую для авторизации.
Главная причина медленной работы менеджеров заключалась в том, что им приходилось переключаться между вкладками CRM и внешними сервисами. Я спроектировал и разработал единый интерфейс на React, где все нужные данные подтягивались в одну карточку заказа. Добавил автоматическое заполнение рутинных полей и валидацию форм.
Постепенно расширил функционал SPA:
Внедрил скрипты для автоматического сведения баланса, избавив отдел от ручных математических сверок.
Реализовал превентивную валидацию: система научилась выявлять ошибки в данных до отправки сообщений клиентам или внешним API, блокируя некорректные действия пользователя.Полностью переработал флоу прикрепления документов внутри компании. Вместо многократной физической загрузки тяжелых файлов в карточки заказов, я реализовал генерацию и обмен внутренними ссылками.

Результат

Благодаря переходу на концепцию «Единого окна» и автоматическому сбору данных из 4 разных источников (включая реверс-инжиниринг закрытого API), среднее время обработки 30 заказов менеджером сократилось с ~2 часов до 30 минут.
Пропускная способность отдела выросла на 75%. Менеджеры смогли обрабатывать в 4 раза больше заявок за ту же рабочую смену. Это позволило компании масштабироваться и справляться с возросшим потоком клиентов без найма дополнительных сотрудников.
За счет перехода на файловые ссылки вместо дублирования загрузок, корпоративное облачное хранилище стало заполняться в 5 раз медленнее, что напрямую сократило ежемесячные издержки компании на инфраструктуру.
Автоматическое сведение баланса и система превентивного выявления ошибок (до отправки сообщений) практически полностью исключили влияние человеческого фактора на критически важных этапах работы с клиентами.
За счет типизации данных (TypeScript) и автоматической валидации форм в React, мы исключили опечатки и ошибки, которые раньше возникали при ручном переносе информации между CRM и внешними сервисами.
Ранее "черный ящик" в виде недокументированного API был полностью разобран, описан и безопасно интегрирован в продукт. Код покрыт документацией, а настроенный CI/CD пайплайн позволил выкатывать новые фичи без остановки работы отдела продаж.

Презентация проекта