/kode-internship-test-task

Тестовое задание для «Кодэровки» 2020

KODE's logo

Стажировка Frontend

Ноябрь 2020


СОДЕРЖАНИЕ

Первое задание

Напишите функцию getObjectProperty.

Она получает три аргумента:

  • первым — объект
  • вторым — путь к вложенному свойству объекта
  • третьим (опциональный аргумент функции) — значение по умолчанию, которое возвращается, если значения по указанному пути не существует

Функция возвращает значение указанного свойства, либо undefined, если свойства не существует.

Стоит придумать своё решение без подключения библиотек и внешней помощи. Мы хотим убедиться в ваших навыках преобразования данных.

Примеры использования

const getObjectProperty = (obj, path, defaultValue) => {
  // TODO: your code here
}

const obj = {
  'pupa': {
    'lupa': {
      'beep': 'boop',
    },
    'foo': 'bar',
  },
};

getObjectProperty(obj, "pupa.lupa"); // > { beep : 'boop' }
getObjectProperty(obj, "pupa.lupa.beep"); // > 'boop'
getObjectProperty(obj, "pupa.foo"); // > 'bar'
getObjectProperty(obj, "pupa.ne.tuda"); // > undefined
getObjectProperty(obj, "pupa.ne.tuda", true); // > true
getObjectProperty(obj, "pupa.ne.tuda", "Default value"); // > 'Default value'
Подсказки

Пффф, смелее! Здесь вы справитесь и без нас 🙌


Второе задание

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

Функциональность

Приложение содержит 4 экрана (прототипы представлены ниже):

1. Экран авторизации

Страница представляет собой форму авторизации с валидацией соответствующих полей (логина и пароля).

Авторизация — НЕ серверная, введённые данные достаточно проверить на клиенте.

Экран 1, Login

2. Экран подтверждения одноразового пароля

Подтверждение логина реализованное с помощью One Time Password (OTP).

Достаточно проверки на клиенте как и для первого экрана. Вы можете предложить свои варианты валидации и обработки ошибок.

Экран 2, OTP

3. Экран категорий и просмотра карточек

Выбор категорий и просмотр соответствующего им списка карточек Покемонов.

Изменяя категории в селектах вы получаете данные с сервера.

Используйте публичное APIhttps://pokemontcg.io/.

Экран 3

4. Просмотр карточки Покемона

Страница представляет собой отдельный экран с детальной информацией по Покемону.

Экран 4

Прототипы экранов (Wireframes)

Дизайн интерфейса остаётся на ваше усмотрение. Представленные макеты прототипов имеют примерный вид и отражают функционал.

Также по ссылке на макет вы найдёте экраны для двух задач со звёздочкой: кастомного селекта и отображения карточек с пагинацией.

Задания со звёзочкой

Если вы выполните следующие пункты (частично или полностью), то мы сможем точнее определить ваш уровень и степень вовлечённости. От этого зависит программа курса, собеседование и ваша оценка на протяжении стажировки.

Мы понимаем, что не все имеют достаточный опыт и/или возможности для выполения этих задач, поэтому оставляем их добровольными. Но тем ценнее их выполнение 😉

  • Компонент «Селект категорий» написан самостоятельно. Макет прототипа
  • Пагинация карточек. Макет прототипа
  • Любые анимации интерфейса
  • Быстрый просмотр покемона в модальном окне по клику на карточку
  • Сохранение сессии авторизованного пользователя после закрытия вкладки браузера. Например, через local storage браузера
  • Адаптивный дизайн

Стэк

Результаты

Срок

Две недели: ДО 28 ОКТЯБРЯ ВКЛЮЧИТЕЛЬНО

Условия принятия

  • Репозиторий на Github с решением задач
  • Вторая задача доступна на Github Pages и открывается по url
  • Доступ в приложение по ключам:
    • Логин — kode@kode.ru
    • Пароль — Enk0deng
  • В README.md репозитория указаны:
    • Декомпозиция: разбиение на подзадачи, их изначальная оценка и примерное время выполнения
    • Описание возникших сложностей в процессе
    • Что сделано из задач со звёздочкой
  • Ссылки на решённые задачи отправлены нам ответным письмом

Вопросы

Смело открывайте Github Issue к этому репозиторию с любыми вопросами, замечаниями и предложениями. Мы ответим вам в тот же день в тот же день, честно.

Пример открытого Issue

Уже заданные вопросы