Фронтенд B2B-платформы трансграничных платежей на Next.js

Заказчик это B2B-компания, которая проводит трансграничные переводы для юридических лиц с помощью золота и стейблкоинов. Для своих клиентов она строила систему автоматизации управления платежами.

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

Команда проекта: три фронтенд- и два бэкенд-разработчика, два аналитика, два QA-инженера, два UI/UX-дизайнера, DevOps-инженер, архитектор информационной безопасности, руководитель продукта и менеджер проекта. Фортех усиливал фронтенд-команду: в августе 2024 года на проект вышел наш фронтенд-разработчик, в ноябре к нему присоединился второй. Работа шла до конца марта 2025 года.

Задача

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

Ограничения задачи

Это финансовый сервис для юридических лиц, поэтому безопасность входа стояла на первом месте. Временные пароли, коды аутентификатора, обновление токенов и защищённые маршруты должны работать без дыр.

Конструктор бизнес-процессов сложнее обычных форм. Каждый блок (условие, цикл, пауза, параллельное выполнение) хранит свои параметры, а рабочую область пользователь двигает свободно.

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

Решение

Вход и регистрация. Разработчик Фортех сверстал страницы регистрации и входа, форму смены временного пароля и форму кода аутентификатора, восстановление пароля и форму создания нового сотрудника. Формы построены на React Hook Form, данные проверяются схемами Zod с типизацией TypeScript.

Связка с API. Вход и регистрация работают на JWT. Middleware проверяет, авторизован ли пользователь, а интерцепторы Axios сами обновляют токен, когда он истекает. Восстановление пароля тоже подключено к API.

Конструктор бизнес-процессов. Экранные формы конструктора сверстаны на React Flow. Команда фронтенда создавала функциональные блоки и подключала к бэкенду рабочую область и блоки «Условие», «Функции», «Триггер», «Пауза», «Цикл», «Параллельное выполнение», «Добавить шаблон» и «Завершить процесс».

Интерфейс и качество кода. Интерфейс собран на Tailwind CSS и компонентах shadcn/ui. Код проверяют ESLint и Prettier, тесты пишутся на Jest.

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

Для конструктора бизнес-процессов сверстан интерфейс на React Flow, функциональные блоки процесса подключались к бэкенду.

Разработчики Фортех работали на проекте около семи месяцев, с августа 2024 по март 2025 года. Когда объём задач вырос, мы добавили в команду второго фронтенд-разработчика.

Частые вопросы

Как сделать безопасный вход в B2B-финтех на Next.js?
Связать вход с бэкендом через JWT, проверять авторизацию в middleware, обновлять токены интерцепторами и добавить второй фактор: код из приложения-аутентификатора и обязательную смену временного пароля.

На чём собрать визуальный конструктор бизнес-процессов?
В этом проекте конструктор сделан на React Flow: он даёт свободную рабочую область и узлы, которые хранят свои параметры. Каждый блок процесса подключается к бэкенду отдельно.

Какой стек выбрать для форм с валидацией?
React Hook Form для состояния форм и Zod для схем проверки. Вместе с TypeScript это даёт типизированные формы, которые проверяют данные ещё до отправки на сервер.