Currency Tracker

О проекте

👉 Live Demo: Live Demo

👉 Figma Layout: Figma Layout

Стэк

Содержание

• Техническое задание
• API
• Функционал
• Тестирование
• Скриншоты проекта

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

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

API

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

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

Функционал:

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

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

• Для реализации логики приложения необходимо использовать поведенческий паттерн программирования "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. Также нужно использовать реальные координаты банков, но выбрать в каких будет лежать та или иная валюта - продумать самостоятельно. Эта страница должна быть реализована на классовых компонентах.

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

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

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

Скриншоты проекта