Frontend Service (React.js)

Frontend Service Dashboard

Аналитический дашборд для оценки пользовательских отзывов о банке https://www.gazprombank.ru/

---

Возможности

• Reviews Dashboard — список отзывов с фильтрацией, сортировкой и drill-down в детальные карточки.

• Analytics Dashboard — полный BI-дашборд:

  • KPI-карточки (количество отзывов, распределение тональностей и т.д.)

  • Диаграмма по тональностям (PieChart)

  • Популярные темы (BarChart)

  • Динамика количества отзывов по датам (LineChart)

  • Геоаналитика: карта с распределением отзывов по городам

• Детальная карточка отзыва — с темами, тональностями и переходом на оригинальный источник.

• Лёгкий и быстрый фронт на Vite + React + Chakra UI.

---

Стек

• React 18

• Vite

• Chakra UI

• React Router

• Recharts

• React Simple Maps

• Framer Motion

---

Установка и запуск

# клонирование репозитория
git clone https://github.com/ваш-аккаунт/hack-dashboard.git
cd hack-dashboard

# установка зависимостей
npm install

# запуск в dev-режиме
npm run dev

Приложение будет доступно на http://localhost:5173.

---

Структура проекта

src/
  components/         # UI-компоненты (KPI, графики, карты, навбар и т.д.)
  pages/              # страницы (Reviews, Analytics, API, DataLens, Review details)
  hooks/              # кастомные React-хуки
  services/           # работа с API и бэкендом
  utils/              # вспомогательные утилиты
  theme.js            # тема Chakra UI
  App.jsx             # роутинг приложения
  main.jsx            # точка входа
public/
  logos/              # логотипы сайтов-источников
  preview.png         # скриншот для README

---

Основные страницы

• / — Отзывы (ReviewsPage)

• /review/:id — Детальный отзыв (ReviewPage)

• /analytics — Аналитика (AnalyticsDashboard)

• /ml-prediction - Страница отправки отзыва и его аналитика (MLPredictionPage.jsx)