Finanzz: Cómo creé un asistente financiero con IA para dejar de odiar el registro de gastos

Un caso de estudio sobre la creación de una PWA con Next.js, IA conversacional (Gemini) y búsqueda semántica (Supabase Vector).

💡 La Idea: El Problema que Quería Resolver

Siempre me ha frustrado la tediosa tarea de registrar cada gasto. Las apps de finanzas existentes se sentían como hojas de cálculo glorificadas: llenar formularios, seleccionar categorías de listas interminables, introducir cada detalle manualmente. Era agotador y, sinceramente, la razón por la que siempre terminaba abandonando el hábito.

Me pregunté: ¿Y si pudiera gestionar mis finanzas simplemente hablando con mi teléfono, como si le pidiera algo a un asistente? ¿Qué pasaría si pudiera decir “Pagué 250 lempiras por la cena de ayer en el Trapiche” y la app entendiera automáticamente que fue un gasto de comida? ¿O si pudiera simplemente fotografiar un recibo y que se registrara solo?

De esas preguntas nació Finanzz, un proyecto enfocado en hacer que el seguimiento financiero se sienta menos como una obligación y más como una conversación natural con una herramienta inteligente.

✨ Características Principales

• 🗣️ IA Conversacional: El núcleo de la app. Describe una transacción en lenguaje natural y la IA se encarga de registrarla y categorizarla. ¡Adiós a los formularios!
• 📸 Escaneo de Facturas (OCR): Toma una foto a una factura y Finanzz, usando Gemini Vision, extraerá la fecha, el comercio y el monto automáticamente.
• 🎙️ Reconocimiento de Voz: Registra gastos sobre la marcha dictándolos en voz alta, ideal para capturar compras rápidas sin detenerse a escribir.
• 📋 Listas Financieras Flexibles: Organiza tus finanzas como realmente vives: una lista para gastos personales, otra para el negocio, otra para ese viaje que estás planificando.
• 🏷️ Categorización Inteligente: La IA no solo registra, sino que aprende de tus hábitos de gasto y mejora sus sugerencias de categorización con el tiempo.

🛠️ De la Idea al Código: Retos y Soluciones de Ingeniería

Construir Finanzz fue un viaje fascinante a través de la integración de IA en una aplicación web moderna. Aquí detallo las decisiones y los retos más importantes.

El Corazón del Problema: Hacer que la IA “Realmente Entienda”

El verdadero desafío no era solo llamar a una API de IA, sino enseñarle a interpretar la ambigüedad del habla humana. Una frase como “lo de la gasolina del otro día, fueron 800” contiene una intención clara, pero es un reto para un sistema rígido.

Para resolverlo, desarrollé un sistema de prompt engineering robusto para Google Gemini. Tras muchas pruebas, conseguí que el modelo extrajera con fiabilidad entidades (cantidad, lugar, categoría, fecha) de frases complejas. Fue un proceso de iteración que me enseñó el poder y los matices de trabajar con LLMs. Para asegurar una experiencia de usuario fluida y mantener el cliente ligero, todas estas operaciones se ejecutan en el servidor gracias a los Server Components de Next.js 15.

Justificando el Stack: Decisiones y Trade-offs

Cada tecnología fue elegida con un propósito:

• Next.js 15 (App Router): La elección de su arquitectura de Server Components fue deliberada. Procesar las peticiones de IA en el servidor era crucial para mantener la seguridad de las API keys y ofrecer una respuesta rápida en el cliente.

• Supabase y Supabase Vector: Supabase fue una elección natural por su sencillez y su base en PostgreSQL. Pero la verdadera joya fue Supabase Vector. Me permitió implementar una futura categorización semántica. Almaceno embeddings (representaciones vectoriales) de las transacciones, lo que permite buscar por significado. Funciona como un bibliotecario que organiza libros no por su título, sino por su contenido, permitiendo encontrar ideas similares aunque se expresen con palabras diferentes.

• Clerk para Autenticación: Consideré implementar autenticación personalizada, pero Clerk me permitió tener OAuth (Google, Apple) y un sistema de usuarios robusto funcionando en minutos. Fue un trade-off claro: sacrifiqué control total por velocidad de desarrollo, una decisión pragmática para un MVP.

• Zustand vs. Redux: Habiendo usado Redux antes, me decidí por Zustand para gestionar el estado global. Su simplicidad y mínima sobrecarga fueron perfectas para manejar la complejidad de múltiples listas, cuentas y filtros sin el boilerplate tradicional.

El Reto del OCR: Cuando las Facturas No Cooperan

Implementar el escaneo de facturas fue más complejo de lo esperado. Las facturas en Latinoamérica, a diferencia de otras regiones, no siguen un estándar. La posición del total, la fecha o el nombre del comercio varía enormemente.

La solución fue entrenar el prompt de Gemini Vision no solo para “leer”, sino para “entender” la estructura de una factura, buscando patrones clave como Total:, Subtotal:, fechas en distintos formatos y nombres de comercios, sin importar su ubicación en la imagen.

🚀 Mi Rol en el Proyecto

Como único desarrollador de Finanzz, mis responsabilidades abarcaron todo el ciclo de vida del producto:

• Diseño de Producto y UX/UI: Conceptualicé la idea, definí el flujo de usuario y diseñé cada pantalla, desde el onboarding hasta el registro de transacciones. Mi objetivo era crear una interfaz intuitiva que eliminara la fricción de las finanzas personales.
• Arquitectura y Desarrollo Full-Stack: Tomé todas las decisiones de arquitectura, desde elegir Next.js y Supabase hasta diseñar el esquema de la base de datos. Implementé tanto el frontend (React, TypeScript, Tailwind CSS) como el backend (Server Actions, APIs de IA).
• Ingeniería de IA (Prompt Engineering): El corazón de la aplicación. Dediqué incontables horas a diseñar, probar y refinar los prompts para Gemini, enseñándole a interpretar el lenguaje natural y a extraer datos de imágenes con precisión.
• Gestión del Proyecto y Despliegue: Administré el proyecto de principio a fin, estableciendo hitos y prioridades. También configuré el despliegue continuo y la infraestructura en Vercel y Supabase.

📈 Resultados y Mejora Continua

Finanzz no es solo un proyecto de portafolio, sino una herramienta que resolvió un problema real para mí y que tiene el potencial de ayudar a otros.

• Reducción del Tiempo de Registro: Logré mi objetivo principal: registrar un gasto ahora toma segundos en lugar de minutos. La entrada por voz y el escaneo de facturas eliminaron el 90% del trabajo manual.
• Adopción Personal Exitosa: He usado Finanzz para gestionar mis propias finanzas durante los últimos meses, lo que me ha permitido encontrar y corregir errores, además de identificar áreas de mejora basadas en el uso real.
• Feedback Positivo: Las primeras demos a colegas y amigos han validado la idea. La característica más elogiada es la capacidad de “hablarle” a la app, confirmando que la IA conversacional es el camino a seguir.

🤔 Reflexión y Aprendizaje

Este proyecto fue una inmersión profunda en la creación de productos de IA de principio a fin. Mis mayores aprendizajes fueron:

1. La IA es un Socio Creativo, no una Caja Negra: Trabajar con Gemini me enseñó que el prompt engineering es un arte. No se trata solo de pedir datos, sino de guiar al modelo, darle contexto y enseñarle a pensar como un asistente financiero.
2. La Simplicidad es la Máxima Sofisticación: En un mundo lleno de funciones, me enfoqué en hacer una cosa excepcionalmente bien: el registro de transacciones. Esta obsesión por el “trabajo a realizar” (Job To Be Done) fue clave para no perderme en funcionalidades innecesarias.
3. El Poder de un Stack Moderno: La combinación de Next.js, Vercel, Supabase y Clerk me permitió, como desarrollador en solitario, construir y desplegar una aplicación compleja a una velocidad que antes solo era posible para equipos grandes. Los Server Components, en particular, cambiaron mi forma de pensar sobre la interacción cliente-servidor.

Finanzz es el resultado de mi pasión por resolver problemas cotidianos con tecnología. Es un testimonio de cómo la IA, cuando se aplica de forma reflexiva, puede transformar tareas tediosas en experiencias fluidas y agradables.

🔮 Lecciones y Próximos Pasos

Construir Finanzz fue un máster acelerado en la integración de IA en una aplicación web moderna. La lección más grande fue que trabajar con LLMs es más parecido a enseñar que a programar: requiere paciencia, iteración constante y una comprensión profunda de cómo estos modelos “piensan”.

El roadmap a futuro incluye:

• Listas Compartidas: Para que parejas o compañeros de piso puedan gestionar presupuestos juntos.
• Búsqueda Semántica: Permitir preguntas como “¿Cuánto gasté en café el mes pasado?”.
• Reportes Inteligentes: Generar insights automáticos sobre patrones de gasto.

---

Construido con ❤️ por Yamir Alejandro Rodas Elvir