Tdbo
Aplicación web fullstack para gestionar gastos compartidos en viajes grupales, inspirada en herramientas como Tricount.
¡Intuitiva!
Tecnologías
- HTML 5
- CSS 3
- JavaScript
- Docker
- React.js
- Vite
- Node.js
- Express
- PostgreSQL
- Sequelize
- Pug
- JWT
El proyecto
Aplicación web fullstack para gestionar gastos compartidos en viajes grupales, inspirada en herramientas como Tricount.
Permite crear grupos de viaje, añadir participantes, registrar gastos y calcular automáticamente cómo deben repartirse las deudas entre los miembros del grupo.
El objetivo principal es simplificar la gestión de cuentas en viajes compartidos, evitando cálculos manuales y facilitando el cierre de balances entre amigos.
El reto
El principal reto consistía en diseñar un sistema capaz de gestionar múltiples usuarios dentro de un mismo grupo, con gastos compartidos y reglas de reparto dinámicas.
También era necesario resolver de forma automática el cálculo de balances entre usuarios, minimizando el número de transferencias necesarias para saldar todas las deudas.
Además, se buscaba implementar un sistema de invitaciones por enlace que funcionara tanto para usuarios registrados como para usuarios que aún no tenían cuenta.
La solución
Se desarrolló una arquitectura fullstack con frontend en React y TypeScript utilizando Vite, y backend en Node.js con Express, TypeScript y Sequelize sobre PostgreSQL.
El backend expone una API REST organizada por recursos (usuarios, grupos de viaje y gastos), con autenticación mediante JWT y control de acceso por membresía en los grupos.
El sistema de invitaciones por enlace permite guardar la invitación en caso de que el usuario no esté registrado y procesarla automáticamente tras el login o registro.
El cálculo de balances se realiza en el backend a partir de los gastos y sus divisiones, generando las transferencias mínimas necesarias para liquidar las deudas entre miembros.
Mi aportación
- Diseño de UI/UX de la aplicación
- Desarrollo del frontend con React, Vite y TypeScript
- Maquetación y diseño responsive con CSS
- Diseño del sistema visual y componentes de la app
- Diseño de navegación y flujos de usuario
- Integración del frontend con la API
Lo que aprendí
Este proyecto permitió profundizar en el desarrollo frontend con React y TypeScript, especialmente en el diseño de interfaces y la experiencia de usuario en una aplicación con datos dinámicos.
Se trabajó en la gestión de estado en el frontend, la navegación entre pantallas con React Router y la integración de datos a través de una API REST.
También se reforzó el diseño de flujos de usuario como la creación de grupos, la visualización de gastos y la interacción con el sistema de balances desde la interfaz.
