Ссылка на деплой

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

Цель работы

Реализовать интерфейс по аренде транспортных средств

Технические требования

• При выполнении работы не разрешается использовать UI библиотеки
• Работа должна быть выполнена с использованием фреймворка Nuxt
• Каждый компонент должен являться SFC
• В секции template не разрешается использовать HTML препроцессоры
• В секции script допускается использование только JavaScript
• Секция style должна быть написана с использованием css-modules

Задачи

Часть 1

1. Сверстать страницу выбора транспортного средства
2. Сверстать детальную страницу транспортного средства
3. Реализовать мобильную версию

Пояснения

• Каждая детальная страница должна иметь свой адрес
• Переключение между типами информации (Specifications, Team, Rent terms) строится на основе вложенных маршрутов
• В фильтре по типу выпадающий список стилизовать не нужно. Это должен быть нативный селект

Часть 2

1. Интегрировать взаимодействие с api
2. Для всех страниц осуществить связку с данными, полученными из api
3. На страницу выбора транспортного средства реализовать фильтр по типу

Пояснения

• В папке api проекта имеются два файла: vehicles.json и request.js. Перед загрузкой приложения необходимо предварительно загрузить данных с помощью метода getVehicles из request.js. Результат работы функции getVehicles сохраняется в хранилище Vuex. Метод getVehicles может вернуть ошибку с вероятностью 1/3. В этом случае ошибку необходимо обработать
• Типы для фильтра на странице выбора должны быть сгенерированы из типов полученных транспортных средств
• На странице выбора транспортного средства, данные каждой карточки должны браться из объекта соответствующего т.с.
• На детальной странице транспортного средства из объекта соответствующего т.с. должны браться: заголовок, описания для трех вкладок, цена и изображение. Вся остальная информация хардкодится

Часть 3

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

Пояснения

• После добавления нового транспортного средства, оно помещается в хранилище и отображается на странице выбора. Тип добавляемого транспортного средства должен быть custom

Требования к результату

• Результат работы должен соответствовать макету
• Верстка должна быть резиновой на всех разрешениях до 1440px. После 1440px размеры остаются фиксированными, увеличиваются области справа и слева
• Должна быть реализована мобильная версия