Тестовое задание на вакансию “Frontend Developer”
О нас:
Dapplets Project - cтартап-криптоплатформа для приложений Augmented Web. Мы переносим идеи децентрализации и устойчивости на уровень визуального UI/UX традиционных сайтов.
Мы строим платформу Аугментированного веба, состоящую из браузерного плагина и децентрализованных приложений (дапплетов), основанных на крипто-технологиях.
Наша платформа создается в виде open-source framework для разработчиков со всего мира.
В ваши задачи будет входить:
разработка клиентской части веб-приложений с использованием React;
вёрстка макетов из Figma;
написание и отладка TypeScript/JavaScript кода, рефакторинг;
взаимодействие с остальными участниками проекта (UI/UX, backend).
Оплата тестового задания
В случае вашего трудоустройства, выполнение тестового задания будет оплачено из расчета 3-х рабочих дней.
Тестовое задание:
Вы можете сделать тестовое задание частично.
Сверстать страничку по макету Figma (без прелоадера) с использованием фреймворка React и языка TypeScript:
Макет:
https://www.figma.com/file/YGXq1mzXTTc4Rfwt5vxgUo
Презентация макета: https://www.figma.com/proto/YGXq1mzXTTc4Rfwt5vxgUo
Адаптивная вёрстка для desktop и mobile устройств
Fuzzy and Live Search (живой фильтр)
debounce c окончательной фильтрацией на клиенте.
Сервер может вернуть “неподходящие” элементы, которые не попадают в фильтр. Их надо будет выкинуть и запросить еще пакет данных взамен выкинутых.
Постраничный вывод (по мере скроллинга)
Обработка серверных ошибок (вывод в область сообщений)
Обработка ошибок скачивания картинок
Состояние интерфейса сохранить в LocalStorage (installed/not installed)
Drag & drop для сортировки элементов списка
Привязать бэкенд https://dapplets-hiring-api.herokuapp.com/
Результат тестового задания
Результатом тестового задания будет:
Пояснительная записка, какие пункты из ТЗ сделаны;
Ссылка на опубликованный на Github проект;
Ссылка на Live Demo проекта на любом хостинге (например, Netlify).
Готовое тестовое задание присылайте в HeadHunter.
Структура и функционал макета в Figma:
(другие элементы макета имплементировать не нужно)
Строка поиска + кнопка для направления сортировки
Строка сообщений состояния и ошибок (в самом верху).
Список плашек элементов спиcка (Items)
UserGenerated Icon
Текст названия (1 строчка)
Текст описания (мультилайн)
Статичный тэги (несколько штук)
Гибридная кнопка (статус/действие) с 2мя состояниями и rollover.
Если приложение не установлено, то отображается "INSTALL".
Если приложение установлено, то отображается "INSTALLED" и при наведении курсора мыши надпись должна поменяться на "UNINSTALL". Этот статус сохраняется в localstorage, чтобы после перезагрузки страницы он не сбросился.
Никаких приложений, конечно же, устанавливать не надо. Это только фронтенд.
По клику на элемент списка, открывается Аккордеон (открытие плашки приложения).
Драг и Дроп элементов списка (ручная пересортировка). В макете есть “область захвата”.
Постраничная загрузка по мере скроллинга
Loader с анимацией
Адаптивность под Mobile и Desktop
Перемещение блоков на разных устройствах
Скрытие лишнего функционала на мобильных устройствах
Свойства Бэкенда
backend с HTTP API
Возвращает ссылки на картинки, расположенные на другом сервере
Картинки могут быть недоступными
Могут быть тяжёлыми
Сервер с картинками может долго отвечать
Возвращает список приложений
Серверная фильтрация*
Серверная сортировка*
Постраничная загрузка*
Возвращает список тегов
Может вернуть слишком длинный title или description
Может долго отвечать
Может возвращать ошибки
Может отвалиться и вернуть невалидный ответ
Спецификация на backend https://dapplets-hiring-api.herokuapp.com/
