kode-internship-test-task: A repository from m0rtyn

Стажировка 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. Экран авторизации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стэк

Результаты

Срок

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

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

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

Вопросы

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

m0rtyn/kode-internship-test-task