R50 1dd1537917b2647f59a4b0a16e27bf68
Web-разработка и дизайн.

Atmosphere - веб-приложение с погодой

Добавлено 19 июл 2020 в 17:23
Открыть приложение: https://sk1nzz.github.io/
Исходный код: https://github.com/sk1nzz/atmosphere

Веб-приложение(PWA) на JS.
Функционал:
- Показ погоды сейчас: температура, состояние погоды, ощущаемая температура, давление, влажность, ветер.
- Прогноз погоды на 5 дней по 3 часа. Показывает температуру и состояние погоды.
- Список городов. Можно добавить неограниченное количество городов, погода будет загружаться по одному выбранному городу.
- Выбор единицы измерения температуры между °C и °F.

Дизайн полностью свой. Иконки рисовал сам, также нарисовал визуальные эффекты для главного экрана, такие как облака, дождь и снег. Весь UI тоже свой, сторонние фреймворки не использовались. Вся графика за исключением эффектов на главном экране в формате SVG.
Верстка mobile-first с целью сделать приложение максимально неотличимым от нативного мобильного приложения. При этом некоторые элементы UI адаптируются под большие экраны.

Техническая часть:
- Приложение написано на фреймворке React. Состояние хранится в Redux, для асинхронных действий использовалась библиотека redux-thunk.
- Погода загружается с помощью API OpenWeatherMap. Приложение поставляется с встроенным ключом API, но вы можете сменить его в настройках.
- Приложение хранит настройки в Local Storage браузера и синхронизирует их с хранилищем Redux.
- Приложение является PWA: на мобильных устройствах вы можете установить его как нативное.
47decaa6e6