Тестовое задание для Frontend-разработчика

Необходимо разработать SPA-приложение с использованием React/Redux/React router (Vue/Vuex/Vue router).

🔥 Как начать выполнять тестовое задание

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

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

Внимание! Не следует делать "fork" данного репозитория, и возвращать решение в виде PR.

Допускается создание шаблонного (boilerplate) приложения:

React:

Установка пакета create-react-app как глобальной зависимости (docs):

$  yarn global add create-react-app

Создание шаблона приложения:

$  create-react-app /path/to/projects/avtocod-frontend-test-task

Запуск приложения:

$  cd /path/to/projects/avtocod-frontend-test-task && yarn start

После этого в браузере по адресу http://localhost:3000 должно открыться шаблонное приложение.

Vue:

Установка пакета @vue/cli как глобальной зависимости (docs):

$  yarn global add @vue/cli

Создание шаблона приложения:

$  vue create /path/to/projects/avtocod-frontend-test-task

Запуск приложения:

$  cd /path/to/projects/avtocod-frontend-test-task && yarn serve

После этого в браузере по адресу http://localhost:8080 должно открыться шаблонное приложение.

Описание необходимого функционала

Приложение служит для создания запросов на генерацию условных отчетов о данных транспортных средств. Пользователь должен "авторизоваться", для получения возможности создавать отчёты.

Приложение состоит из двух страниц:

• Страница авторизации (url: /login)
• Внутренняя страница со списком отчетов (url: /)

Макеты страниц приложения:

• Figma prototype (для полноценной работы необхадима учётная запись Figma)
• demo-application.fig (Figma)

Изображения страниц:

• Auth page desktop | mobile
• Inner page desktop | mobile

Страница авторизации

При первой загрузке приложения пользователь попадает на страницу авторизации. После ввода логина и пароля (login: username, password: password) пользователь попадает на внутреннюю страницу со списком отчётов. Если были введены некорректные авторизационные данные(отличные от login: username, password: password), то необходимо вывести сообщение об ошибке авторизации. При успешной авторизации нужно запомнить (в cookies, localStorage или другом месте) данные об авторизации пользователя: логин, дату и время авторизации. При обновлении страницы приложения пользователь должен сразу попадать на внутреннюю страницу.

Внутренняя страница

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

Создание отчета

Условный отчет состоит из 4-х полей:

• Тип идентификатора (тип запрашиваемого идентификатора, принимает одно из следующих значений VIN, ГРЗ, BODY)
• Идентификатор (значение идентификатора)
• Дата создания (дата и время создания отчёта)
• Статус (принимает одно из следующих значений: DONE, PROGRESS, ERROR)

При заполнениии пользователем формы создания отчета и нажатии кнопки Создать, необходимо создать отчет, сохранить его в store приложения. Статус отчета выбирается случайным образом из допустимых значений.

Удаление отчета

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

Требования к используемым технологиям

Задание должно быть:

• Выполнено с использованием React/Redux/React router (Vue/Vuex/Vue router);

Требования к реализации

• Разрешено использовать любые сторонние npm-пакеты;
• После завершения работы в readme-файле вашего репозитория описать все действия, необходимые для запуска приложения с опциональными комментариями по решению задания.

Плюсами будут являться

• Интуитивно-понятное разбитие коммитов - одной конкретной задаче - один коммит (её правки - отдельный коммит);
• Текст коммитов - на английском языке;
• Для всего реализованного функционала должны быть написаны Unit-тесты (например, jest);
• Создание приложения "с нуля", без использования шаблонного приложения (create-react-app или vue-cli). Хотелось бы увидеть навыки конфигурирования сборки приложения с помощью webpack.
• Написание docker-compose.yml, который запускает написанное приложение.
• Адаптивная вёрстка (desktop/mobile).
• Использование Sass и BEM
• Реализация дополнительного функционала:
  • Авторизация должна считаться просроченной, если с момента последней загрузки приложения пользователем прошло более 1 часа. В таком случае пользователь должен быть перенаправлен на страницу авторизации.
  • При изменении списка отчетов (создании/удалении отчета) необходимо сохранять store приложения. При обновлении страницы пользоваелю должны быть доступны все существующие отчеты.
  • Данные формы создания отчета должны проходить валидацию.
    • Правила валидации VIN: link
    • Правила валидации ГРЗ: Первый, пятый и шестой символы - одна из кириллических букв А, В, Е, К, М, Н, О, Р, С, Т, У, Х. Со 2-го по 4-й и с 7-го по 9-й символы - цифры от 0 до 9. Общее число символов от 8 до 9.
    • Правила валидации BODY: строка от 7 до 15 символов. Допускаются символы латиницы, цифры, пробел и дефис(-).
  • При удалении отчета нужно запрашивать подтверждение пользователя

Результат выполнения

Ссылку на репозиторий с вашей реализацией необходимо отправить нашему HR или TeamLead, от которого вы получили ссылку на данный репозиторий.

Приложение должно успешно запускаться после выполнения:

$ git clone https://github.com/%USERNAME%/frontend-developer-test-task.git ./test-task && cd $_
$ yarn install && yarn serve

И проходить все тесты (при их наличии):

$ yarn test

Если в процессе выполнения у вас возникнут какие-либо неразрешимые вопросы - создайте соответствующий issue в данном репозитории. На вопросы касательно деталей реализации ("А лучше так и так?") - вероятнее всего вы получите ответ "Как вы посчитаете правильнее".