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

Необходимо собрать и вывести в продакшен полнофункциональный интерфейс для системы мониторинга на основе предоставленных макетов 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 файла проекта

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

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