Разработка веб-интерфейса системы мониторинга

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

Основные функциональные блоки

  • Панели датчиков с отображением текущих показателей
  • Интерактивные графики для визуализации данных
  • Система генерации и экспорта отчетов
  • Модуль управления пользовательскими аккаунтами
  • Журнал системных событий и тревог
  • Механизм авторизации через QR-код
  • Общий сайдбар с фильтрами и навигацией

Технические требования

Стек технологий

  • Фронтенд: Nuxt 3 / Vue 3
  • Управление состоянием: Pinia
  • Стилизация: Tailwind CSS
  • Графики: Chart.js
  • HTTP-клиент: axios или fetch
  • Тестирование: Vitest/Jest (unit), Playwright/Cypress (E2E)

Ключевые задачи

  • Реализация всех ключевых страниц согласно макетам
  • Подключение к бэкенд-API с автоматическим обновлением данных
  • Создание адаптивного дизайна для мобильных, планшетных и десктопных устройств
  • Разработка аккуратных состояний: загрузка, ошибка, пустые данные
  • Точное соответствие макетам Figma (pixel-perfect)
  • Обработка длинных текстов: обрезка с многоточием и tooltip/раскрытием

Требования к качеству

  • Безопасность: защита от XSS-атак, предотвращение утечек токенов
  • Производительность: разбиение кода на чанки, виртуализация длинных списков
  • Тестирование: написание базовых unit- и end-to-end тестов
  • Документация: обновление README файла проекта

Ожидаемый результат

Полностью функционирующий, адаптивный и безопасный интерфейс системы мониторинга, готовый к использованию в продакшен-среде, с полным соответствием предоставленным дизайн-макетам.