Тестовое задание на позицию frontend-разработчика в Scentbird
-
Необходимо выполнить задание используя заготовку, доступную по ссылке: frontend-test
-
Ссылку на репозиторий с выполненным заданием прислать на andrei@scentbird.com
Инициализация
-
Установите необходимую версию nodejs (nvm или asdf)
-
Установка пакетов
npm install
-
Запуск приложения для разработки
npm start
-
Запуск приложения для продакшен сборки
npm run build
-
Доступ к приложению в браузере
http://localhost:8080
Общее
-
Задание заключается в реализации SPA-приложение на React на TypeScript.
-
Использование типов обязательно для всех компонентов.
-
Обязательно использовать react-router для роутинга.
-
Для стилей SCSS (LESS, POSTCSS) с использованием css modules.
-
Для работы с формой можно использовать любую библиотеку (formik, formular).
-
В описании ниже помимо основных задач есть дополнительные задания, далее (ДОП). Их выполнение не обязательно, но будет плюсом, если вы их выполните.
-
Желательно использовать современные фичи языка.
-
Если возникают вопросы по заданию - не стесняйтесь задавайте.
Задание
В апп должен быть роутинг для навигации по страницам /product/:id
, /checkout
.
В дизайне design/App.sketch
не представлена навигация по страницам - сделайте в шапке ссылки на эти страницы в любом виде на свое усмотрение. У ссылок должен быть дефолтный стиль и активный.
Страница товара
-
Страница состоит из двух колонок (desktop, tablet landscape): слева колонка с картинкой / справа колонка с информацией о товаре. Эти колонки должны быть резиновыми (ширина в %).
-
При выборе объема товара (1.7oz Subscription) должна изменяться информация в блоке выбранного товара (выше).
-
При клике на “Read more >” надпись должна заменяться на “< Show less” и раскрывать текст (текст можно использовать любой).
-
(ДОП) Обратить внимание на поведение кнопки “Add to queue” на разных экранах: если она помещается в один ряд с блоком “выбранный товар“, то она должна быть на одном уровне с ним, в противном случае переноситься на новую строку и занимать всю ширину экрана.
-
(ДОП) на мобильной версии обратить внимание на “1.7 oz One-time”, там скрыто слово “purchase”. Придумать решение как скрывать его, в противном случае можно везде писать без этого слова.
Страница формы
-
Чекбокс “Use this address…” должен в отжатом состоянии отображать ниже такую же форму как (выше) Shipping address, за исключением поля “Telephone”. Заголовок у этой формы должен быть “Billing address”.
-
Добавить валидацию в форму: в полях First Name, Last Name можно использовать только буквенные символы. В Street address - числа, пробелы, тире, буквы. Все поля кроме Apt/Suite должны быть required.
-
При сабмите в консоль должна выводиться объект с данными о полях.
-
(ДОП) Можно использовать нативные селекты в форме, но будет плюсом написание своего компонента выпадающего списка.
-
(ДОП) Кнопка Back должна вести на страницу с которой был сделан переход.
Инфраструктура
-
(ДОП) Сделать экспорт стилей в отдельный файл для production сборки
-
(ДОП) Использовать реальные данные для страницы продукта из публичного graphql.
Endpoint: https://api.scentbird.com/graphql
. Для обхода CORS, используйте webpack-прокси по адресу /graphql
.
Пример запроса продукта:
query Product {
product(input: { slug: "1000"}) {
data {
id
name
brandInfo {
name
}
image(fullSizeImage: true)
rating {
avgRate
}
reviews {
count
}
description
descriptionSections {
id
title
...on TextProductDescriptionSection {
text
}
}
}
}
}