Desarrollando una app para procesar documentos con IA en directo. Parte 3: Generamos un dashboard de explotación con Claude Code

En la sesión de hoy hemos construido el dashboard de Luma Spend — el proyecto que convierte fotos de tickets de supermercado en datos analizables.

Si el nombre se lo ha inventado nuestra becaria Clauda

Recuerda que llevamos varias sesiones levantando este sistema desde cero: una API en FastAPI que recibe la imagen de un ticket, un LLM que extrae los datos de forma estructurada, y una base de datos SQL normalizada donde todo queda guardado con upsert para evitar duplicados.

Hoy ha tocado hacer esos datos visibles.

Hemos diseñado el endpoint GET /api/v1/dashboard/report, implementado las queries de agregación sobre tickets, productos y supermercados, y conectado la vista HTML para que se hidrate en tiempo real con fetch. También hemos generado más de 500 tickets de prueba para poder ver el dashboard con datos reales y validar que las métricas tienen sentido.

Al final de la sesión, Luma Spend tiene un cuadro de mando funcional que muestra gasto por supermercado, productos más comprados y evolución mensual del gasto.

Como siempre, si quieres apoyar el canal puedes hacerlo a través de mis enlaces de afiliado:

DigitalOcean — la plataforma que uso para desplegar APIs y servicios. Con mi código te llevas 200$ de crédito gratis para empezar: m.do.co/c/eddc62174250

Netlify — la mejor forma de desplegar proyectos frontend de forma sencilla y rápida: join.netlify.com/uk2itht31g7b