Ir al contenido principal

Dapplets Project

  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

Requisitos:

  • Diseño adaptable para dispositivos de escritorio y móviles.
  • Búsqueda difusa y en vivo (filtro en vivo).
  • Uso de debounce con filtrado final en el cliente.
  • 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.
  • Paginación (a medida que se desplaza).
  • Manejo de errores del servidor (mostrar en el área de mensajes).
  • Manejo de errores de descarga de imágenes.
  • Estado de la interfaz guardado en LocalStorage (instalado/no instalado).
  • Drag & drop para ordenar elementos de la lista.
  • Conectar el backend https://dapplets-hiring-api.herokuapp.com/

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