KYC Flow Diagram
Jumio + Sumsub
Skip to main content
ПройденПройденПройденПройденПройденПройденПройденПройден
Кейс
M7‑Finance: Цифровая банковская платформа — дизайн, фронтенд и бэкенд (end‑to‑end)
Полный цикл разработки цифровой банковской платформы: UX‑исследование, информационная архитектура, high‑fidelity дизайн, React‑фронтенд с данными в реальном времени и Node.js/PostgreSQL бэкенд с транзакционным леджером, мультипровайдерной обработкой платежей, генерацией PDF‑инвойсов, движком запланированных переводов и аутентификацией OAuth 2.0 + JWT — от болей пользователей до production‑grade финтех‑системы с кошельками, транзакциями, инвойсами и аналитикой.
6Основных модулей
45+API‑эндпоинтов
20+Экранов UI
87%Покрытие тестами
6
Основных модулей
45+
API‑эндпоинтов
20+
Экранов UI
Год: 2024Индустрия: Финтех / Цифровой банкингСроки: 12 недель
Задача
Заказчику требовалась full‑stack цифровая банковская платформа с нуля — не просто экраны, а работающая финтех‑система. Пользователи существующих банковских приложений сталкиваются с фрустрацией от сложных интерфейсов, затрудняющих поиск функций, отслеживание расходов, управление инвойсами и мульти‑кошелёк операции. M7‑Finance требовал как интуитивный UI уровня необанка, так и надёжный бэкенд: транзакционный леджер с двойной записью, мультипровайдерную интеграцию платежей (Payoneer, Remitly, Wise, PayPal), агрегацию балансов в реальном времени по нескольким картам и кошелькам, полноценный движок инвойсов с генерацией PDF и email‑доставкой, запланированные/рекуррентные переводы и систему аутентификации банковского уровня безопасности (OAuth 2.0, ротация JWT, bcrypt, rate limiting). Продукт должен обрабатывать финансовые данные с ACID‑гарантиями при времени ответа API менее 200 мс.
Ограничения
- •ACID‑совместимый транзакционный леджер — каждая финансовая операция должна быть атомарной и проверяемой
- •Время ответа API менее 200 мс (P95) для агрегационных запросов дашборда
- •Аутентификация банковского уровня: OAuth 2.0 + JWT с ротацией refresh‑токенов, bcrypt, rate limiting по IP
- •Мультипровайдерная абстракция платежей (Payoneer, Remitly, Wise, PayPal) за единым интерфейсом
- •Серверная генерация PDF‑инвойсов без зависимости от браузера (@react‑pdf/renderer)
- •Движок запланированных переводов с cron‑исполнением и повторными попытками с экспоненциальным откатом
- •Информационная архитектура валидирована через mind map до начала визуального дизайна
- •Юзабилити‑тестирование с реальными пользователями перед передачей фронтенда
- •Mobile‑first отзывчивый подход для всех 6 модулей
- •Enterprise‑клиент анонимизирован по NDA — внутреннее наименование продукта и точные финансовые данные конфиденциальны
Решение
Спроектировали, разработали и задеплоили full‑stack цифровую банковскую платформу по трём параллельным направлениям.
ДИЗАЙН
4‑этапный UX‑процесс — конкурентный анализ 12 необанков, mind map полного пользовательского пути, вайрфреймы, интерактивные прототипы протестированные с 15 пользователями, high‑fidelity UI‑кит из 200+ компонентов.
ФРОНТЕНД (Next.js 14 + TypeScript)
SSR для SEO и начальной загрузки, React Query с cache‑first стратегией и оптимистичными мутациями, Zustand для клиентского состояния, Chart.js с кастомными финансовыми плагинами (candlestick‑оверлеи, сравнение доходов/расходов), адаптивные макеты протестированные на 8 контрольных точках, skeleton‑состояния загрузки для каждого data‑driven экрана.
БЭКЕНД (Node.js + Express + PostgreSQL)
транзакционный леджер на основе двойной записи (каждый дебет имеет парный кредит, контролируется на уровне БД через CHECK‑constraint и триггеры), Prisma ORM с raw SQL для сложных финансовых агрегаций (оборотный капитал за период, расходы по категориям, рекончиляция балансов), мультипровайдерная интеграция платежей за паттерном Strategy (адаптеры Payoneer/Remitly/Wise/PayPal с унифицированной обработкой вебхуков), генерация PDF‑инвойсов через @react‑pdf/renderer (серверные React‑компоненты компилируются напрямую в PDF без браузера — легковесно, быстро и production‑stable; хедер компании, позиции, автоматический расчёт подитога/скидки/налога/итого, реквизиты клиента), движок запланированных переводов на Bull queue с Redis‑персистенцией (cron‑расписание, повторы с экспоненциальным откатом, dead‑letter queue для сбойных переводов), полная система аутентификации: bcrypt (cost factor 12), JWT access‑токены (15 мин TTL) с HttpOnly refresh‑токенами (7‑дневная ротация), Google OAuth 2.0 через Passport.js, Helmet.js для HTTP security headers (CSP, HSTS, X‑Frame‑Options), rate limiting по IP (express‑rate‑limit + Redis sliding window), CSRF‑защита. Структурированное логирование через Pino (JSON‑логи с correlation ID, трекинг латентности и уровни логов для compliance аудит‑трейла).
API‑слой
45+ RESTful эндпоинтов по доменам (auth, users, wallets, transactions, invoices, transfers, analytics), валидация через Zod‑схемы, стандартизированные ошибки, correlation ID для распределённого трейсинга, Swagger/OpenAPI из декораторов маршрутов.
Результаты
- UX‑исследование (анализ 12 приложений, интервью с 15 пользователями, матрица болей)
- Mind map информационной архитектуры (полный путь пользователя с подпотоками)
- High‑fidelity UI‑кит из 200+ компонентов (Figma → код с токенами)
- Next.js 14 фронтенд с SSR, React Query, Zustand, Chart.js финансовые визуализации
- Node.js + Express REST API (45+ эндпоинтов, Zod‑валидация, Swagger‑документация)
- PostgreSQL транзакционный леджер (двойная запись, CHECK‑constraints, триггеры)
- Мультипровайдерная интеграция платежей (Payoneer, Remitly, Wise, PayPal — паттерн Strategy)
- Движок PDF‑инвойсов (@react‑pdf/renderer, автоматические расчёты, S3‑хранилище, email‑доставка)
- Движок запланированных переводов (Bull queue + Redis, cron, retry с откатом, DLQ)
- Система аутентификации (ротация JWT, Google OAuth 2.0, bcrypt, Helmet.js, rate limiting, CSRF)
- Структурированное логирование (Pino JSON‑логи, correlation ID, трекинг латентности, audit compliance)
- Управление кошельками (мульти‑карта CRUD, агрегация балансов, категоризация платежей)
- CI/CD пайплайн (GitHub Actions, Docker, автоматизированные тесты — 87% покрытие)
Скриншоты / UX‑поток
Пошаговый обзор интерфейса продукта
01
Обзор проекта — постановка проблемы, подход к решению, бренд M7‑finance и 4‑этапный UX‑процесс дизайна
02
Mind map — информационная архитектура: Регистрация → Логин → Активность/Статистика/Кредит/Профиль с подпотоками
03
Вход — аутентификация email/пароль с Google OAuth, «Запомнить на 30 дней» и «Забыли пароль»
04
Регистрация — создание аккаунта с полями имя, email, пароль и опцией Google OAuth
05
Dashboard — карточки баланса/расходов/накоплений, график оборотного капитала (Доходы vs Расходы), последние транзакции, карточки кошельков, запланированные переводы
06
Транзакции — поисковый список транзакций с Именем/Бизнесом, Типом, Суммой, Датой, ID инвойса и действием Просмотр
07
Инвойсы — список с поиском, кнопкой «Создать инвойс», фильтрами и статусными бейджами (Оплачен/Ожидание/Не оплачен)
08
Новый инвойс — хедер компании, реквизиты, позиции (iPhone 13 Pro Max, Netflix), итого/скидка/налог/сумма, данные клиента, Предпросмотр/Скачать/Отправить
09
Мои кошельки — управление банковскими картами (Universal Bank + Commercial Bank), баланс с метриками, список платежей (Payoneer, Remitly, Wise, PayPal), предстоящие платежи
10
Настройки — информация аккаунта с личными данными (имя, дата рождения, телефон, email) и управление паролем
11
Настройки (режим редактирования) — обновлённые личные данные с кнопкой «Обновить» и редактируемыми полями
Артефакты
Документы и результаты проекта
Схема аудит-трейла
SOC 2
Матрица ролей
RBAC
Верификация / гейты качества
8-фазный чеклист перед релизом
01Сборка
02Тесты рекончиляции леджера
03E2E интеграция платёжных провайдеров
04Точность генерации PDF‑инвойсов
05Аудит безопасности аутентификации (OWASP)
06Нагрузочное тестирование (P95 < 200 мс)
07Юзабилити‑тестирование пройдено
08Порог покрытия тестами 87%
Все гейты пройдены
8/8
Стек технологий
Next.js 14TypeScriptReact QueryZustandTailwind CSSChart.jsNode.jsExpressPostgreSQLPrismaRedisBull Queue@react-pdf/rendererJWTOAuth 2.0Passport.jsHelmet.jsPinoZodDockerGitHub ActionsSwagger
Результат
Поставили production‑grade full‑stack банковскую платформу: 6 модулей (Dashboard, Транзакции, Инвойсы, Кошельки, Настройки, Авторизация), 20+ экранов, 45+ API‑эндпоинтов, PostgreSQL‑леджер с целостностью двойной записи, мультипровайдерная обработка платежей, генерация PDF‑инвойсов, запланированные переводы с очередью для надёжности и аутентификация банковского уровня. Время ответа API P95 < 180 мс. Покрытие тестами 87%. Dashboard агрегирует данные в реальном времени из кошельков, транзакций и переводов в единый экран без когнитивной перегрузки. Система инвойсов обрабатывает полный жизненный цикл: создание → позиции → расчёт → предпросмотр → отправка → отслеживание статуса (Paid/Pending/Unpaid). Ноль несогласованностей финансовых данных в продакшне.
Сложные задачи, которые мы решили
Леджер с двойной записью и ACID‑гарантиями
Каждая финансовая операция (депозит, списание, перевод, оплата инвойса) записывается как пара леджерных записей: дебет и кредит. CHECK‑constraint PostgreSQL гарантирует, что каждый батч транзакций суммируется в ноль. Триггеры базы данных автоматически обновляют баланс кошельков после коммита. Это исключает фантомные балансы и обеспечивает постоянную рекончиляцию — тот же подход, что и в продакшн банковских ядрах.
Мультипровайдерная абстракция платежей (паттерн Strategy)
Payoneer, Remitly, Wise и PayPal имеют разные API, форматы вебхуков и таймлайны расчётов. Построили интерфейс PaymentProvider с адаптерами для каждого провайдера: initiate(), confirm(), webhook(), refund(). Добавление нового провайдера — один адаптер, ноль изменений в бизнес‑логике. Подписи вебхуков верифицируются криптографически по каждому провайдеру. Сбойные вебхуки ретраятся через dead‑letter queue с экспоненциальным откатом.
Серверная генерация PDF без зависимости от браузера
PDF‑инвойсы строятся через @react‑pdf/renderer — React‑компоненты компилируются напрямую в PDF на сервере без запуска headless‑браузера. Это устраняет зависимость от Chrome/Chromium, снижает потребление памяти с ~300 МБ до ~40 МБ на генерацию и сокращает время рендеринга с ~3 с до ~200 мс. Одно и то же дерево компонентов определяет как превью в приложении, так и PDF — обеспечивая визуальную консистентность. Движок обрабатывает: хедер компании с брендингом, реквизиты инвойса/выставления, динамические позиции с ценами и количествами, автоматический расчёт подитога/скидки/налога/итого, блок данных клиента и генерацию уникального номера инвойса (последовательная с контрольной цифрой). Сгенерированные PDF хранятся в S3 с pre‑signed URL (15‑минутный срок) для безопасного скачивания и отправляются клиентам через SES.
Запланированные переводы с надёжностью на очередях
Рекуррентные и запланированные переводы работают на Bull queue с Redis‑бэкендом. Каждый job содержит idempotency key для предотвращения двойного исполнения. Сбойные переводы ретраятся с экспоненциальным откатом (1с → 2с → 4с → 8с, макс. 5 попыток). После исчерпания — dead‑letter queue и уведомление администратору. Планировщик поддерживает cron‑выражения для гибких паттернов повторения (еженедельно, ежемесячно, кастом). Статус переводов отражается в реальном времени на дашборде через WebSocket‑push.
Похожий проект? Получите оценку или запишитесь на звонок.
Похожие кейсы
Продукт
TRM Oferta: онлайн‑регистрация и акцепт публичной оферты (end‑to‑end)
Полный продуктовый поток: регистрация, акцепт публичной оферты с аудит‑трейлом, PDF‑подтверждение с печатью/подписью, админка. Юридически корректно, mobile‑first.
Продукт
Система учёта заказов и ингредиентов для ресторана (end‑to‑end)
Полноценная система управления рестораном: ролевой доступ (Шеф, Сотрудник, Бухгалтер, Владелец), учёт ингредиентов с себестоимостью, рецепты роллов с авторасчётом себестоимости/маржи, состав сетов с ценами, управление заказами, логирование поставок/списаний, бухгалтерия с выгрузкой в Excel, аналитические дашборды и полная история изменений.
Продукт
KutWallet: мультиактивный криптокошелёк со встроенной биржей (iOS, end‑to‑end)
Полноценный мобильный криптокошелёк для iOS: некастодиальное управление ключами с AES‑256‑GCM‑шифрованием, 4‑значный PIN + биометрия Face ID, 3‑шаговый онбординг с ценностным сторителлингом, мультиактивный дашборд портфеля с ценами в реальном времени (BTC, ETH, LTC, XRP), встроенная биржа с интерактивными свечными графиками и потоком Buy/Sell, аналитика расходов с сегментированной donut‑диаграммой, QR‑сканер для мгновенных P2P‑переводов, мультивалютные фиатные настройки (6+ валют), OAuth‑вход (Google, Apple ID), OTP‑верификация email и Node.js/PostgreSQL бэкенд с WebSocket‑стримингом цен и агрегацией CoinGecko.
Похожий проект?
20 минут — обсудим вашу задачу, дадим честную оценку. Без обязательств.