Volver al portafolio
2025 Full Stack Developer

Acreditaciones de medios

Sistema de acreditaciones para gestionar postulaciones de medios y staff en días de partido. Centraliza registros, validaciones por jornada y emisión de constancias en PDF enviadas por correo electrónico.

Acreditaciones de medios

Tecnologías

Angular Bootstrap 5 TypeScript Firebase Realtime DB Firebase Auth SweetAlert2 jsPDF html2canvas Gmail / SMTP

01. Contexto

El Club León necesitaba un sistema para administrar acreditaciones de prensa y personal autorizado en días de partido. El proceso se realizaba con registros dispersos y comunicación manual por correo, complicando el control por jornada, la validación de datos y la trazabilidad de aceptaciones y rechazos.

02. Objetivo

Centralizar el registro, validación y control de acreditaciones de prensa y staff; evitar duplicidad de solicitudes por jornada mediante validaciones en Firebase; automatizar la generación de constancias en PDF y su envío por correo; ofrecer a administradores visibilidad clara de pendientes, postulados e historial filtrable; y mantener un histórico exportable para control y estadísticas.

03. Mi Rol

Levanté requisitos con comunicación, prensa y operación para definir el flujo completo. Diseñé la experiencia de login, panel de administrador y panel del acreditado. Implementé validaciones contra Firebase para evitar duplicados por jornada. Desarrollé el módulo de jornadas y la activación de partidos para acreditación. Generé constancias PDF con jsPDF + html2canvas e integré el envío automático por correo (Gmail/SMTP). Construí vistas de registros pendientes, postulados e historial con filtros y exportación, y realicé pruebas funcionales en jornadas reales ajustando performance y UX para picos previos a los partidos.

Arquitectura

  • Frontend en Angular con Bootstrap 5
  • TypeScript para lógica de aplicación
  • Firebase Realtime DB para persistencia y sincronización
  • Firebase Auth para autenticación y recuperación de acceso
  • Generación de PDF con jsPDF + html2canvas
  • Notificaciones UI con SweetAlert2
  • Envío de correos automático vía integración Gmail / SMTP

Decisiones Técnicas

  • Uso de Firebase Realtime DB para obtener datos y estatus en tiempo real
  • Validaciones en Firebase para prevenir registros duplicados por jornada
  • Firebase Auth para autenticación, validación de correo y recuperación de contraseña
  • Generación de constancias con jsPDF + html2canvas para documentos consistentes
  • Integración de envío automático por correo (Gmail/SMTP) para formalizar el proceso
  • SweetAlert2 para confirmaciones y mensajes operativos claros en flujos administrativos
  • Bootstrap 5 para UI rápida, consistente y responsiva

Galería del Proyecto

Screenshot 1 of Acreditaciones de medios
Screenshot 2 of Acreditaciones de medios
Screenshot 3 of Acreditaciones de medios
Screenshot 4 of Acreditaciones de medios
Screenshot 5 of Acreditaciones de medios

Impacto y Resultados

  • Flujo único de acreditaciones centralizado por jornada
  • Validaciones automáticas que reducen errores y duplicidad
  • Visibilidad en tiempo real por partido, zona y función
  • Constancias PDF generadas automáticamente y enviadas por correo
  • Historial filtrable y exportable para control interno
"El sistema formalizó el proceso de acreditaciones y redujo la carga de trabajo manual, mejorando el control por jornada y la trazabilidad de aceptaciones y rechazos."

Lecciones Aprendidas

  • 💡 Centralizar el flujo reduce la fricción entre áreas y elimina comunicación manual innecesaria
  • 💡 Las validaciones por jornada son clave para evitar duplicidad y mantener control operativo
  • 💡 La automatización de PDFs y correos aumenta la formalidad y confiabilidad del proceso
  • 💡 En sistemas de uso por picos, performance y UX deben diseñarse desde el inicio
  • 💡 Una vista clara de estatus e historial facilita la operación y reduce errores