В приложении должна присутствовать панель навигации содержашая две вкладки: / – обзор рынка /liquidity – страница анализа ликвидности
Приложение должно получать все необходимые данные из общедоступного API coinmarketcap.com/api/ Эндпоинт: /cryptocurrency/listings/latest
Вкладка / Market Overview
Должна рендериться таблица отсортированная по rank см. скриншот 1
Вкладка /liquidity Liquidity
Должна отображать диаграмму рассеяния (scatter plot chart), где ось X Market Capitalization ось Y Volume (24h) ось Z (или размер точки) это абсолютное изменение цены (24h) см. скриншот 2
Диаграмма должна быть интерактивной. Когда пользователь наводит курсор на точку, должен отображаться тултип с информацией (name, marketcap, volume, price change). Каждая точка на диаграмме представляет одну валюту.
По умолчанию /cryptocurrency/listings/latest возвращает топ 100 валют. Необходим глобальный контрол с ниспадающим меню, позволяющий регулировать эту величину, использующий следующие значения: 10 50 все
Изменение значение контрола должно влиять на обе вкладки.
Технические требования: Реакт Любой UI-фреймворк. (Bootstrap, Semantic-UI) или же кастомное решение Любая популярная библиотека для графиков. Популярный стейт-менеджер. Предпочтительней Redux, но можно и useContext Приложение должно работать в последних версиях Хрома, Сафари, ФФ и Эджа Респонсивная верстка Тайпскрипт желателен, но не обязателен