Skip to content

Проект : Приложение с прогнозом погоды

Notifications You must be signed in to change notification settings

script696/weatherly

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Проект Weatherly

Приложение 'Прогноз погоды'

Посмотреть этот проект

О проекте


Screen Shot

Посмотреть макет

Прогноз погоды - приложение, в котором реализован суточный и недельный проноз погоды с возможностью выбора города. Для изучения технологий Style Components и Redux Toolkit мною была выбрана идея разработчки небольшого приложения, в которое бы хорошо вписалось применение данных концепций. В качестве сервиса предоставления погоды был выбран "Open-Meteo" с открытым API.

Использованные технологии

  • React
  • TypeScript
  • Styled Components
  • Redux Toolkit
  • Figma
  • Синтаксис ES6
  • REST API
  • Webpack
  • Проект подключен к серверу и размещен в интернете с использованием GitHub Pages

Установка

1. Клонируйте репозиторий командой:

git@github.com:script696/weatherly.git

2. Установите пакеты командой:

npm i

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

npm start

Запуск приложения в режиме разработки.
Откройте http://localhost:3000 чтобы увидеть результат в браузере.

Страница обновится автоматически при внесении изменений.

Как это можно использовать

  1. При нажатии на кнопку меню в верхнем правом углу экрана появится список с жоступным списком городов. Выберите город для отображения погоды в интересующем вас месте
  2. В верхней части экрана находится информация о текущем городе, а так же о времени последнего обновления с индикатором. Во время обновления данных или в случае неудачного запроса индикатор становится красным. Время обновляется с каждым новым запросом при переключении города или автоматически каждые 2 минуты.
  3. В нижней части экрана находится слайдер с погодой на 24 часа начиная с текущего. Вы можете пролистывать слайдер свайпами влево/вправо
  4. В левой части находится вертикальный слайдер для масштабирования экрана приложения. В дефолту масштаб == 50%
  5. На странице недельного прогноза погоды отображается информация о погоде на неделю начиная с текущего дня.
  6. В средней части экрана находится кнопка 'Today' для перехода на главную страницу

Что планируется улучшить

Сделать форму для ввода произвольного названия города с автокомплиттером.

Авторы