Prueba de selección

Candidatos al rol de desarrollador(a) Frontend Junior

Agradecemos que nos hayas hecho llegar tu hoja de vida y mostrar interés en nosotros. Desde
ahora entras en un proceso de selección, por lo tanto, le invitamos a desarrollar la siguiente prueba
de técnica.

1. Necesidad
Juancho requiere una aplicación web, que le permita registrar la información de contacto de todos
sus amigos, adicionalmente, le debe permitir visualizar ciertos indicadores numéricos.

Tengamos en cuenta que el presupuesto de Juancho es muy mínimo, por lo tanto, esta aplicación
no contará con backend ni base de datos. El desarrollador(a) debe almacenar toda la información
de contactos en el localStorage del navegador.

2. Requerimientos (Historia de Usuarios)

2.1. Registro de contactos
2.1.1. Dado que Juancho requiere registrar los datos de cada amigo, la app debe
permitir ingresar la siguiente información a través de un formulario.
• Número de Identificación
• Nombre Completo
• Dirección
• Celular
• Fecha de cumpleaños
2.1.2. Una vez diligenciado todos los campos del formulario la app agregará un contacto
más a la lista.
2.1.3. Al guardar la información, se debe limpiar el formulario.
2.1.4. Al guardar la información, debe regresar a la vista anterior.
2.2. Listado de usuarios
2.2.1. Dado que Juancho requiere consultar todos sus contactos, la app debe permitir
visualizar un listado de contactos.
2.2.2. En la lista de contactos debe visualizar la siguiente información:
 • Nombre del contacto
• Celular
• Fecha de cumpleaños
• Opción para actualizar
• Opción para eliminar
2.3. Actualizar contactos
2.3.1. Dado que los amigos de Juancho, cambian de celular constantemente, la app
debe permitir modificar la información del contacto seleccionado.
2.3.2. El formulario no debe permitir campos vacíos.
2.3.3. Al dar click sobre el botón guardar, la app modificará la información del contacto
alojada en el localstorage.
2.4. Eliminar contacto
2.4.1. Dado que Juancho es muy rígido, cuando discute con sus amigos, el desea poder
eliminar un contacto en particular. Desde localstorage debe eliminarse este
contacto.
2.5. Indicadores
2.5.1. Dado que Juancho desea conocer cuantos contactos tiene, la app debe permitir
visualizar dicha información en la vista principal.
2.5.2. Dado que para Juancho es importante el cumpleaños de sus amigos, el desea
conocer cuantos amigos cumplen en el día actual.

3. Recomendaciones
✓ Demuéstranos toda tu creatividad
✓ Demuestra tu lógica de programación
✓ Demuestra el conocimiento de ciertas funciones de Array Javascript como push, filter, map,
etc …
✓ La experiencia del usuario es importante para nosotros por lo cual, si conoces Angular
Material, te recomendamos su uso.

4. WireFrames
¿QUÉ ES UN WIREFRAME?

Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una

forma muy sencilla y esquemática la estructura de una página o aplicación web/mobile.
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto
incluye menús de navegación, bloques de contenido, etc… Además, te permite como
interactuarán estos elementos entre sí.
En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo
importante es centrarse en la funcionalidad del sitio y la experiencia del usuario.
Para efectos de esta prueba técnica hemos definido un wireframe sencillo para plasmar la idea
de Juancho:
Compartir el trabajo en Github / Bitbucket / Gitlab. Si no conoces estas plataformas, te invitamos a
compartir tu código en un .zip, (asegúrate de no incluir la carpeta node_modules)

¡Éxitos!