Weather App v1.0.0

Приложение для просмотра погоды с интерактивным интерфейсом и поддержкой тем.

Описание

Это веб-приложение отображает текущую погоду, почасовой и недельный прогноз с использованием API WeatherAPI.com. Современный адаптивный интерфейс построен на Tailwind CSS с поддержкой светлой и темной тем.

Функциональность

• Текущая погода: температура, влажность, скорость ветра, описание условий
• Таймлапс: почасовой прогноз погоды на день с визуализацией
• Недельный прогноз: погода на 7 дней вперед
• Интерактивные графики: температура и осадки с помощью Chart.js
• Адаптивный дизайн: корректное отображение на всех устройствах
• Выбор городов: предустановленный список российских городов
• Система тем: светлая, темная и автоматическая (по системным настройкам)
• Анимации: плавные переходы и hover-эффекты

Технологии

Backend

• Node.js v8+ (устаревшая версия, рекомендуется обновить до LTS)
• Express.js v4.17.1 - веб-сервер

Frontend

• HTML5 - семантическая разметка
• JavaScript (Vanilla) - клиентская логика
• Tailwind CSS v3.4.16 - утилитарный CSS фреймворк
• PostCSS v8.5.6 - обработка CSS
• Autoprefixer v10.4.21 - вендорные префиксы

Библиотеки и CDN

• Lucide Icons - современные SVG иконки
• Swiper.js v11 - слайдер для таймлапса
• Chart.js - построение графиков
• Google Fonts (Inter) - шрифты

Стилизация

• CSS переменные для тематизации
• Плавные анимации переходов
• Цветовые схемы для разных погодных условий

Установка и запуск

Системные требования

• Node.js v8+ (⚠️ устаревшая версия, рекомендуется использовать LTS версию Node.js 18+)
• npm для управления пакетами

Установка

1. Клонируйте репозиторий:

   git clone <repository-url>
   cd weather-app
   

2. Установите зависимости:

   npm install
   

3. Соберите CSS (если необходимо):

   npm run build-css
   

4. Запустите сервер:

   npm start
   

5. Откройте браузер: Перейдите по адресу http://localhost:3000

Доступные скрипты

• npm start - запуск сервера разработки
• npm run build-css - сборка Tailwind CSS из input.css в output.css
• npm run watch-css - автоматическая пересборка CSS при изменениях

API и внешние сервисы

• WeatherAPI.com - источник данных о погоде
• Google Fonts API - загрузка шрифтов Inter
• CDN сервисы для библиотек JavaScript (jsDelivr, unpkg)

Разработчик

Разработано: Fovway

Контакты:

• Email: admin@fovway.ru

Рекомендации

Обновление Node.js

Текущая конфигурация требует Node.js v8, но рекомендуется использовать актуальную LTS версию (18+) для повышения безопасности и производительности.

Настройка API ключа

Для полноценной работы приложения необходимо:

1. Зарегистрироваться на WeatherAPI.com
2. Получить бесплатный API ключ
3. Добавить ключ в переменные окружения или конфигурацию сервера(server.js - const API_KEY = "API_KEY_HERE";)

Производительность

• Приложение использует CDN для внешних библиотек, что обеспечивает быструю загрузку
• CSS собирается с помощью Tailwind CSS для оптимального размера файлов
• Используйте npm run watch-css во время разработки для автоматической пересборки стилей

Лицензия

MIT