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: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 FigmaFigma:

(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). 
  • 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.

    • 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.
        • 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