Prueba №8

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):
• Icono generado por el usuario.
• Texto del nombre (una línea).
• Texto de descripción (multilínea).
• Etiquetas estáticas (varias).
• Al hacer clic en un elemento de la lista, se abre un acordeón (desplegar la aplicación).
• 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.

• Drag and drop de los elementos de la lista (reordenación manual). En el diseño hay una "zona de captura".
  
• 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.