Используя современные инструменты для разработки интерфейсов реализовать страницу с отображением списка маршрутов (у каждого маршрута n-ое количество точек) и карту, на которой располагаются точки маршрута. С помощью запроса к Project OSRM получить геометрию полилиний и отрисовать её на карте.
Описание задания
Требуется реализовать приложение по отображению маршрутов на карте.
Используя заданный набор маршрутов (таблица 1), реализовать экран, в котором слева будет таблица со списком маршрутов, а справа карта. При выборе в таблице строки с маршрутом, выбранная строка должна подсветиться, а на карте должны отобразиться точки маршрута в виде маркеров и полилиния (polyline) трека движения по точкам маршрута, полученная из сервиса построения треков по дорогам OSRM (или другой). При выборе маршрута в таблице, на карте происходит центрирование и масштабирование таким образом, что весь маршрут должен попасть в область видимости карты. Одновременно на карте может отображаться только один маршрут – выбранный.
Для отображения карты желательно использовать пакет Leaflet, для компонентов — AntDesign, для хранения стейта компонентов и данных обязательно использовать Redux (redux-toolkit), для реакции на события — Sagas. В качестве основы приложения можно использовать React Create App или Vite. Использовать только функциональные компоненты и преимущественно функциональное программирование. Распределять код по каталогам, исходя из принадлежности к функциям: components, selectors, reducers, sagas, HTTP-services, helpers, etc. Обязательно задействовать sagas для получения трека по точкам, а также обязательно задействовать любой HTTP-сервис для обращения к API построения треков. Предусмотреть обработку ошибок от HTTP-сервисов. CSS-стили допускается писать в препроцессоре SASS/LESS.
Решение требуется предоставить в виде исходного кода, готового для развертывания на веб-сервере (приложить файловый архив или ссылку на github, например). Приложение нужно писать чисто и аккуратно, используя известные паттерны, сразу с рефакторингом - так, будто вы пишите production-приложение.
Для получения полилиний (polylines) маршрута можно использовать API OSRM.
Выполненные требования
- В приложении используется архитектура SPA.
- Приложение работает в Chrome и Firefox.
- В качестве дизайн-системы используется Ant Design.
- Код чистый и читабельный.
- Отсутствует дублирование кода, приложение разбито на компоненты, отформатировано в едином стиле.
- Приложение написано с использованием React и Redux (RTK Toolkit, Redux Saga).
- Приложение адаптировано под различные устройства.
- При входе на страницу отображается главная страница с описанием приложения.
- На странице с маршрутами отображается список маршрутов с точками. Присутствует прелоадер загрузки маршрутов.
- При выборе маршрута в таблице маршрут подсвечивается.
- При выборе маршрута происходит загрузка карты Leaflet (lazy). После загрузки карты маркеры по точками маршрута отображаются на карте.
- При выборе маршрута происходит запрос к OSRM для отрисовки полилиний. Реактивность организована таким образом, чтобы пользователь мог видеть маркеры на карте без обязательной загрузки полилиний (для обхода ошибок со стороны OSRM API).
- Данные с маршрутами замоканы в сервисе mockapi.io для имитации работы с сервером.
- Реализован псевдо-дизайн веб-приложения с навигацией.
- Реализован полноценный роутинг с отображением URL в адресной строке. Для отображения всех маршрутов можно использовать
/routes. Для отображения конкретного маршрута на карте можно обратиться к нему по его ID/routes/2.
Приложение написано с использованием следующего JavaScript стека.
Дизайн система
В качестве источника данных используется API:
- Для работы приложения требуется NodeJS версии
>= 18.17 - В корневом каталоге создать файл
.envи указать ключ:
VITE_API=[LINK TO API]
- Для запуска приложения в режиме разработчика использовать
npm run dev - Для сборки использовать
npm run build
✨ Превью
👤 Разработчик Indar Basto (@wowblvck)