Skip to content

Latest commit

 

History

History
61 lines (52 loc) · 5.14 KB

README.md

File metadata and controls

61 lines (52 loc) · 5.14 KB

Frontend-developer

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

Задача

По представленному макету сделать одностраничное web-приложение ресторана быстрой еды. Макет: https://www.figma.com/file/JoADQpRXUjpBc5gObZkMIQ/Тестовое-задание.-Главная.?node-id=1:1687

Из обязательных технологий React + Redux. Остальное на ваш вкус.

Задачу можно выполнить на 3х разных уровнях:

начинающий (вёрстка и отображение данных)

  • товары загружаются с бэкэнда при открытии страницы (API отдающее данные реализуйте сами, node.js приветсвуется, но не обязателен)
  • категории расположенны на главной странице друг под другом (можно скролить вверх вниз)
  • товары разделены по категориям, названия категорий отображаются на панели категорий, при клике на название происходитс скролл к соответствующей категории.
  • панель с названиями категорий при скроле вниз "прилипает" к верхней части экрана.
  • у меню есть 2‑е вкладки, "доставка" и "самовывоз", при клике на "доставку" должны появляться панели для ввода адреса.
  • некоторые товары нельзя получить доставкой, поэтому при включённой вкладке "доставка" они должны скрываться.
  • вёрстка должна быть адаптивной (сделайте на свой вкус)

стандарт (функционал корзины и валидация данных)

  • товары можно добавить в корзину и удалить из неё. При нажатии на кнопку плюс, товар добавляется в корзину, и появляется кнопки изменения количества товара.
  • на кнопке изменения количества товара, при клике на минус, количество товара в корзине уменьшается, при клике на плюс увеличивается.
  • общая сумма товара отображается в корзине справа сверху.
  • при клике на кнопку корзины, блюда добавленные в корзину должны уйти на бэкэнд (можете отправлять на свой API или просто выводить в консоль), а корзина очищается.
  • при выбранной вкладке "доставка", на странице появляются 2а поля для ввода адреса. Нужно проверять заполненность полей адреса и не отправлять данные, пока пользователь не заполнит их, при попытке отправить корзину до заполнения надо показывать тултип.
  • состояние корзины надо хранить в redux

продвинутый (отслеживание скролла)

  • при скролле страницы, название категории которую просматривает пользователь должно подчёркиваться в панели категорий
  • для загружающихся картинок применена Lazy Load

Формат данных

товар:

{
"id" - идентификатор товара.
"name" - название товара
"price" - цена товара
"delivery" - true - если товар доступен для доставки, false - если не доступен
"img" - картинка товара формат разный
"new" - значок "новое"
"hit" - значок "хит"
}

категория:

{
"id" - идентификатор категории
"name" - название категории
"products" - массив с ID товаров в категории
}

Результат

  • задача рассчитанна в среднем на 12 часов работы (можно дольше, это средняя оценка)
  • результатом работы должна быть ссылка на ваш личный репозиторий + ссылка на работающее0 приложение загруженное на хостинг (например на heroku)
  • укажите на каком уровне вы выполняли задачу
  • напишите сколько времени по факту ушло на выполнение задачи
  • в ответе прикрепите ваше резюме