MyLanit: web part de galerías de fotos y concursos de fotografía para portal corporativo

Desafío

LANIT necesitaba una manera de organizar concursos de fotografía internos en su portal corporativo de SharePoint — algo que no existía de fábrica. Los empleados debían poder subir fotos, votar por sus favoritas y dejar comentarios, mientras que los gerentes de RR.HH. necesitaban control total sobre el ciclo de vida del concurso sin tocar código ni llamar a TI.

Descubrimiento

Al profundizar en los requisitos quedó claro que el alcance era más amplio que un simple widget de galería. Se necesitaban dos modos distintos — una galería de fotos de formato libre y un concurso de votación acotado en el tiempo — cada uno con su propio modelo de permisos, estado de UI y ciclo de vida. Los datos de votación debían sobrevivir a los reinicios del portal e integrarse con listas de SharePoint que ya contenían otro contenido corporativo.

Opciones consideradas

Se evaluaron tres direcciones antes de comprometerse con una solución:

1. Complementos de SharePoint listos para usar — descartados porque ninguno soportaba lógica de votación personalizada ni los requisitos de branding del cliente.
2. Servicio externo embebido en iframe — descartado por la política de seguridad corporativa que prohíbe el procesamiento de contenido interno por terceros.
3. Web part personalizado en React — elegido. Control total sobre la UX, la propiedad de los datos permanece dentro de SharePoint y la base de código sigue siendo mantenible por el equipo interno.

Decisión

Un web part personalizado en React fue el único camino que satisfizo todas las restricciones a la vez: soberanía de datos, libertad de diseño y la capacidad de lanzar ambos modos desde un único artefacto desplegable. Se eligió Redux para la gestión de estado dada la complejidad del estado de votación entre componentes; Redux-Router manejó la navegación virtual sin requerir cambios en el enrutamiento del lado del servidor en SharePoint.

Implementación

Frontend y backend se desarrollaron en paralelo bajo una disciplina estricta de contrato de API. Las fichas de foto usan una cuadrícula masonry para una maquetación estilo Pinterest; react-infinite-scroller elimina por completo la paginación. Un wrapper personalizado de TinyMCE conecta el editor de texto enriquecido con Redux Forms — una integración no trivial que requirió una gestión cuidadosa del ciclo de vida para evitar fugas de memoria. Una tarea programada del lado del servidor monitorea las fechas de cierre de los concursos y los pasa automáticamente al modo de resultados, eliminando cualquier paso manual del flujo de trabajo de RR.HH.

Se lanzaron dos superficies de rol: un web part orientado a empleados (subir, explorar, dar like, comentar, votar) y un web part de administración separado (CRUD completo para galerías y concursos, cola de moderación, panel de resultados con protecciones de confirmación ante eliminación).

Resultado

Los equipos de RR.HH. pasaron de coordinar concursos de fotografía por correo electrónico con hojas de cálculo de conteo manual de votos a un flujo de trabajo totalmente autoservicio. Crear un concurso lleva menos de dos minutos. La votación se cierra automáticamente. Los resultados son visibles para todos los empleados en el momento en que vence el plazo — sin necesidad de involucrar a TI en ninguna etapa.

Recorrido de la interfaz de usuario

Recorrido de la interfaz de administración