Volver a Proyectos

🧭 Birra y Brújula

Organiza un viaje en grupo de principio a fin: votaciones, transporte, compra, itinerario y reparto de gastos

Liquidación entre amigos Offline En colaboración

Escala del Proyecto

6Módulos
5Páginas
8Archivos
2.5kLíneas

Descripción General

Organizar un viaje entre ocho amigos genera un grupo de WhatsApp con 400 mensajes donde nadie encuentra nada, y termina con alguien intentando cuadrar cuentas de memoria. Birra y Brújula sustituye ese caos por seis módulos con un dashboard.

Cubre el ciclo completo: gestionar asistentes, proponer casas y votarlas con ranking en directo, calcular el transporte según el modo — coche, tren o avión —, mantener una lista de compra compartida con responsable y estado, proponer y votar actividades con presupuesto por persona, y construir el itinerario por días con bloques horarios.

La pieza que más valor aporta es la última: el reparto de gastos. Calcula el balance de cada participante y propone los pagos concretos entre deudores y acreedores para cuadrar. Y genera un informe del plan, compacto o detallado, listo para imprimir o pasar a PDF.

Tecnologías Utilizadas


HTML5 multipágina

CSS3

JavaScript vanilla

localStorage

Service Worker

Informe imprimible

Los Seis Módulos

🏠 Dashboard

index.html — resumen general del viaje y gestión de asistentes.

🗳️ Votación de casa

votaciones.html — propuestas de alojamiento con votación y ranking automático en directo.

🚗 Transporte

transporte.html — calculadora de coste según el modo elegido: coche, tren o avión.

🛒 Lista de compra

compra.html — lista compartida con responsable asignado y estado de cada artículo.

🎯 Actividades e itinerario

actividades.html — propuestas votables con presupuesto por persona, e itinerario por días con bloques horarios.

💰 Liquidación

Balance por participante y pagos recomendados entre deudores y acreedores.

📄 Informe exportable

Generación del plan completo en formato compacto o detallado para imprimir o guardar como PDF.

🔄 Reinicio

Botón para limpiar todo y empezar un viaje nuevo desde cero.

Arquitectura

Aplicación multipágina sin backend: cinco HTML que comparten app.js — donde vive la lógica de los seis módulos — y style.css. La persistencia es localStorage del navegador, con una clave por módulo: trip_members, trip_houses, trip_transport, trip_shopping, trip_activities y trip_itinerary.

Birra-y-Brujula/
├── index.html             # dashboard y asistentes
├── votaciones.html        # propuestas y voto de casa
├── transporte.html        # calculadora de coste
├── compra.html            # lista compartida
├── actividades.html       # votos e itinerario
├── app.js                 # lógica de todos los módulos
├── style.css
└── sw.js                  # caché del shell y offline básico

Flujo Recomendado de Uso

  1. Añadir asistentes: desde el dashboard se registra quién viene; todo lo demás se calcula sobre esa lista.
  2. Proponer y votar casa: cada uno propone alojamientos y el ranking se actualiza con los votos.
  3. Definir transporte: se elige el modo y se guarda el coste calculado.
  4. Completar la lista de compra: con responsable asignado y estado por artículo.
  5. Proponer y votar actividades: con su presupuesto estimado por persona.
  6. Construir el itinerario: se reparten las actividades por días en bloques horarios, con generador automático de plan.
  7. Revisar la liquidación: el sistema calcula el balance y propone quién paga a quién.
  8. Exportar el informe: el plan completo se genera para imprimir o guardar en PDF.

Retos Técnicos y Decisiones de Diseño

Convertir un balance en pagos concretos

Saber que Ana ha puesto 120 € y Luis 40 € no resuelve nada: lo útil es "Luis paga 40 € a Ana". El módulo de liquidación calcula el balance de cada participante y luego empareja deudores con acreedores para proponer el menor número de transferencias posible. Es la parte con más lógica del proyecto y la única que la gente usa sí o sí.

localStorage: la decisión y su límite

Sin backend, la aplicación se despliega en cualquier sitio y no gestiona datos personales de nadie. El precio es explícito y está documentado en el README: los datos son locales a ese navegador y dispositivo. Para un viaje que organiza una persona es suficiente; para edición simultánea real, no.

Todo a coste por persona

Cada módulo — casa, transporte, actividades, compra — termina reduciendo su importe a coste por cabeza. Esa normalización es lo que permite que la liquidación final funcione sumando módulos heterogéneos, y lo que hace la cifra comprensible para el grupo.

Offline con honestidad sobre su alcance

sw.js cachea el esqueleto de la aplicación y los recursos propios. El README aclara que las imágenes externas siguen dependiendo de la red si no están en caché: prefiero documentar el límite del modo offline antes que prometer que funciona todo.

Mi Rol

Desarrollo en colaboración.

Proyecto desarrollado junto a un amigo. Participé en la arquitectura multipágina, la lógica de los módulos en app.js, el algoritmo de liquidación y el generador de informe.

Estado del Proyecto

Aplicación funcional y completa en sus seis módulos. Requiere servirse por HTTP — no por file:// — para que el service worker se registre correctamente.

Código y Enlaces