CITI Oruro: la colegiatura, ahora en línea.
Junio de 2026 · en producción
El sitio y el sistema del Colegio de Ingenieros en Tecnologías de la Información de Oruro: afiliación, aportes con QR, carnets, constancias y asambleas, más un portal donde cada afiliado entra con su cuenta de Google.
Tecnología
Next.js 16
TypeScript
GraphQL
Firebase
PWA
- React 19
Laravel 13
PostgreSQL
Material You- Tiptap
Servicios
El proyecto
Cliente e idea
El CITI Oruro agrupa a los ingenieros de Sistemas, Informática, Telecomunicaciones y demás especialidades de TI del departamento. Nos pidió un sitio institucional nuevo y, detrás de él, un sistema para llevar el Colegio entero desde el navegador.
Reto y objetivos
El Colegio venía de tres sistemas sueltos: un panel interno para registrar aportes, una API y una web pública donde el afiliado solo podía consultar su último mes pagado con su RNI. Ninguno calculaba la deuda real, las tarifas estaban fijas en el código y no existían en línea ni los carnets, ni las constancias, ni las asambleas. Había que unirlo todo sin perder un solo dato del historial.
Solución y resultado
Diseñamos un sitio institucional con noticias, transparencia, servicios y un camino claro para afiliarse, y un portal donde el afiliado entra con Google, ve su deuda, paga con QR desde la app de su banco y descarga su carnet y sus constancias.
Para la directiva construimos un panel con padrón, aportes con caja y conciliación bancaria, tesorería, asambleas con pasar lista, reportes y un editor propio para publicar noticias, con permisos por rol y registro de actividad.
La colegiatura en línea
Afiliación, aportes, carnets y constancias sin filas.
Un portal por afiliado
Cada ingeniero entra con su cuenta de Google.
Un colegio que comunica
Noticias, asambleas y eventos en un solo sitio.
Resumen del proyecto
Funciones principales
El recorrido es el de un ingeniero que quiere colegiarse: llega al sitio, entiende los requisitos, se registra con su cuenta de Google y desde ese día lleva su colegiatura en el celular. Del otro lado, la directiva ve el mismo dato en su panel.
Un sitio que presenta al Colegio
Quiénes son, el directorio, los servicios, los documentos de transparencia y las noticias, con un llamado a afiliarse en cada página. La afiliación explica los requisitos, los beneficios, los cinco pasos y dónde pagar.
El portal del afiliado
Cada afiliado entra con Google, sin contraseñas. Ve cuántos meses debe y el monto exacto, paga con QR desde la app de su banco y tiene a mano su carnet y sus constancias.
Padrón y aportes en un solo lugar
El padrón muestra quién está al día, quién tiene deuda y a quién le faltan datos. Cada aporte, en efectivo o por QR, genera su comprobante, y los pagos en línea se concilian con lo que reporta el banco.
Noticias con editor propio
La directiva publica comunicados, convocatorias y actividades desde el panel, con un editor de texto enriquecido. Las noticias se ordenan por categorías y el sitio las muestra con buscador.
Desarrollo
Metodología
Construimos el sitio y el panel en Next.js con React y TypeScript, exportados como archivos estáticos y publicados en Firebase Hosting. El panel y el portal hablan con una API GraphQL hecha en Laravel sobre PostgreSQL, el acceso es con Google mediante Firebase y cada rol solo ve lo que su permiso le deja ver. El sitio también se instala como aplicación en el celular.
Proceso
Mapa del sitio
Tres puertas: el sitio para todos, el portal para cada afiliado y el panel para la directiva. Las fichas punteadas son plantillas: la de noticia se diseñó una vez y hoy sirve a 118 publicaciones.
- Institucionalel Colegio
- Quiénes somos
- Directorio
- Historia del directorio
- Proyectos
- Transparencia
- Servicios
- Afiliaciónrequisitos y pasos
- Requisitos y beneficios
- Preguntas frecuentes
- Contacto
- Privacidad
- Noticias118 publicaciones
- Índice con buscador
- Categoríaplantilla × 11
- Noticiaplantilla × 118
- Portal del afiliadoacceso con Google
- Ingreso
- Registro y censo
- Mis aportes, carnet y constancias
- Paneldirectiva
- Afiliados, carnets y constancias
- Aportes, caja y conciliación
- Asambleas y acta
- Tesorería y reportes
- Noticias, mensajes y estadísticas
- Tarifas, usuarios y actividad
Proceso
El Colegio en el bolsillo
El panel se usa en la oficina y también de pie, en la puerta de una asamblea o en la caja. Por eso cada pantalla funciona igual de bien en el celular: listas que se leen de un vistazo, filtros a un toque y la acción principal siempre a mano.
Interfaz
Claro y oscuro
El panel y el portal siguen Material 3 y ofrecen modo claro y modo oscuro, con el azul del Colegio en los dos. Cada persona elige el suyo y la elección se recuerda. Arrastra para comparar las mismas pantallas.
Proceso
Páginas completas
La portada cuenta quién es el Colegio, qué ofrece y quién lo dirige, y la afiliación lleva de los requisitos al pago en cinco pasos. Así se ven de principio a fin.
Marca
Tipografía
Una sans geométrica de formas redondas, moderna sin ser fría, que da a los títulos un aire institucional y tecnológico a la vez. Se sirve desde el propio sitio para que cargue rápido y sin saltos.
Urbanist
RegularMediumSemiBoldBold
Marca
Colores
El azul marino es el color de marca del Colegio y sostiene la identidad en el sitio y el panel. El rojo se reserva para lo que invita a actuar, como el acceso al portal, y el azul brillante marca enlaces y estados activos.
Conclusión
El CITI Oruro tiene hoy un solo lugar para todo: el sitio presenta al Colegio, el portal le da al afiliado su colegiatura en el celular y el panel le da a la directiva el padrón, las cuentas y las asambleas al día.
Casos
