Ir al contenido principal

Dapplets Project

Тестовое задание на вакансию “Frontend Developer”

О нас:

Dapplets Project - cтартап-криптоплатформа для приложений Augmented Web. Мы переносим идеи децентрализации и устойчивости на уровень визуального UI/UX традиционных сайтов.


Мы строим платформу Аугментированного веба, состоящую из браузерного плагина и децентрализованных приложений (дапплетов), основанных на крипто-технологиях.


Наша платформа создается в виде open-source framework для разработчиков со всего мира.

В ваши задачи будет входить:

  • разработка клиентской части веб-приложений с использованием React;

  • вёрстка макетов из Figma;

  • написание и отладка TypeScript/JavaScript кода, рефакторинг;

  • взаимодействие с остальными участниками проекта (UI/UX, backend).

Оплата тестового задания

В случае вашего трудоустройства, выполнение тестового задания будет оплачено из расчета 3-х рабочих дней.

Тестовое задание:

Вы можете сделать тестовое задание частично.


  1. СверстатьHay страничкуque поimplementar макетуuna página basada en el diseño de Figma (безsin прелоадера)preloader) сusando использованиемel фреймворкаframework React иy языкаel lenguaje TypeScript: 

Макет:Diseño: 
https://www.figma.com/file/YGXq1mzXTTc4Rfwt5vxgUo

ПрезентацияPresentación макета:del diseño: https://www.figma.com/proto/YGXq1mzXTTc4Rfwt5vxgUo

  1. Адаптивная вёрстка для desktop и mobile устройствRequisitos:

  2. Fuzzy and Live Search (живой фильтр) 

    • Diseño

      debounceadaptable cpara окончательнойdispositivos фильтрациейde наescritorio клиенте.y

      móviles.
    • Búsqueda

      Серверdifusa можетy вернутьen “неподходящие” элементы, которые не попадают в фильтр. Их надо будет выкинуть и запросить еще пакет данных взамен выкинутых.

  3. Постраничный выводvivo (поfiltro мереen скроллинга)

    vivo).
  4. Uso

    Обработкаde серверныхdebounce ошибокcon (выводfiltrado вfinal областьen сообщений)

    el cliente.
  5. El

    Обработкаservidor ошибокpuede скачиванияdevolver картинок

    elementos "no aptos" que no pasen el filtro. Estos deben ser descartados y se debe solicitar otro lote de datos para reemplazarlos.
  6. Paginación

    Состояние(a интерфейсаmedida сохранитьque вse desplaza).

  7. Manejo de errores del servidor (mostrar en el área de mensajes).
  8. Manejo de errores de descarga de imágenes.
  9. Estado de la interfaz guardado en LocalStorage (installed/notinstalado/no installed)

    instalado).

  10. Drag & drop дляpara сортировкиordenar элементовelementos списка

    de
    11. la

  1. Привязать бэкенд https://dapplets-hiring-api.herokuapp.com/

Результат тестового задания

Результатом тестового задания будет:

  1. Пояснительная записка, какие пункты из ТЗ сделаны;

    lista.
  2. Conectar

    Ссылка на опубликованный на Github проект;

  3. Ссылка на Live Demo проекта на любом хостинге (например, Netlify).


Готовое тестовое задание присылайте в HeadHunter. 


Структура и функционал макета в Figma:

(другие элементы макета имплементировать не нужно)

  1. Строка поиска + кнопка для направления сортировки

  2. Строка сообщений состояния и ошибок (в самом верху).

  3. Список плашек элементов спиcка (Items)

    1. UserGenerated Icon

    2. Текст названия (1 строчка)

    3. Текст описания (мультилайн)

    4. Статичный тэги (несколько штук)

    5. Гибридная кнопка (статус/действие) с 2мя состояниями и rollover.

      1. Если приложение не установлено, то отображается "INSTALL". 

      2. Если приложение установлено, то отображается "INSTALLED" и при наведении курсора мыши надпись должна поменяться на "UNINSTALL". Этот статус сохраняется в localstorage, чтобы после перезагрузки страницы он не сбросился.

Никаких приложений, конечно же, устанавливать не надо. Это только фронтенд.

  1. По клику на элемент списка, открывается Аккордеон (открытие плашки приложения).

  1. Драг и Дроп элементов списка (ручная пересортировка). В макете есть “область захвата”.

  2. Постраничная загрузка по мере скроллинга

    1. Loader с анимацией

  3. Адаптивность под Mobile и Desktop

    1. Перемещение блоков на разных устройствах

    2. Скрытие лишнего функционала на мобильных устройствах


Свойства Бэкенда

  1. backend с HTTP API

    1. Возвращает ссылки на картинки, расположенные на другом сервере

      1. Картинки могут быть недоступными

      2. Могут быть тяжёлыми

      3. Сервер с картинками может долго отвечать

    2. Возвращает список приложений

      1. Серверная фильтрация*

      2. Серверная сортировка*

      3. Постраничная загрузка*

    3. Возвращает список тегов

    4. Может вернуть слишком длинный title или description

    5. Может долго отвечать

    6. Может возвращать ошибки

    7. Может отвалиться и вернуть невалидный ответ

  2. Спецификация наel backend https://dapplets-hiring-api.herokuapp.com/

    3. Resultado de la prueba técnica:

    • Enlace al proyecto publicado en Github.
  • Enlace a la demostración en vivo del proyecto en cualquier hosting (por ejemplo, Netlify).

    • Estructura y funcionalidad del diseño en Figma

    (no es necesario implementar otros elementos del diseño):

    • Barra de búsqueda + botón para ordenar.
    • Barra de mensajes de estado y errores (en la parte superior).
    • Lista de elementos (Items).
    • Si la aplicación no está instalada, debe mostrarse "INSTALL".
    • Si la aplicación está instalada, debe mostrarse "INSTALLED" y al pasar el cursor sobre el texto, debe cambiar a "UNINSTALL". Este estado se guarda en localstorage para que no se pierda al recargar la página.
    • Icono generado por el usuario.
    • Texto del nombre (una línea).
    • Texto de descripción (multilínea).
    • Etiquetas estáticas (varias).
    • Botón híbrido (estado/acción) con 2 estados y rollover.
    • Al hacer clic en un elemento de la lista, se abre un acordeón (desplegar la aplicación).
    • Drag and drop de los elementos de la lista (reordenación manual). En el diseño hay una "zona de captura".
    • Carga paginada a medida que se desplaza.
    • Loader con animación.
    • Adaptabilidad para dispositivos móviles y de escritorio.
    • Movimiento de bloques en diferentes dispositivos.
    • Ocultación de funcionalidades adicionales en dispositivos móviles.

    Propiedades del Backend

    • Backend con API HTTP.
    • Las imágenes pueden no estar disponibles.
    • Pueden ser pesadas.
    • El servidor de imágenes puede tardar en responder.
    • Filtrado en el servidor*.
    • Ordenación en el servidor*.
    • Carga paginada*.
    • Devuelve enlaces a imágenes ubicadas en otro servidor.
    • Devuelve una lista de aplicaciones.
    • Devuelve una lista de etiquetas.
    • Puede devolver títulos o descripciones demasiado largos.
    • Puede tardar en responder.
    • Puede devolver errores.
    • Puede fallar y devolver una respuesta no válida.

    Especificación del backend: https://dapplets-hiring-api.herokuapp.com/

    Volver arriba