Интерактивный погодный виджет с динамическим фоном

Описание

Небольшой pet-project, созданный для практики разработки на React + TypeScript и работы с внешними API.

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

Отдельное внимание в проекте уделено визуальной части интерфейса. Для оформления элементов использован эффект Liquid Glass, который позволяет создавать полупрозрачные карточки и панели поверх динамического фона.

Решение

Приложение разработано на React + TypeScript. После ввода города выполняется запрос к погодному API, из которого приложение получает текущие погодные условия и основные показатели.

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

Для отображения информации поверх видео использовал эффект Liquid Glass с полупрозрачными элементами интерфейса и размытием фона. Это позволило сохранить читаемость информации, не перекрывая динамическую визуальную часть приложения.

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

Результат

Получилось небольшое интерактивное приложение, в котором данные напрямую влияют на визуальное состояние интерфейса.

Проект стал практикой работы с React и TypeScript, внешними API и динамическим UI, а также позволил экспериментально реализовать визуальный стиль Liquid Glass в реальном веб-интерфейсе.

Моя роль: Frontend Developer

Стек: React, TypeScript, REST API, CSS.