Version: 1.0 (2026)
Type: FinTech / Actuarial Tool
Stack: React, Vite, Local-First Architecture, jsPDF
Website: calculapension.kometa.cl
As an engineer, one of the things I enjoy most is taking a dense, ugly, and bureaucratic problem and solving it using an elegant and fast frontend architecture. In my latest project, I faced the monster of the Chilean pension system and the 2026 Reform.
Here, I break down the technical architecture behind CalculaPension, and why I decided that no data should ever touch a backend server.
The Challenge: Extreme Privacy (Local-First)
A pension calculator requires highly sensitive data: age, real salaries, AFP amounts. Sending a JSON payload with a user’s entire financial heritage to a REST API was an unnecessary security risk. I decided to adopt a Local-First approach.
The entire actuarial engine (pensionMath.js) was programmed in asynchronous Vanilla JS and runs strictly on the client. We use React hooks coupled with local states to handle variables such as inflation, updated UF (Unidad de Fomento), and the division of the 6% contribution (4.5% savings / 1.5% redistribution) without a single byte leaving your laptop.
Taming React Rendering with Stable Iterators
Initially, when generating 30-year projection dynamic tables, I encountered classic performance alerts. The culprit: using the array index (map((item, index) => ... )) as a key in mutable lists. Using React Doctor, I located and implemented cryptographic unique IDs to stabilize the DOM tree, eliminating costly re-renders with every slider adjustment.
Señor Gato and the Number Challenge
One of the most curious technical problems was training Señor Gato (our local AI agent). The system filtered short words of less than 3 letters to avoid noise, but in pensions, age is key! I had to refactor the search engine to recognize 2-digit numbers (45, 20, 65), allowing the AI to associate year figures with the legal benefit cap without sacrificing performance.
Additionally, since the AI logic runs on the client, we implemented a robust ErrorBoundary. If Señor Gato gets confused by some asynchronous “meow-cism,” the application doesn’t die; the Boundary captures the error and allows the user to continue calculating without losing their data.
Pocket Progressive Web App (PWA)
Pension advisors often meet with clients in cafes with bad WiFi. I configured a Service Worker that intercepts requests to the economic indicators API (UF/Dollar), caches the last valid value, and allows the application to function with 100% offline precision. If there’s no network, the app simply uses the last known UF so the advisory doesn’t stop.
PDF Rendering: Glassmorphism to Paper
I used jsPDF and autoTable to transfer the generated information to a downloadable document. Instead of setting up a heavy microservice in Node/Puppeteer, the PDF draws vector rectangles and places coordinates dynamically (doc.lastAutoTable.finalY) directly from the browser. The result: a premium report that maintains the site’s aesthetic without server latency.
If you’re interested in checking out the final result, playing with the charts, or discussing Canvas optimization in React, take a look at the app in production: calculapension.kometa.cl
Finally, if you’ve made it this far and have more knowledge about the tangled world of pensions, send it my way! For me, this was a slightly “freer” project; a bet on simplifying the experience through code, away from the cumbersome and tedious processes of the AFPs themselves.