💰 Cuentas Claras - Divisor de Gastos

Una pequeña aplicación educativa de Vue 3 para aprender los conceptos fundamentales del framework mientras se desarrolla una herramienta práctica para dividir gastos entre varias personas.

📋 ¿Qué hace?

Cuentas Claras es una aplicación que permite:

• Registrar un gasto total junto con el número de personas que lo compartirán
• Calcular automáticamente cuánto debe pagar cada persona
• Rastrear pagos marcando a las personas que ya han pagado
• Visualizar la deuda restante en tiempo real

🎯 Características principales

• ✅ Formulario reactivo para ingresar el monto total y cantidad de personas
• ✅ Cálculo automático de la porción individual
• ✅ Lista de personas con estado de pago
• ✅ Cálculo dinámico de la deuda pendiente
• ✅ Interfaz responsiva con Tailwind CSS

🏗️ Estructura del proyecto

Componentes principales:

• ExpenseForm.vue - Formulario para ingresar el gasto total y cantidad de personas
• PeopleList.vue - Contenedor que muestra la lista de personas
• PersonItem.vue - Componente individual para cada persona con estado de pago

Conceptos de Vue 3 utilizados:

• ref y computed para reactividad
• v-model para binding de datos
• v-for para renderizado de listas
• Props y emits para comunicación entre componentes
• Event listeners con @

🛠️ Stack tecnológico

• Vue 3 - Framework progresivo
• Vite - Herramienta de construcción rápida
• Tailwind CSS - Framework de estilos
• JavaScript - Lógica de la aplicación

🚀 Cómo ejecutar

# Instalar dependencias
pnpm install

# Ejecutar en modo desarrollo
pnpm run dev

# Construir para producción
pnpm run build

📚 Configuración recomendada

IDE: VS Code + Vue (Oficial)

Devtools del navegador:

• Chrome/Edge: Vue.js devtools
• Firefox: Vue.js devtools

📖 Referencias

• Documentación de Vue 3
• Guía de Vite

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint