Dashboard web moderno para gestionar postulaciones al Club ExDev, permitiendo visualizar, votar y analizar candidatos de forma segura y eficiente.
ExDev Postulations Manager es una plataforma completa para:
- ✅ Visualizar y filtrar postulaciones
- ✅ Gestionar votaciones en tiempo real
- ✅ Analizar resultados con gráficos interactivos
- ✅ Control de acceso basado en permisos
- ✅ Sincronización de datos desde múltiples fuentes
- Visualización de Candidatos: Lista completa de postulantes con información detallada
- Modal de Detalles: Información completa del candidato incluyendo:
- Datos personales y académicos
- Áreas de interés
- Proyecto/Idea propuesta
- Portafolio (enlace externo)
- Disponibilidad y motivación
- Panel de Votación: Interfaz intuitiva para emitir votos (Aprobar/Rechazar)
- Justificación de Votos: Obligatoria para mantener trazabilidad
- Voto Único por Usuario: Un usuario, un voto por candidato
- Visualización de Votos Actuales: Resumen en tiempo real de aprobaciones y rechazos
- Gráficos Interactivos:
- Gráfico de barras comparativo entre candidatos
- Gráfico circular con totales
- Estadísticas por candidato
- Top Postulaciones: Clasificación de más votadas a favor y en contra
- Datos en Tiempo Real: Actualizaciones instantáneas
Control granular de acceso mediante permisos:
applications.view- Ver postulacionesapplications.vote.create- Emitir votosapplications.vote.view- Ver resultados de votaciónapplications.sync- Sincronizar datos
- Sincronización Automática: Sincroniza datos al cargar
- Sincronización Manual: Botón para sincronizar bajo demanda
- Compatibilidad Multi-fuente: API externa + Firestore
- Google Sign-In: Fácil acceso con cuenta Google
- Perfiles de Usuario: Almacenamiento de datos en Firestore
- Sesión Persistente: Mantiene la sesión entre recargas
- Frontend: React 18 + TypeScript
- Build: Vite
- Estilos: Tailwind CSS
- UI Components: Radix UI (shadcn/ui)
- Autenticación: Firebase Authentication
- Base de Datos: Firestore
- Gráficos: Recharts
- Enrutamiento: Wouter
src/
├── components/ # Componentes reutilizables
│ ├── ApplicationCard.tsx
│ ├── ApplicationDetailsModal.tsx
│ ├── ApplicationVoteCharts.tsx
│ ├── VotingPanel.tsx
│ └── ui/ # Componentes UI base
├── contexts/ # Context API (Auth)
├── hooks/ # Custom hooks (useAuth, usePermissions)
├── pages/ # Páginas de la aplicación
│ ├── dashboard/
│ ├── home/
│ ├── login/
│ └── voting/
├── services/ # Servicios (APIs, Firestore)
├── types/ # Definiciones de tipos TypeScript
└── lib/ # Configuración (Firebase)
- Node.js 18+
- npm o bun
- Cuenta Firebase configurada
- Clonar el repositorio
git clone <repo-url>
cd tomas.exdev.cl- Instalar dependencias
npm install
# o
bun install- Configurar variables de entorno
Crea un archivo
.env.local:
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id- Iniciar el servidor de desarrollo
npm run dev
# o
bun run devAbre http://localhost:5173 en tu navegador.
Las reglas de seguridad están configuradas en firestore.rules:
- ✅ Validación de permisos a nivel de BD
- ✅ Control de autoría de votos
- ✅ Restricción de datos sensibles
Para implementar:
- Ve a Firebase Console → Firestore → Rules
- Reemplaza con el contenido de
firestore.rules - Publica los cambios
Ver: FIRESTORE_SECURITY_RULES.md
Para asignar permisos a usuarios, edita sus documentos en Firestore:
{
"email": "usuario@exdev.cl",
"permissions": [
"applications.view",
"applications.vote.create",
"applications.vote.view"
]
}Ver: SETUP_PERMISOS.md
{
"email": "usuario@exdev.cl",
"permissions": ["applications.view", "applications.vote.create"]
}{
"rut": "12345678-K",
"nombre_completo": "Juan Pérez García",
"correo_institucional": "juan@uc.cl",
"carrera": "Ingeniería Civil",
"campus": "San Joaquín",
"edad": 20,
"anio_ingreso": 2022,
"anio_actual": 2,
"ayudantias": "2",
"area_interes1": "Backend",
"area_interes2": "Cloud",
"motivo_postulacion": "Quiero aprender...",
"proyecto_idea": "API REST",
"pitch": "Corta descripción",
"portafolio": "https://...",
"horas_disponibles_semanales": "10",
"created_at": "2025-11-10T12:00:00Z"
}{
"userId": "firebase-uid",
"userName": "Nombre Usuario",
"userEmail": "usuario@exdev.cl",
"applicationRut": "12345678-K",
"vote": "aprobar",
"justification": "Excelentes habilidades...",
"timestamp": "2025-11-10T14:30:00Z"
}npm run dev # Inicia servidor de desarrollo
npm run build # Build para producción
npm run preview # Vista previa del build
npm run lint # Ejecutar ESLint
npm run type-check # Verificar tipos TypeScriptfirebase emulators:start # Iniciar emuladores locales
firebase deploy # Desplegar a Firebase- Inicia sesión con Google
- Ve la lista de postulaciones
- Haz clic en un candidato para ver detalles
- Emite tu voto (Aprobar/Rechazar) con justificación
- Visualiza los resultados en tiempo real
- Inicia sesión con Google
- Ve la lista de postulaciones
- Accede a la pestaña "Votación" para ver gráficos
- Analiza resultados e estadísticas
- Todas las funciones anteriores +
- Botón de sincronización para actualizar datos
- Gestión de permisos de usuarios (en Firestore)
- Autenticación Firebase (Google OAuth)
- Security Rules en Firestore
- Validación de permisos en cliente
- Votos asociados a usuario autenticado
- Datos de usuario protegidos
- Implementar Cloud Functions para operaciones administrativas
- Configurar backups automáticos en Firestore
- Implementar auditoría de votos
- Rate limiting en sincronización
- Monitoreo de accesos no autorizados
Para contribuir al proyecto:
- Crea una rama (
git checkout -b feature/mi-feature) - Commit tus cambios (
git commit -m 'Add mi-feature') - Push a la rama (
git push origin feature/mi-feature) - Abre un Pull Request
Este proyecto se rige por la licencia GNU GPL v3. Consulta el archivo LICENSE para más detalles.
Para reportar bugs o solicitar features, contacta con el equipo de desarrollo del Club ExDev.
Este proyecto fue creado por el Club de Desarrollo Experimental (ExDev) de la Universidad Tecnológica Metropolitana y es mantenido por los propios estudiantes. Mira los perfiles que han contribuido a este proyecto: