Gastos: Seguimiento de Finanzas en Segundos

Una herramienta minimalista para registrar tus finanzas en segundos, sin las complejidades de otras apps.

Gastos es una aplicación web diseñada para cualquier persona que busque controlar sus finanzas diarias de forma simple y directa. A diferencia de otras herramientas, se enfoca en la velocidad y la simplicidad, permitiendo registrar una transacción en menos de 5 segundos, sin la barrera de un registro de usuario.

🚀 Resultados Clave

  • Acceso Instantáneo sin Registro: La aplicación elimina la fricción de crear una cuenta. Toda la información se almacena de forma segura y persistente en el navegador del usuario, permitiendo un uso inmediato.
  • Interfaz de Usuario Enfocada en la Velocidad: El diseño y la arquitectura están optimizados para una sola tarea: registrar gastos rápidamente. Cada elemento de la UI está pensado para minimizar clics y tiempos de espera.
  • Despliegue Continuo con Vercel: El proyecto está configurado con un pipeline de CI/CD, permitiendo actualizaciones y mejoras automáticas directamente desde el repositorio de código.

🎯 El Desafío

El proyecto "Gastos" nació de una necesidad personal: tener una aplicación para registrar mis finanzas diarias que fuera genuinamente rápida y privada. Las soluciones existentes a menudo eran demasiado complejas o requerían ceder datos a servicios de terceros.

Esto me llevó a plantear un desafío técnico clave: construir una aplicación 100% funcional en el lado del cliente, capaz de almacenar datos de forma persistente y segura directamente en el navegador, eliminando la necesidad de un backend y garantizando la privacidad del usuario.

🛠️ Stack Tecnológico

Para hacer frente a este desafío, seleccioné un conjunto de herramientas modernas y eficientes, enfocadas en el rendimiento y la experiencia del desarrollador:

  • Framework: Nuxt 3 (Vue.js)
  • Gestión de Estado: Pinia
  • Base de Datos Frontend: IndexedDB
  • Abstracción de Base de Datos: Dexie.js
  • Visualización de Datos: ApexCharts
  • Manejo de Moneda: Dinero.js
  • Estilos: SCSS