Proyecto educativo — no apto para producción sin validación técnica. Leer disclaimer
OVERVIEW
Todos sabemos que "gastamos demasiado en delivery" pero nadie quiere hacer la cuenta de verdad. Las apps de finanzas personales existentes requieren conectar tu cuenta bancaria, instalar una app mobile, o pagar una suscripción mensual — demasiada fricción para algo que debería ser simple.
Este proyecto construye algo diferente: un dashboard web donde pegas el texto de tu extracto bancario (lo copias del PDF del banco o de tu home banking), la IA categoriza cada transacción automáticamente, y en segundos tienes gráficos de torta, barras de tendencia mensual, y un análisis escrito de tus patrones de gasto con recomendaciones concretas.
Sin cuentas bancarias conectadas. Sin datos en servidores externos. Todo procesa en el cliente y en tu propio deploy de Vercel. La privacidad es parte del diseño.
Técnicamente, este proyecto te hace manejar estado complejo del lado del cliente, visualizaciones de datos con Recharts, y el patrón de "parse → enrich → visualize" que aparece en docenas de apps de productividad modernas.
TECH STACK
THE PROBLEM
El ciclo de la ignorancia financiera es conocido: no quieres ver los números, entonces no los miras, entonces no puedes cambiar nada. Las apps que intentan resolver esto tienen sus propios problemas — requieren acceso a tu cuenta bancaria (un riesgo de seguridad real), o son tan complicadas que requieren más esfuerzo que hacerlo en Excel.
Lo que la mayoría de la gente necesita no es una app de finanzas completa. Necesita una respuesta rápida a "¿en qué carajo me gasté la plata este mes?" — y esa respuesta debería tardar 30 segundos en obtenerse, no 3 horas de setup.
PROPOSED SOLUTION
El proyecto tiene tres fases de datos claramente separadas:
Ingesta: Un textarea donde el usuario pega el extracto bancario en texto plano (o un uploader de CSV para bancos que los exportan). No hay formato fijo — Claude va a parsear cualquier formato razonable.
Procesamiento con IA: El texto crudo se envía a Claude con un prompt que pide que devuelva un JSON con cada transacción categorizada. Las categorías son predefinidas (Alimentación, Transporte, Entretenimiento, Servicios, Salud, etc.) pero el modelo asigna cada transacción a la categoría correcta basándose en el descripción. Un segundo prompt genera el análisis narrativo con insights y recomendaciones.
Visualización: Zustand maneja el estado global de las transacciones procesadas. Recharts renderiza gráficos de torta (distribución por categoría), barras (gasto semanal), y líneas (tendencia del saldo). El análisis de la IA aparece como un panel de texto con formato.
MVP FEATURES
RELEASE PHASE: v0.1-ALPHA// CÓMO EJECUTARLO
PASOS SUGERIDOS
Setup y estructura: Proyecto Next.js + Zustand + Recharts. Definir los tipos TypeScript para `Transaction`, `Category`, y `AnalysisResult`.
Crear el modo demo: Antes de tocar la IA, crea un archivo con 20-30 transacciones ficticias ya categorizadas. Esto te permite construir y probar la visualización sin gastar tokens.
Construir el dashboard visual: Con los datos del modo demo, construye todos los componentes visuales — la tabla, el gráfico de torta, el de barras, los totales. Pídele a Claude Code que los genere uno por uno con el estilo que quieres.
Diseñar el schema de categorización: Define en TypeScript la estructura exacta del JSON que Claude debe devolver. Cada transacción tiene: fecha, descripción original, monto, categoría asignada, confianza de la categorización.
Crear el prompt de categorización: Un prompt que recibe el texto del extracto y devuelve el JSON. Probalo en Claude.ai primero con tus propios extractos reales para ver qué tan bien categoriza antes de integrarlo.
Integrar la API route: Conectar el textarea → API route → Claude → Zustand → visualización.
Crear el prompt de análisis narrativo: Un segundo prompt que recibe el resumen de gastos ya categorizados y genera los insights. Este prompt es más abierto y creativo.
Tabla editable: Permite al usuario corregir categorías. Cuando cambia una categoría, los gráficos se actualizan en tiempo real via Zustand.
Export y polish: Botón de export, modo demo, loading states, deploy.
LO QUE VAS A APRENDER
State management con Zustand: stores, actions, y reactivity en componentes
Visualización de datos con Recharts: customización, responsive, tooltips
El patrón "parse → categorize → visualize" aplicable a docenas de proyectos
Cómo manejar outputs de IA no deterministas: validación, fallbacks, corrección manual
Diseño de dashboards: jerarquía visual, legibilidad de datos, density de información
Privacidad by design: procesar datos sensibles sin persistirlos en servidores
HERRAMIENTAS
PUNTO DE PARTIDA SUGERIDO
Claude Code + Claude Sonnet 4.5
TAMBIÉN FUNCIONA CON
El método importa más que la herramienta. Elige la que ya conoces.
Seguridad
Si los datos del extracto bancario se procesan en el servidor (no solo en el cliente), verificar que no se persisten en ningún log, base de datos, o servicio de analytics
Si la app usa API routes para llamar al LLM, protegerlas con algún mecanismo de autenticación básico antes de hacerla pública — cualquiera con la URL podría gastar tus créditos
Sanitizar los datos del CSV o texto pegado antes de renderizarlos en el DOM para evitar XSS (por ejemplo, descripciones de transacciones con caracteres especiales o HTML)
No exponer endpoints que devuelvan datos de transacciones del usuario sin verificar que la request pertenece al usuario correcto si escalas a múltiples usuarios
Rendimiento
No cargar todas las transacciones en el DOM al mismo tiempo si hay más de 200-300 filas: implementar paginación en la tabla o virtualización de filas (react-virtual)
Usar `useMemo` o `React.memo` para los componentes de gráficos — Recharts re-renderiza todos los puntos del gráfico en cada cambio de estado si no está memoizado
Evitar re-fetching o re-categorización innecesaria: si el usuario ya categorizó las transacciones, no volver a llamar al LLM a menos que explícitamente recargue
Parsear el CSV en un Web Worker si el archivo es grande para no bloquear el hilo principal y congelar la interfaz
Arquitectura y Estructura
Separar la capa de datos (parseo del CSV, llamadas al LLM) de la capa de presentación (componentes de gráficos y tabla) — el store de Zustand es el puente entre ambas
Definir tipos TypeScript estrictos para `Transaction` y `Category` antes de implementar los gráficos — los tipos te protegen de bugs difíciles de debuggear en la visualización
Implementar un estado de `empty state` explícito para cuando no hay datos cargados: no mostrar gráficos vacíos o rotos, sino un mensaje claro de "sube tu extracto para comenzar"
Usar error boundaries alrededor de los componentes de gráficos para que un error en Recharts no rompa toda la página
Antes de publicar (MVP Checklist)
Verificar que el dashboard carga y renderiza correctamente con datos reales (no solo con los datos de demo) en menos de 3 segundos
Probar que los gráficos se renderizan correctamente en pantallas móviles — Recharts requiere configuración explícita de `ResponsiveContainer` para ser responsive
Confirmar que no hay errores de TypeScript en el build (`npm run build`) antes de deployar
Verificar que los estados de "sin datos" y "error de parsing" muestran mensajes útiles y no pantallas en blanco o errores de consola
// FASES DE DESARROLLO
Fase 1 — Setup + datos de prueba (1 hora):
Exporta tus propios datos bancarios en CSV. Crea el proyecto base. Tener datos reales desde el inicio hace que cada fase sea verificable.
Fase 2 — Parsing de CSV (2-3 horas):
Componente que lee el CSV, normaliza las columnas (los formatos varían por banco), y devuelve un array de transacciones tipado.
Fase 3 — Categorización con IA (2-3 horas):
Endpoint que toma las transacciones y las categoriza automáticamente (comida, transporte, entretenimiento, etc.) usando el LLM.
Fase 4 — Visualización (3-4 horas):
Gráficos de gastos por categoría, tendencias por mes. Usar Recharts o Victory.
Fase 5 — Insights de IA (2-3 horas):
Chat o panel de análisis que responde preguntas sobre los datos ("¿en qué mes gasté más?", "¿cuáles son mis gastos evitables?").
¿Agente o modo chat?
Modo agente para Fases 1-3 (setup y lógica de datos). Modo chat para refinar los prompts de categorización y los insights — son iteraciones frecuentes sobre el mismo archivo.
¿TUI o editor?
Cursor o Windsurf: La ventaja de ver los datos y los gráficos en el mismo entorno mientras se generan es significativa en este proyecto.
Claude Code: Igual de efectivo para la lógica de backend y parsing.
// PROMPT INICIAL SUGERIDO
Construye una aplicación Next.js que: 1. Permita al usuario subir un archivo CSV con transacciones bancarias (columnas: fecha, descripción, monto). 2. Parsee el CSV en el cliente usando papaparse. 3. Muestre un dashboard con: (a) gráfico de gastos por categoría usando Recharts, (b) tabla de transacciones con filtros por fecha y categoría, (c) resumen mensual. 4. Use [tu LLM] para categorizar automáticamente cada transacción basándose en su descripción. Todo el procesamiento debe ocurrir en el cliente — no enviar datos a ningún servidor propio.
¿LISTO PARA CONSTRUIRLO?
Abre tu herramienta de Vibe Coding favorita y empieza a construir.