Broslunas
Broslunas Logo Broslunas
Volver al blog

Lanzamiento de Divvy: Gastos Compartidos y Cuentas Claras

Broslunas
4 min de lectura
Lanzamiento de Divvy: Gastos Compartidos y Cuentas Claras

¡Hoy es un día muy emocionante! Después de varias semanas de desarrollo, diseño y optimización, por fin puedo presentar de forma oficial mi nuevo proyecto personal: Divvy (divvy.es).

Divvy es una aplicación web y PWA (Progressive Web App) diseñada para llevar el control, división y liquidación de gastos grupales (viajes, cenas, compras o facturas del piso compartido). El objetivo del proyecto era crear una alternativa premium, moderna y totalmente gratuita a herramientas populares como Splitwise, añadiendo capacidades inteligentes e interacciones cuidadas al máximo.

En este artículo quiero contarte por qué decidí construirlo, cuáles son sus características más destacadas y cómo ha sido la experiencia técnica detrás del desarrollo.


¿Por qué Divvy?

Seguramente hayas estado en un viaje con amigos donde uno paga la gasolina, otro el alojamiento, otro las cenas… Al final del viaje, llega el temido momento de hacer las cuentas. Aunque existen aplicaciones para esto, muchas se han vuelto lentas, están repletas de publicidad o limitan funciones básicas bajo suscripción de pago.

Con Divvy quería resolver esto creando una herramienta:

  1. Instantánea y sin fricciones: Que permita ver cómo funciona el reparto antes incluso de registrarse mediante un simulador interactivo.
  2. Inteligente: Que procese texto libre en lenguaje natural y lea tickets físicos.
  3. Visualmente premium: Con micro-animaciones, transiciones fluidas y un diseño adaptado a cualquier dispositivo.

Las Características Clave

1. El Simulador Interactivo (GSAP)

Una de las partes de las que estoy más orgulloso es el Divvy Simulator en la landing page. Quería que cualquier visitante pudiera entender el valor de la app en tres segundos.

Construido en React y animado con GSAP, el simulador permite ver a un grupo de amigos y sus gastos. Al pulsar “Optimizar cuentas”, los avatares se recolocan dinámicamente y se dibujan flechas de transacciones con sus importes optimizados. Todo el cálculo de simplificación de deudas se ejecuta en el navegador en milisegundos, mostrando visualmente cómo el algoritmo reduce el número de transferencias bancarias necesarias para saldar las cuentas.

2. Entrada Rápida por Inteligencia Artificial (NLP)

Escribir gastos a mano en el móvil puede ser tedioso. Para solucionar esto, implementé una barra de entrada inteligente. Puedes escribir cosas como:

“Dani pagó 45€ por el taxi y Ana debe 15€”

El motor de Divvy procesa el texto, identifica quién ha pagado, el concepto, el importe total y la distribución personalizada para cada miembro del grupo, rellenando el formulario de forma automática.

3. Escáner de Tickets con OCR

¿Tienes un ticket largo de supermercado y no quieres ir metiendo artículo por artículo? Subes una foto del ticket desde la cámara de tu móvil y el sistema OCR extrae los artículos e importes. A partir de ahí, puedes asignar cada línea del ticket a la persona o personas específicas del grupo que consumieron ese producto.

4. PWA y Notificaciones Push en Tiempo Real

Divvy está optimizado para funcionar como una aplicación de escritorio o móvil instalable sin pasar por la App Store o Google Play. Gracias al soporte PWA y a los Service Workers, la aplicación carga de forma casi instantánea y soporta un modo de consulta offline. Además, mediante la integración de Web-Push y el cifrado VAPID, los miembros de un grupo reciben notificaciones push inmediatas cuando alguien añade un gasto o registra una transferencia de saldo.


Stack Tecnológico y Arquitectura

Para este proyecto decidí apostar por un stack full-stack de última generación:

  • Next.js 16 (App Router) & React 19: El corazón de la aplicación. Utilizo Server Actions para todas las mutaciones de datos y APIs optimizadas para el rendimiento de la aplicación.
  • MongoDB & Mongoose: La base de datos no relacional ideal para la flexibilidad de los documentos de grupos y gastos, con índices optimizados para lecturas rápidas de balances.
  • TailwindCSS v4: Utilizado para estructurar toda la UI con la nueva especificación v4, que ofrece una compilación ultrarrápida basada en Vite y soporte mejorado de CSS nativo.
  • GSAP (GreenSock): Usado en la landing page para el simulador de deudas, blobs de gradientes flotantes en el fondo y transiciones suaves en acordeones y menús.

¿Qué es lo siguiente?

El lanzamiento de hoy es solo la base. Tengo planeadas varias mejoras interesantes para las próximas semanas:

  • Integración de pasarelas de pago directas (Bizum / Stripe) para saldar deudas en un clic.
  • Exportación de informes mensuales de gastos grupales a formato PDF y CSV.
  • Gráficos de evolución del presupuesto por categorías configurables en cada grupo.

Te invito a que entres en divvy.es, crees un grupo de prueba con tus amigos y me des tu feedback. ¡Cuentas claras, amistades largas!

¿Te gustó este post?


Deja un comentario

0/1000 caracteres

Comentarios

AI Smart Summary

No hay resumen disponible para este nivel.
Generated by Broslunas AI