Фронтенд для сервиса мониторинга обменников и рекламной платформы

Заказчик развивает два продукта, и фронтенд-разработчики Фортех работали над обоими с июля 2025 года.

Первый продукт это сервис мониторинга обменных пунктов. Он помогает быстро найти надёжный и выгодный способ обменять валюту: показывает только проверенные обменники, курсы и актуальные предложения, а также отзывы клиентов.

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

В команде проекта работали фронтенд-разработчики, бэкенд-разработчики на Python и FastAPI, фронтенд-лид и руководитель продукта.

Задача

Для сервиса обменников:

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

Для рекламной платформы:

• сделать поиск и фильтрацию объявлений и кампаний;
• настроить вход через email, Telegram, SMS и приложение-аутентификатор;
• сверстать пользовательскую часть, адаптивную и удобную для поисковых систем;
• сделать десктопную версию админ-панели.

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

В кампаниях и таблицах много строк, и интерфейс должен оставаться быстрым даже на больших списках.

Бэкенд развивался параллельно с фронтендом, поэтому типы данных и запросы к API нужно было постоянно сверять с ним.

Пользовательскую часть рекламной платформы делали по архитектуре Feature-Sliced Design, и новый код должен был ей следовать.

Решение

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

Связь с бэкендом. Для рекламной платформы настроили автоматическую генерацию TypeScript-типов и готовых функций запросов из Swagger-схемы. Когда бэкенд меняет контракт, типы на фронтенде обновляются из схемы, а не вручную.

Поиск и большие списки. Сделали систему фильтрации и поиска объявлений и кампаний. Для больших списков и таблиц внедрили виртуализацию: браузер рисует только видимые строки.

Вход в кабинет. Аутентификация работает через email, Telegram, SMS и приложение-аутентификатор. Команда сделала формы ввода, проверку данных, обработку ошибок и подключение к API, а сессией пользователя управляет единый AuthContext.

Интерфейс кабинета. Сверстали адаптивную пользовательскую часть, удобную для поисковых систем, добавили уведомления о действиях пользователя, модальные окна фильтрации, загрузки картинок и редактирования текстов. Локальное состояние вынесли в глобальный стор на Zustand.

Админ-панель. Десктопную версию админки собрали по модульной архитектуре на React и Vite. Переиспользуемые компоненты собрали из примитивов shadcn/ui и подготовили их к подключению к API.

Сервис мониторинга обменников получил десктопную и адаптивную вёрстку всех экранов, а данные на них обновляются в реальном времени.

У рекламной платформы появились поиск и фильтры по кампаниям, вход через четыре канала, адаптивная пользовательская часть и десктопная админ-панель на общих компонентах. Большие списки не тормозят благодаря виртуализации, а типы данных фронтенда собираются прямо из Swagger-схемы бэкенда.

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

Как сделать, чтобы таблица с тысячами строк не тормозила?
Включить виртуализацию: браузер рисует только те строки, которые видны на экране. В этом проекте так сделали списки и таблицы рекламной платформы.

Зачем генерировать TypeScript-типы из Swagger?
Чтобы фронтенд и бэкенд не расходились. Когда бэкенд меняет ответ, типы и функции запросов пересобираются из схемы, и ошибка видна сразу при сборке, а не у пользователя.

Можно ли сделать вход через Telegram и SMS в одном кабинете?
Да. Здесь пользователь входит через email, Telegram, SMS или приложение-аутентификатор, а все способы работают через один общий контекст сессии.

Может ли Фортех вести фронтенд сразу нескольких продуктов одного заказчика?
Да. В этом проекте наши фронтенд-разработчики параллельно работали над сервисом обменников, кабинетом рекламной платформы и её админ-панелью.