Versión: 1.0 (2026)
Tipo: FinTech / Actuarial Tool
Stack: React, Vite, Local-First Architecture, jsPDF
Sitio web: calculapension.kometa.cl
Como ingeniero, una de las cosas que más disfruto es tomar un problema denso, feo y burocrático, y resolverlo usando una arquitectura frontend elegante y rápida. En mi último proyecto, me enfrenté al monstruo del sistema de pensiones chileno y la Reforma 2026.
Aquí te desgrano la arquitectura técnica detrás de CalculaPension, y por qué decidí que ningún dato debía tocar jamás un servidor backend.
El Desafío: Privacidad Extrema (Local-First)
Una calculadora de pensiones requiere datos altamente sensibles: edad, sueldos reales, montos de AFP. Enviar un payload JSON con todo el patrimonio financiero de un usuario a una API REST era un riesgo de seguridad innecesario. Decidí adoptar un enfoque Local-First.
Todo el motor actuarial (pensionMath.js) fue programado en Vanilla JS asíncrono y se ejecuta estrictamente en el cliente. Usamos hooks de React acoplados a estados locales para manejar variables como la inflación, la UF actualizada y la división del aporte del 6% (4.5% ahorro / 1.5% reparto) sin que un solo byte salga de tu laptop.
Domando el React Rendering con Iteradores Estables
Al principio, al generar las tablas dinámicas de proyección a 30 años, me encontré con las clásicas alertas de rendimiento. El culpable: usar el índice del array (map((item, index) => ... )) como key en listas mutables. Usando React Doctor, localicé e implementé IDs únicos criptográficos para estabilizar el árbol del DOM, eliminando re-renders costosos en cada ajuste de los sliders.
El Señor Gato y el reto de los números
Uno de los problemas técnicos más curiosos fue entrenar al Señor Gato (nuestro agente de IA local). El sistema filtraba palabras cortas de menos de 3 letras para evitar ruido, pero ¡en pensiones la edad es clave! Tuve que refactorizar el motor de búsqueda para reconocer números de 2 dígitos (45, 20, 65), permitiendo que la IA asocie cifras de años con el tope legal de beneficios sin sacrificar rendimiento.
Además, como la lógica de la IA corre en el cliente, implementamos un ErrorBoundary robusto. Si el Señor Gato se confunde con algún “miaucismos” asíncrono, la aplicación no muere; el Boundary captura el error y permite que el usuario siga calculando sin perder sus datos.
Progressive Web App (PWA) de Bolsillo
Los asesores previsionales suelen reunirse con clientes en cafeterías con mal WiFi. Configuré un Service Worker que intercepta peticiones a la API de indicadores económicos (UF/Dólar), cachea el último valor válido, y permite que la aplicación funcione con precisión 100% offline. Si no hay red, la app simplemente usa la última UF conocida para no detener el asesoramiento.
PDF Rendering: Glassmorphism al Papel
Usé jsPDF y autoTable para traspasar la información generada a un documento descargable. En lugar de levantar un microservicio pesado en Node/Puppeteer, el PDF dibuja rectángulos vectoriales y ubica coordenadas dinámicamente (doc.lastAutoTable.finalY) directamente desde el browser. El resultado: un reporte premium que mantiene la estética del sitio sin latencia de servidor.
Si te interesa revisar el resultado final, jugar con los gráficos o discutir optimización de Canvas en React, échale un ojo a la app en producción: calculapension.kometa.cl
Finalmente, si llegaste hasta aquí y tienes más conocimientos sobre el enredado mundo de las pensiones, ¡házmelos llegar! Para mí, este fue un proyecto un poco más “libre”; una apuesta por simplificar la experiencia desde el código, lejos de los procesos engorrosos y lateros de las mismas AFP.