Астрахань
не верифицирован
Был на сайте:
Клиент — крупная российская компания — поставил задачу создать внутреннюю аналитическую платформу для мониторинга и визуализации технологических трендов, инвестиционных направлений и стратегических инициатив.
Цель проекта: дать аналитикам и руководству единый инструмент для навигации по большому объёму данных о технологиях, рынках и регуляторной среде — в формате интерактивного радара вместо статичных таблиц и презентаций.
Что было разработано:
Фронтенд-часть платформы на React 18 + TypeScript с четырьмя независимыми аналитическими модулями:
— Технологический радар — интерактивная D3.js-визуализация технологических кластеров и направлений с зумом, фильтрацией по сегментам, поиском по молекулам и детальными карточками в боковой панели.
— ESG-радар — отображение ESG-проектов по сегментам с ранжированием по уровням роста (CAGR) и привлекательности, с возможностью перехода к детальной информации по каждому проекту.
— FinTech-радар — визуализация финтех-трендов и слабых сигналов по секторам, с фильтрами, отдельным режимом слабых сигналов и карточками трендов.
— Государственные инициативы — карта государственных программ и организаций с иерархической структурой данных и фильтрацией.
Технические особенности: интеграция с 5 независимыми REST API (Strapi-бэкенды), JWT-аутентификация, кастомная SVG-визуализация на D3.js, адаптивный интерфейс на MUI + Styled Components, деплой через Docker + Nginx.
Разработал фронтенд-часть аналитической платформы с нуля — от архитектуры до деплоя.
Архитектура и стек
Выбрал React 18 + TypeScript как основу: строгая типизация исключила целый класс ошибок при работе с данными от множества API. Для маршрутизации — React Router v6 с отдельными страницами под каждый аналитический модуль.
Визуализация
Ключевой компонент — интерактивный радар-чарт на чистом D3.js с кастомной SVG-отрисовкой: концентрические окружности уровней зрелости, сегменты направлений, точки кластеров с логотипами. Реализовал три режима отображения (обычный, молекулярный, молекулярный v2) с переключением без перезагрузки. Добавил зум и панорамирование через react-zoom-pan-pinch, режим отображения всех подписей и скрытие перекрывающихся лейблов.
Интеграция с данными
Подключил 5 независимых REST API (Strapi). Под каждый источник написал отдельный кастомный хук (useFetchDataTehnologies, useFetchDataEsg, useFetchDataFintech и др.) с обработкой состояний загрузки и ошибок. Авторизация через JWT с хранением токена и отдельными страницами входа и выхода.
UI-компоненты
Построил систему боковой панели с несколькими режимами (карточки списка, детальная информация, фильтры, поиск) на react-pro-sidebar + MUI. Фильтрация работает через контекст (createContext) без лишних ре-рендеров. Для графиков внутри карточек использовал Recharts.
Модули платформы
— Технологический радар: кластеры и направления с фильтрацией по нацпроектам, поиском молекул, детальными карточками с переходом по URL (/molecule/:moleculeName).
— ESG-радар: проекты по сегментам с ранжированием по CAGR и инвестиционной привлекательности, открытие карточки проекта через query-параметр.
— FinTech-радар: тренды и слабые сигналы по секторам, два режима отображения, фильтры по кластерам.
— Государственные инициативы и организации: два отдельных дашборда с иерархическими данными и фильтрацией по категориям.
Деплой
Настроил сборку через react-scripts build с Docker-контейнером и Nginx в качестве веб-сервера, конфигурация которого обеспечивает корректную работу SPA-роутинга (fallback на index.html).
Платформа была разработана и запущена в продакшн. Клиент получил работающий инструмент, доступный внутренним пользователям через веб-браузер без необходимости установки дополнительного ПО.
Что получил клиент:
— Единую точку входа для работы с четырьмя аналитическими направлениями вместо разрозненных таблиц и презентаций.
— Интерактивную визуализацию, где каждый объект на радаре кликабелен: пользователь сразу видит детальную информацию по кластеру, проекту или тренду в боковой панели — без перехода на другую страницу.
— Систему фильтрации и поиска, позволяющую быстро находить нужную технологию или инициативу среди сотен объектов.
— Гибкую платформу для наращивания данных: контент управляется через CMS (Strapi) без участия разработчика — аналитики сами добавляют и редактируют записи.
Практическое применение:
Платформа используется аналитическими и стратегическими подразделениями компании для мониторинга технологической повестки, оценки зрелости технологий, отслеживания ESG-проектов и анализа FinTech-трендов. Формат радара позволяет на одном экране видеть общую картину и при необходимости «провалиться» в детали конкретного объекта.
Технический результат:
— SPA полностью работает на стороне клиента, сервер отдаёт только статику — минимальная нагрузка на инфраструктуру.
— Docker-контейнер с Nginx обеспечивает воспроизводимый деплой на любом окружении.
— Модульная архитектура (отдельные страницы, хуки, контексты под каждый раздел) позволяет добавлять новые аналитические модули без переработки существующего кода.
Пожаловаться
