Тестовое задание: Frontend (Junior) — «Душнила v2»

Раньше у нас было устройство «Душнила» (CO₂/температура), но сейчас железа нет.
В этом тесте используем живые публичные данные про качество воздуха в Самаре.

Источники данных

• Источник 1 — WAQI (World Air Quality Index) — нужен бесплатный токен.

  • Пример запроса к станции Самара:
    https://api.waqi.info/feed/A472336/?token=ВАШ_ТОКЕН
  • ⚠️ Демо-токен demo может не работать для Самары — получите свой на сайте WAQI и подставьте.

• Источник 2 — Sensor.Community (открытый, без токена), общий JSON:
  https://data.sensor.community/static/v1/data.json

  • Это массив измерений по городам. Для Самары возьмите ближайший сенсор по координатам:
    • Самара: lat = 53.1959, lon = 50.1000.
  • Типы значений: PM2.5 — P2, PM10 — P1, температура — temperature, влажность — humidity.

Допустимо добавить локальный sample.json (в public/) как крайний фолбэк, чтобы UI работал офлайн.

---

Макет

Сверстать по Figma-макету компонентно, с адаптивом под мобильный и 4K.

---

Задание по уровням

Уровень A — обязательный (≈ 1.5–2 часа)

1. Верстка по макету (React/Vue/Svelte — на ваш выбор), адаптив: мобилка + десктоп.
2. Данные:
   • Сначала попытка получить AQI/метрики из WAQI.
   • Если не удалось (ошибка/токен) — автоматически переключиться на Sensor.Community и взять ближайший к Самаре сенсор.
   • (По желанию) локальный sample.json в public/ как последний фолбэк.
3. Статус качества воздуха по AQI:
   • 0–100 → Норма (зелёный фон)
   • 101–150 → Повышено (жёлтый/оранжевый)
   • >150 → Превышение (красный)
   • Если AQI нет — показать «Нет данных».
4. Вторичный показатель (вторая карточка): показывать то, что реально приходит и обновляется чаще, в приоритете
   PM2.5 → Температура → PM10 → Влажность.
   Отображать значение + единицы (µg/m³, °C, %, …) и пометку «когда обновлено» (например, «обновлено 3 мин назад»).
5. Состояния интерфейса: loading и error (понятное сообщение + кнопка «Повторить»).

Уровень B — дополнительные (выберите любые 2, ≈ 45–60 мин)

• Автообновление данных каждую минуту + кнопка «Обновить».
• Глобальное состояние (Context/Pinia/Zustand и т. п.) для AQI/статуса.
• .env-настройки: токен/URL через переменные окружения, fallback на Sensor.Community.
• A11y-мелочи: таб-навигация, aria-live для статуса, видимый фокус.
• Юнит-тесты: 1–2 теста на функцию статуса по AQI и/или пересчёт AQI из PM2.5 (см. ниже).

Уровень C — опционально (< 30–45 мин)

• Оптимизация перерисовок (мемоизация, зависимости эффектов).
• Деплой (Vercel/GitHub Pages) + ссылка в README.

---

Подсказки по данным и расчётам

• WAQI: AQI → data.aqi, время → data.time.s, вторичные показатели часто в data.iaqi (например, pm25.v, t.v, pm10.v, h.v).
• Sensor.Community: это массив измерений. Найдите ближайший объект с нужным value_type.
  Простой расчёт «близости»: Math.hypot(lat1 − lat0, lon1 − lon0) (для теста достаточно).
• AQI из PM2.5 (US EPA): линейная интерполяция по брейкпоинтам:
  • 0.0–12.0 → 0–50; 12.1–35.4 → 51–100; 35.5–55.4 → 101–150; 55.5–150.4 → 151–200; …
  • Если есть только PM2.5 — пересчитайте его в AQI и покажите статус.

---

Как сдавать

• Ссылка на репозиторий (GitHub).
• (Опционально) ссылка на демо.
• README в проекте:
  • как запустить (npm install && npm run start / dev),
  • как настроить токен/URL через .env,
  • какие уровни A/B/C выполнены,
  • сколько времени ушло.

Важно: задание не оценивается, если проект не запускается командами:

npm install
npm run start

---

Критерии оценки

• Верстка и адаптивность (сетка, типографика, пиксель-кэр)
• Состояния UI (loading/error), аккуратность и UX-мелочи
• Логика данных (WAQI → Sensor.Community → fallback), корректный статус AQI
• Инженерная культура (структура, .env, тесты/деплой по выбору)
• Читаемость и чистота кода

---

Чек-лист для самопроверки

• Макет собран компонентно, мобилка и десктоп выглядят аккуратно
• При первом запуске есть loading, при ошибке — понятное сообщение
• AQI и статус отображаются; при AQI=82 статус попадает в «Норма»
• Вторичный показатель показывает PM2.5, а если его нет — температуру/PM10/влажность
• Автообновление/кнопка «Обновить» (если выбрали этот пункт уровня B)
• .env и README присутствуют (если выбрали этот пункт уровня B)
• Тест(ы) на статус/пересчёт AQI из PM2.5 (если выбрали этот пункт уровня B)