Modsen Currency Tracker

О приложении

Первое тестовое задание Modsen. Веб-приложение Modsen Currency Tracker предназначено для конвертации валют и отлеживания изменения их цены с течением времени. Приложение разработано с использованием JavaScript, фреймворка React и других технологий. Оно взаимодействует с открытыми API, чтобы получать актуальные данные о курсах валют.

Инструкция по запуску проекта

1. Склонируйте репозиторий к себе на устройство;
2. Для запуска веб-приложения необходимо в корне проекта создать файл .env и определить следующие перменные:

• CURRENCY_API_KEY - ключ полученный на сайте;
• MAPBOX_API_KEY - ключ полученный на сайте;
• REACT_APP_CURRENCY_API_URL - отсается без изменений;
• Значение остальных переменных может изменятся по вашему усмотрению.

REACT_APP_CURRENCY_API_KEY = CURRENCY_API_KEY
REACT_APP_CURRENCY_API_URL = https://api.currencyapi.com/v3/latest
REACT_APP_CURRENCY_API_SPLITTER = ,

REACT_APP_CACHE_LIFETIME = 86400000
REACT_APP_CACHE_CURRENCY_RATES_KEY = currencyRates
REACT_APP_CACHE_LAST_UPDATE_KEY = lastUpdated

REACT_APP_CACHE_THEME_KEY = theme

REACT_APP_DECIMAL_PLACES = 5

REACT_APP_MAPBOX_API_KEY = MAPBOX_API_KEY

В каталоге проекта вы можете запустить следующие команды:

1. yarn start Запускает приложение в режиме разработки. Откройте http://localhost:8080, чтобы просмотреть его в браузере.
2. yarn start После завершения выполнения команды в директории проекта появистя папка dist с бандлом проекта.
3. yarn test Запускает unit-тесты вeб-приложения. Написанные с помощью Jest.
4. yarn cypress:open Запускает e2e-тесты вeб-приложения. Написанные с помощью cypress.

Tестовое задание приложение Modsen Currency Tracker

Содержание

• Техническое задание
• API
• Необходимый функционал
• Пример графического представления
• Используемые технологии
• Тестирование
• Полезные ссылки

Техническое задание

Необходимо реализовать React приложение "Modsen Currency Tracker" по предоставленному дизайну из Figma.

API

Список API для использования(если представленные API не удовлетворяют каким-либо условиям задания, можно использовать любые другие открытые API для определения курса валют):

• Exchange rates - руководство с данными для конвертера валюты.
• Currency Conversion API - конвертация валюты.

Необходимый функционал:

• реализация конвертера валют;
• график изменения валюты в течение месяца(минимум две валюты);
• смена темы приложения;
• elastic search - поиск с выпадающим списком.

Дополнительные указания:

• Реализация Loader для отображения запасного UI при подгрузке данных.
• Использование любых библиотек для стилей, валидации и так далее - запрещены, кроме тех, которые рекомендуемы в пункте “Используемые технологии”.

Пример графического представления:

Ссылка на макет: Макет "Modsen Currency Tracker".

Также проект предполагает:

• Для реализации логики приложения необходимо использовать поведенческий паттерн программирования "Observer", который создаёт механизм подписки, позволяющий одним объектам следить и реагировать на события, происходящие в других объектах (см. подробнее паттерн Observer);

• Организацию файловой структуры react приложения. Ссылка на структуру: Cтруктура проекта;

• Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: Требования к тестовому заданию;

• Деплой приложения на платформу GitHub Pages или иные другие (Netlify, ...);

• Настройку конфигурации babel, eslint, prettier;

• Использование библиотеки prop-types для проверки входящих props;

• Использование языка typescript (по желанию);

• Обработку ошибок через паттерн Error Boundaries;

• Использование алиасов для импортирования файлов;

• Самомстоятельную настройку webpack для dev и production сборки;

• Оптимизацию дизайна под мобильные устройства;

• Покрытие тестами всего приложения (cypress, jest);

• Реализацию классовых и функциональных компонентов;

• Оптимизацию приложения;

• Обязательный deploy приложения;

• Реализацию всех принципов SOLID;

• Обязательную анимацию при наведения, нажатии на кнопки, появлении элементов на странице при рендере и скролле.

Описание экранов

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

1. Страница Home На главной странице располагаются карточки валют, где отображается текущий курс и название валюты. При нажатии на любую карточку, должно открываться модальное окно(которое необходимо реализовать самостоятельно) с информацией о карточке и поле, где можно выбрать валюту, отличающуюся от текущей, чтобы можно было узнать ее курс относительно выбранной валюты. При перезагрузке страницы повторные запросы не должны отправляться к API, данные должны быть закешированы. Эта страница должна быть реализована на функциональных компонентах.

2. Страница Timeline На странице должен быть реализован график изменения выбранной валюты за месяц(на макете представлен пример графика, который необходимо реализовать). При выборе валюты данные для определенного дня должны вводиться пользователем, таким образом вводимые данные влияют на построение графика(продумать ввод данных самостоятельно для представленного графика). Также нужно использовать координаты: день и значение валюты (пример используемых данных можно посмотреть по ссылке API, которая дана в тестовом задании). В случае когда данные для построения графика будут введены на 30 дней, нужно чтобы на экран отображалось окно с информацией об успешном составлении графика(это необходимо реализовать с помощью паттерана Observer). Эта страница должна быть реализована на классовых компонентах.

3. Страница Bank card На странице отображается интерактивная карта, на которой отмечены банки города. При выборе валюты на карте появляются точки банков, где данная валюта есть в наличии (минимум должно быть две точки). Реализовать поиск необходимо с помощью elastic search. Также нужно использовать реальные координаты банков, но выбрать в каких будет лежать та или иная валюта - продумать самостоятельно. Эта страница должна быть реализована на классовых компонентах.

Используемые технологии

Для react

• node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код).
• babel - транспайлер, преобразующий код из одного стандарта в другой.
• axios - библиотека для создания асинхронных запросов.
• chart-js - javascript библиотека для построения диаграмм.
• mapbox-gl - библиотека для построения интерактивной карты.
• eslint - линтер для JavaScript кода.
• yarn - менеджер пакетов.
• react - JavaScript-библиотека для создания пользовательских интерфейсов.
• webpack - сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл.
• prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных.
• redux - инструмент для управления состоянием данных и пользовательским интерфейсом в приложениях.
• cypress — e2e тестирование для веб приложений.
• jest — unit-тестирование

Тестирование

Реализовать тестирование c полным покрытием функционала приложения:

• Модуль конвертера валюты;
• Модуль навигации;
• Модуль смены темы;
• Модуль диаграммы.

Для react native

Will be soon...

Полезные ссылки

React

React hooks

React router dom

Typescript

Redux

Webpack

Axios

Chart JS

Eslint

Babel

Тестирование Cypress

Тестирование Jest

Heroku

Husky