Тестовое задание frontend⁠⁠

добрый день, хотелось бы получить оценку и мнение по поводу тестового задания(особенно по времени выполнения) на позицию frontend джуна с зп 30к

само тестовое:

Ориентировочное время выполнения 4-8 часов

Разработать SPA приложение по заданию ниже.

В качестве фреймворка предпочтительнее использовать vue.js. Но также рассматриваем кандидатов с выполненным заданием на react или angular.

В качестве сборщика предпочтительнее использовать Webpack.

--- ПРИЛОЖЕНИЕ и ЯДРО ---

Разработать родительское приложение, которое послужит контейнером для подключения дочерних блоков с бизнес-логикой.

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

Контент дочерних блоков должен подгружаться динамически с отложенной загрузкой (отдельным бандлом).

Далее необходимо разработать мини-ядро, которое будет грузиться вместе с родительским приложенияем и иметь api для загрузки дополнительных плагинов. Ядро должно быть доступно из кода каждой страницы родительского приложения.

Первым плагином ядра является плагин, реализующий паттерн шина данных. Он реализует в себе глобальную на уровне приложения шину данных. Каждый компонент системы может писать в нее события или читать их из нее (посредством подписки).

Вторым плагином ядра будет плагин, реализующий SDK для взимодействия с биржей binance (только 2 метода: получить биржевой стакан по определенному символу по REST и подписаться на обновления стакана по WS). (См. раздел Diff. Depth Stream в документации: https://github.com/binance-exchange/binance-official-api-doc...).

--- GUI КОМПОНЕНТЫ ---

В приложении на первой странице расположить компонент, который при помощи плагина ядра "SDK" забирает состояние стакана по определенному символу с биржи binance (можно применить limit=500, чтобы не тянуть стакан на всю глубину), подключается на обновления данных по ws для этого символа (по умолчанию берется по BTCUSDT) и отрисовывает стакан в подобном формате

|----------|----------|----------||----------|----------|----------|

|--Amount--|--Price---|--Total---||--Amount--|--Price---|--Total---|

|----------|----------|----------||----------|----------|----------|

| ... | ... | ... || ... | ... | ... |

Где левые три колонки относятся к ордерам тиба Bid, правые к ордерам типа Ask.

Price и Amount (Quantity) получаются из binance. Total рассчитывается на клиенте как Price * Amount.

Для верстки желательно использовать правила именования по БЭМу.

Цвета и отступы можно использовать на свой вкус.

Верстка должа быть резиновая и адаптивная для мобилки и десктопа. Breakpoint можно выбрать самостоятельно.

В мобильной версии отображать только колонки с Price и Amount.

Таблица должна помещаться по вертикали на странице (без скрола на страница) и должна содержать свой скрол-бар.

Скролл в таблице должен появляться по ховеру на таблицу, сама таблица и ее контент должны оставаться на месте при этом.

Внешний вид скроллбара не принципиален. Таблица скроллится внутри, шапка остаётся на месте.

Полоса скролл бара начинается под шапкой. При скролле значения в таблице не должны наезжать на шапку.

Компонент должен уметь:

* читать сообщение об изменении читаемого символа из плагина "шина данных". При изменении символа компонент должен очищать свое содержимое по предыдущему символу и загрузить данные по новому.

* транслировать в шину данных в виде сообщений все примененные diff-изменения.

На второй странице расположить компонент, сожержащий в себе:

* DropDown перечнем символов. Их можно зашить статически BTCUSDT, BNBBTC и ETHBTC

* Cписочный элемент

DropDown при изменении выбранного элемента отправляет в шину данных событие об изменении активного символа.

Cписочный элемент читает шину данных и отображает информацию о каждом diff-изменении в новой строке.

Дополнительное задание (если успеваете):

* Релизовать SSR для приложения

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

Главное - это общий полученный результат. Если возникнет непреодолимое по вашему мнению препятствие, пиши свой(и) вопрос(ы) нам. По завершении нам нужна ссылка выложенного тестового на GitHub Pages и ссылка на код.