Прогноз погоды. Приложение на React для сайта

Что умеет приложение

1. Погода сейчас: температура, ощущаемая, ветер, влажность, давление в мм рт. ст.
2. Почасовой прогноз на 27 часов вперёд с разделителем на границе суток.
3. Прогноз на 7 дней с разбивкой на утро, день, вечер и ночь.
4. Восход, закат и длина светового дня.
5. 14 городов в шести часовых поясах; выбор запоминается до следующего визита.
6. Адаптивная вёрстка: от широкого монитора до телефона.
7. Понятные состояния загрузки и ошибки — с кнопкой «Попробовать снова».

Что под капотом

Погодное приложение легко написать за вечер. Разница между «работает у меня на ноутбуке» и «работает у всех и всегда» — в деталях, которые всплывают уже после
запуска. Здесь они закрыты сразу.

Время считается по часовому поясу города, а не браузера.

Метеосервис отдаёт время без указания зоны: строка `2026-08-21T14:00` означает 14:00 во Владивостоке. Наивная обработка выдала бы московскому пользователю владивостокскую погоду семичасовой давности — и никто бы этого не заметил, пока не пожаловался клиент из другого региона. Приложение получает «сейчас» через `Intl.DateTimeFormat` с нужной зоной и сравнивает строки со строками.

Быстрые клики не ломают данные.

Если переключать города подряд, ответы сервера приходят не в том порядке, в каком отправлялись — и на экране легко оказывается один город с погодой другого.
Устаревшие запросы отменяются, а результат сверяется с текущим выбором прежде, чем попасть на экран.

Интерфейс не мигает.

У загрузки два разных состояния. Первое — данных ещё нет, показываем экран загрузки. Второе — данные предыдущего города уже на экране, идёт запрос нового:
интерфейс остаётся на месте и помечается как обновляющийся. Это мелочь, которая отличает приложение от «студенческой работы» на глаз.

Сбой не роняет страницу.

Ошибку сети приложение показывает человеческим текстом с кнопкой повтора. Непредвиденная ошибка внутри интерфейса перехватывается Error Boundary, и вместо
белого экрана посетитель видит понятное сообщение. Остальной сайт при этом продолжает работать.

Данные обрабатываются за один проход.

Сервис присылает 168 часов параллельными массивами. Приложение раскладывает их по дням и периодам суток однократно, а не пересобирает заново на каждой
перерисовке. Итоговая сборка — около 72 КБ в сжатом виде.

Код читаемый.

Три слоя: запрос к API, управление состоянием, отображение. Каждый слой можно заменить, не трогая остальные, — например, подключить другой метеосервис, не
переписывая ни одного компонента. Исходники открыты, линтер проходит без единого замечания.

Стек

React 19 · Vite · SCSS (БЭМ, CSS-переменные, собственные SVG-иконки) · ESLint · Open-Meteo API

Без тяжёлых зависимостей: ни UI-китов, ни библиотек состояния — только то, что нужно задаче. Метеоданные бесплатны и не требуют ключа, то есть у блока нет
абонентской платы и лимитов, которые однажды закончатся.

Как это дорабатывается под вашу задачу

Приложение написано как заготовка, а не как законченный продукт «под ключ» — почти любой элемент меняется. Типичные доработки:

География

Свой список городов или точек (филиалы, объекты, склады, базы отдыха). Поиск по любому населённому пункту мира. Автоопределение местоположения посетителя.
Несколько городов одновременно — для сравнения.

Данные

Кроме базовой погоды доступны качество воздуха, УФ-индекс, вероятность осадков по минутам, высота волны и температура воды, снежный покров, пыльца. Набор
показателей подбирается под аудиторию: яхт-клубу нужен ветер и волна, агрофирме — заморозки и осадки, горнолыжному курорту — снег и видимость.

Внешний вид

Перекраска под фирменный стиль, тёмная тема, компактный режим виджета для шапки или сайдбара, полноэкранный режим для монитора в офисе или холле.

Сценарии

Уведомления о резкой смене погоды — на почту или в Telegram. Погода на выбранную дату для календаря мероприятий. Погодная подсказка в карточке тура, объекта
недвижимости или доставки.

Интеграция

Встраивание в существующий сайт на WordPress, Bitrix, Tilda или в самописную CMS — блоком, который не конфликтует с остальной страницей. Прокси-кэш на своём сервере, если посещаемость высокая и обращения к внешнему API хочется сократить.

Инженерная часть

Перевод на TypeScript, покрытие тестами, серверный рендеринг для лучшей индексации, мультиязычность.

Где такой блок приносит пользу

Туризм и отдых, загородная недвижимость, доставка и логистика, сельское хозяйство, строительство, event-агентства, спортивные и outdoor-проекты — везде, где решение посетителя зависит от погоды. Блок удерживает человека на странице и даёт повод вернуться.

Но погода здесь — только пример. Тот же каркас работает с любым внешним источником: курсы валют, остатки на складе, расписание, цены поставщика, данные из вашей CRM. Задачи одинаковые — запросить, не сломаться при сбое, показать понятно и быстро.

Как я работаю

Начинаю с задачи, а не с технологий: сначала выясняю, что должен сделать посетитель на странице, потом выбираю инструменты. Пишу так, чтобы через полгода в коде разобрался другой человек, — с комментариями по существу и внятной структурой. Отдаю исходники и инструкцию по запуску.

Нужен похожий блок — или сайт целиком?

Опишите задачу в двух-трёх предложениях: что за проект, какие данные нужно показывать, есть ли уже сайт. Отвечу с оценкой сроков и стоимости.