Тестовое задание для VK
https://vk-dropdown-demo.herokuapp.com/
*При наведении на элемент в дропдауне появляется title в котором содержится доменное имя. Первикс (local) указывает на то, что данные взяты из локальной базы пользователей, хранящейся в браузере. При этом локальный поиск не включает поиск по домену.
В папке client/src находятся основные файлы для клиентской части - скрипты и стили. При помощи gulp скрипта они собираются в один js файл и один css файл, в обоих случаях создаются минифицированые версии. Помимо сборки в директорию /dist скрипт копирует бандлы на сервер в папку server/public
client/src/js/dropdown.js - Содержит всю логику работы выпадающего списка, включая манипуляию данными. Подразумевается, что в компонент передаются источники данных, с которыми компонент может взаимодействовать.
client/src/js/app.js - В данном файле инициализируется демо-приложение, которое добавляет на страницу нескольок списков с разными настройками.
client/src/js/search.js client/src/js/keymap.js client/src/js/translit.js - Отвечают за логику поиска с учетом неправильных раскладок, кроме того в search.js содержится источник данных (Функция, возвращающая Promise), который используется для запроса на сервер.
client/src/js/set-frontend-users.js - Записывает первую 1000 пользователей в локальное хранилище браузера.
В данной папке проинциализиравно Express.js приложение.
В /server/routes/users.js находится ендпоинт для поиска.
В /server/core находятся файлы, аналогичные тому, что есть на клиенте для поиска с учетом неправильных раскладок, в данном варианте идет поиск по домену
Есть некоторые детали реализации, которые можно реализовать, но которые не были указаны в задаче и требуют времени. При необходимости могу сделать.
- Подсветка поисковой фразы в результатах поиска.
- Кастомный скроллбар.
- Улучшеная логика сортироки резултатов поиска на бекенде - выставление весов не только на основании призка "изначальный текст / транслит / измененная раскладка", но и на основании поля по которому искали. Разбиение поискового запроса по словам, выставление весов. (Тут уже желательно иметь БД и полнотекстовый поиск)
- Добавить debounce для запросов на сервер.