Se instalan las dependencias con npm i y se corre el modo desarrollo con npm start.

• Impresión por consola

  Al realizar la búsqueda en modo desarrollo, ya sea con el ícono de la lupa o presionando la tecla ENTER, se imprimirá en consola la URL que se utilizaría en producción. La URL de la API se encuentra almacenada en el archivo .env

• Uso de Dummy

  Para el display de la respuesta de la API utilice un archivo json creado con Mockaroo, el cual cuenta con 20 entradas con campos similares a los que se recibirán de la API real.

• IDs repetidos

  Por lo mencionado anteriormente, los IDs generados por el template cuentan con 24 caracteres, por lo que decidí recortarlos en la exhibición de la tabla y dar un mejor resultado visual. Al muchos IDs compartir algunos caracteres, en la tabla parecieran ser los mismos.

• Validación de la búsqueda

  Consideré una validación básica para el input de búsqueda con un mínimo de dos caracteres y diferenciando mayúsculas de minúsculas. Además, muestra un error cuando no hay ningún filtro seleccionado.

• Reemplazo del Dummy

  Dentro de la función 'getData' existe una validación que reconoce si el modo en el que se está trabajando es producción o desarrollo. Mediante esta validación automáticamente se reemplaza el dummy por una solicitud a la API con los query params indicados.

App creada a partir del template con TypeSript de Vite. Utilicé únicamente React con TypeScript y ChakraUI para los estilos, exceptuando la tabla que está realizada con CSS "vanilla".