Canastón SIB: la Navidad que se queda entre colegas.
Octubre de 2026 · campaña en curso
Una app para que los afiliados de la Sociedad de Ingenieros de Bolivia en Oruro armen su canastón navideño con 100 puntos, eligiendo productos de empresas de colegas ingenieros, y lo recojan con un QR.
Tecnología
Angular 22
PWA
Firestore- Vitest
- Arquitectura hexagonal
TypeScript- Firebase
- Cloud Functions
- ExcelJS
Servicios
El proyecto
Cliente e idea
La SIB Departamental Oruro agrupa a los ingenieros del departamento y cada fin de año entrega un canastón navideño a sus afiliados. Nos pidió que esa entrega deje de ser una caja igual para todos y se vuelva una elección de cada afiliado.
Reto y objetivos
El padrón tiene más de mil trescientos afiliados y solo pueden participar quienes tienen sus aportes al día. Había que verificar a cada uno una sola vez, dejarle elegir sin pasarse del presupuesto, consolidar los pedidos para cada empresa proveedora y entregar en pocos días sin colas ni canastones duplicados.
Solución y resultado
Diseñamos una app instalable en el celular: el afiliado entra con su cuenta de Google, recorre el catálogo, suma productos hasta 100 puntos, confirma y recibe un QR que en la sede se escanea una sola vez.
Para la directiva construimos un panel que sigue la campaña en vivo: del padrón al recojo, el pedido de cada empresa, cuatro reportes en Excel, la auditoría y las alertas.
Entre colegas
Cada canastón se arma con productos de empresas de ingenieros.
Elegir con puntos
El afiliado reparte su presupuesto como quiere.
Recojo con QR
La directiva entrega y lleva el control sin papeles.
Resumen del proyecto
Funciones principales
Hay dos recorridos. El afiliado elige, confirma y recoge desde su celular. La directiva prepara la campaña, mira cómo avanza día a día y entrega a cada empresa su hoja de pedido.
Un catálogo que suma puntos
Arriba, los puntos que le quedan al afiliado; abajo, los productos con su precio en puntos y un botón para agregarlos. El filtro «Te alcanza» muestra solo lo que todavía entra en su canastón.
Productos de empresas de colegas
Cada ficha dice qué es, cuánto cuesta en puntos, cuánto quedará y qué empresa lo produce. Si hay sabores o tallas, el afiliado elige antes de agregar. Así el presupuesto se queda en empresas de los propios ingenieros.
Un QR para recoger
Al confirmar, el canastón queda listo y aparece el QR de recojo. En la sede, el modo entregador escanea el código o busca por nombre o carnet, y cada canastón se entrega una sola vez.
Un panel para la directiva
El resumen muestra las etapas de la campaña, cuántos confirmaron, cuántos siguen en borrador y cuántos nunca entraron, con un gráfico de confirmaciones por día. Desde ahí salen los reportes en Excel y la hoja de pedido de cada empresa.
Desarrollo
Metodología
Construimos la app en Angular como PWA instalable, sobre Firebase: ingreso con Google, Firestore y funciones en la nube. El código sigue una arquitectura hexagonal con siete contextos (armado, catálogo, campaña, entrega, identidad, monitoreo y reportes) y el dominio no conoce Firebase, así que la misma app corre con datos simulados para pruebas. Las reglas de seguridad validan cada canastón en el servidor: precios, cantidades y total.
Proceso
Mapa de la app
Tres puertas detrás del ingreso: la del afiliado, la de la directiva y la del personal de entrega. Las fichas punteadas son plantillas: se diseñaron una vez y sirven a cada producto y a cada empresa del catálogo.
- Afiliadoarma y recoge
- Catálogo
- Ficha de productoplantilla × 45
- Empresas
- Ficha de empresaplantilla × 30
- Mi canastón
- Mi QR
- Ayuda y créditos de fotos
- Directivapanel
- Resumen
- Afiliados
- Catálogo
- Entregas y lista impresa
- Reportes Excel
- Campaña y reglas
- Auditoría, actividad y alertas
- Hoja de pedidoplantilla × 30
- Personaldía de recojo
- Modo entregador
- Vincular mi afiliación
Proceso
Primero el celular
El afiliado arma su canastón desde el teléfono y la directiva también puede seguir la campaña desde el suyo. Cada pantalla se pensó primero a 390 píxeles, con la navegación al alcance del pulgar.
Proceso
La campaña, en manos de la directiva
Las etapas avanzan solas según las fechas: preparación, abierta, cerrada, entrega y finalizada. La directiva ajusta los puntos y las reglas, revisa el padrón y, cuando cierra la campaña, cada empresa recibe su hoja de pedido lista para imprimir o compartir.
Trazabilidad
Todo cambio queda en una auditoría que nadie puede editar ni borrar, y el sistema crea alertas solo cuando algo no cuadra, como un reclamo de identidad o demasiados intentos fallidos.
Marca
Tipografía
Una serif suave y cálida para los títulos, con aire de tarjeta navideña. La acompaña Plus Jakarta Sans en los textos, botones y cifras, para que el catálogo y el panel se lean claros en el celular.
Fraunces
RegularSemiBoldBold
Marca
Colores
El verde pino viene del logo de la SIB y guía la navegación y el panel. El rojo navideño marca lo que invita a actuar, como agregar o confirmar, y el dorado se reserva para los puntos.
Conclusión
Canastón SIB convierte un regalo de fin de año en una elección personal. Cada afiliado arma lo que quiere desde su celular, las empresas de los colegas reciben pedidos claros y la directiva sabe en todo momento cómo va la campaña.
Casos
