Финтех
Финтех-платформа
Клиентская финтех-платформа для работы с данными компаний, заказа индивидуальных инвестиционных исследований, управления отчётами, работы с заявками на вторичном рынке и генерации PDF-документов с большим объёмом данных. Проект объединяет React/TypeScript-портал с авторизованными пользовательскими сценариями, расширенной фильтрацией каталога, AI-assisted взаимодействием с отчётами и серверным PDF-движком на базе React/Next.js-шаблонов и headless Puppeteer.
- Работы
- Веб-дизайн, UX/UI, Frontend, API
- Технологии
- React, TypeScript, Vite, Next.js, TanStack Query, Tailwind CSS, shadcn/ui, Radix UI, Node.js, Express, Puppeteer, Chart.js, Docker, Nginx, Vitest, React Testing Library, MSW, Playwright, Google Tag Manager, Hotjar, Formbricks
- Страна
- Кипр
- Ссылка
- portal.arcanis.com
Ключевые особенности
- 01
Аутентификация с защищенными маршрутами и обновлением токена
- 02
Каталог компаний с расширенными фильтрами, пагинацией, URL-синхронизируемым состоянием и отзывчивым макетом
- 03
Сценарии заказа и повторного заказа исследований с индивидуальными факторами
- 04
Доступ к купленным отчётам, скачивание, шаринг и отслеживание статуса исследования
- 05
AI-ассистент с чат-тредами, шаблоны промтов, оптимистичные обновления и markdown-ответы
- 06
Сценарии вторичного рынка для bids, asks, offers и действий по статусам
- 07
Кредиты, цены, подписка, checkout success/cancel
- 08
Серверная генерация PDF с React/Next.js-шаблонами и headless Puppeteer
- 09
Ориентированная на продакшн настройка с аналитикой, feedback-инструментами, Docker/Nginx-деплоем и автоматизированными тестами
О проекте
Arcanis Client Portal — это финтех-платформа, построенная вокруг полного workflow инвестиционного исследования: поиска компаний, заказа исследований, настройки факторов анализа, доступа к отчётам, шаринга, AI-assisted анализа и работы с заявками на вторичном рынке.
Была разработана продуктовая frontend-часть клиентского портала: пользовательские сценарии, расширенные фильтры каталога компаний, управление отчётами, заказ исследований, состояние кредитов и подписки, адаптивные макеты, skeleton-макеты загрузок, модальные окна, уведомления, проброс пользовательских ошибок и мобильная навигация.
Важной частью системы стал серверный движок генерации PDF. Он рендерит инвестиционные отчёты с большим объёмом данных из React/Next.js-шаблонов, а затем конвертирует print-ready HTML в A4 PDF с помощью headless Puppeteer, print CSS, графиков, пагинированных таблиц и валидации объёмных payload-данных с бэкенда.
Реализация была сфокусирована на том, чтобы сложные исследовательские сценарии воспринимались как единый процесс: пользователь мог пройти путь от поиска компании к заказу исследования, доступу к отчёту, шарингу, AI-ассистенту и доставке PDF, не выходя из контекста портала.
Mobile UX для платформы
Платформа сохраняет сложные исследовательские сценарии удобными на мобильных устройствах: статус отчёта, ключевые данные компании, действия с исследованием, шаринг, скачивание и AI-чат остаются под рукой.
PWA поддержка и кэширование в runtime помогают приблизить портал к опыту, схожему с установкой приложения, а не просто к странице с адаптивностью.
Аутентификация и восстановление
Портал использует frontend-managed сессии на базе AuthContext, защищенные React Routes и типизированный API client. После логина или аутентификации по Google, access token хранится в памяти модуля, а пользовательский снимок — в localStorage; защищенные страницы всегда ждут инициализации auth перед рендером. API-запросы добавляют bearer token и включают credentials, а после 401-ответов восстанавливаются через вызов refresh endpoint, обновление in-memory token и повтор исходного запроса. Если refresh не проходит, пока пользователь онлайн, приложение очищает локальное пользовательское хранлище и разлогинивает пользователя.
Следующий проект
Система мониторинга автодома