Organiza tus ingresos, gastos y ahorros en un solo lugar.
Una PWA (Progressive Web App) de finanzas personales construida con HTML, CSS y JavaScript puro — sin frameworks, sin dependencias de build, sin servidor. Funciona completamente desde un archivo local o desplegado en cualquier hosting estático.
| Módulo | Descripción |
|---|---|
| 📊 Dashboard | Resumen mensual de ingresos, gastos, balance y progreso de ahorro |
| 💸 Movimientos | Registro de ingresos, gastos y ahorros con filtros, búsqueda y paginación |
| 🔄 Recurrentes | Automatiza pagos o cobros que se repiten (semanal, quincenal, mensual, anual) |
| 📈 Gráficos | 4 gráficos interactivos: distribución de gastos, ingresos, balance y tendencia de 6 meses |
| 🎯 Presupuestos | Límites de gasto por categoría con alertas de exceso |
| 📅 Calendario | Visualización de movimientos por día en vista mensual |
| 🏷️ Categorías | Categorías predefinidas + creación de categorías personalizadas con emoji |
| 📤 Exportación | Exportar a CSV, JSON y Excel (múltiples hojas) |
| 📥 Importación | Importar desde archivos Excel o JSON |
| ☁️ Sincronización | Respaldo en la nube vía GitHub Gist |
| 💾 Archivo local | Guardado automático en archivo local (File System Access API) |
| 📄 Reportes PDF | Generación de reportes mensuales con tablas y estadísticas |
| 🎨 Temas | 4 temas visuales: claro, oscuro, naturaleza y océano |
| 🔐 PIN de seguridad | Protección de acceso con PIN de 4 dígitos (hash SHA-256) |
| 📱 PWA | Instalable en dispositivos móviles y escritorio, funciona offline |
- PIN hasheado: el PIN nunca se almacena en texto plano. Se guarda como hash SHA-256 usando la Web Crypto API nativa del navegador (
crypto.subtle). Incluye migración automática de versiones anteriores. - Token GitHub seguro: el token de GitHub se guarda en
sessionStorage(solo dura la sesión actual) por defecto. El usuario puede optar por persistirlo enlocalStoragemarcando explícitamente la opción "Recordar token". - Validación de esquema: todos los datos importados (archivos locales, GitHub Gist, JSON) pasan por una validación de estructura antes de ser cargados, previniendo corrupción de datos.
Descarga el repositorio y abre index.html en tu navegador. No requiere instalación ni servidor.
git clone https://github.com/EdwingAlarcon/Finanzas.git
cd Finanzas
# Abrir index.html en tu navegador favoritoPara que el Service Worker y las funciones de PWA funcionen correctamente:
# Con Python
python -m http.server 8080
# Con Node.js (npx)
npx serve .
# Luego abrir: http://localhost:8080El proyecto puede desplegarse directamente en GitHub Pages sin configuración adicional.
El proyecto es intencionalmente simple: un único index.html que carga módulos JS independientes. No hay build step, no hay bundler.
Finanzas/
├── index.html # Punto de entrada — estructura HTML + carga de scripts
├── manifest.json # Configuración PWA
├── sw.js # Service Worker (cache offline)
├── css/
│ ├── variables.css # Variables CSS (colores, temas)
│ ├── base.css # Reset y estilos base
│ ├── components.css # Componentes reutilizables (tarjetas, botones, modales)
│ ├── main.css # Layout principal y secciones
│ └── responsive.css # Media queries y adaptación móvil
└── js/
├── config.js # Variables globales, categorías predefinidas, utilidades
├── storage.js # Persistencia: localStorage, File System API, GitHub Gist, import/export
├── categories.js # Gestión de categorías predefinidas y personalizadas
├── movements.js # CRUD de movimientos, filtros, ordenamiento, recurrentes
├── charts.js # Gráficos Chart.js, presupuestos, generación de PDF
├── ui.js # Temas, tabs, modales, toasts, calendario, PIN, resumen
└── app.js # Inicialización, Service Worker, actualizarUI()
config.js → storage.js → categories.js → movements.js → charts.js → ui.js → app.js
Cada módulo depende de los globales definidos en config.js. app.js es el punto de entrada que llama a inicializar().
Todos los datos se persisten en localStorage con las siguientes claves:
finanzas_movimientos // Array de movimientos [{id, tipo, categoria, monto, fecha, descripcion}]
finanzas_objetivo // Número: objetivo de ahorro mensual
finanzas_categorias // Objeto: categorías personalizadas por tipo
finanzas_presupuestos // Objeto: presupuesto máximo por categoría
finanzas_recurrentes // Array de movimientos recurrentes
finanzas_tema // String: tema visual activo
finanzas_tab_activo // String: última pestaña visitada
finanzas_pin // String: hash SHA-256 del PIN (nunca texto plano)
finanzas_gist_id // String: ID del Gist de GitHub para sync| Librería | Uso | Carga |
|---|---|---|
| Chart.js | Gráficos interactivos | CDN (defer) |
| jsPDF | Generación de PDF | CDN (defer) |
| jspdf-autotable | Tablas en PDF | CDN (defer) |
| SheetJS / XLSX | Import/export Excel | CDN (defer) |
Sin frameworks. Sin npm. Sin build tools.
Para habilitar respaldo en la nube:
- Crea un GitHub Personal Access Token con permiso
gist. - En la app, ve a la sección Sincronización y pega el token.
- (Opcional) Marca "Recordar token" si confías en el dispositivo — de lo contrario el token se borra al cerrar el navegador.
- Haz clic en Sincronizar para crear o actualizar el Gist automáticamente.
En Chrome/Edge: abre la app en el navegador → ícono de instalar en la barra de direcciones → Instalar.
En móvil (Android/iOS): Compartir → Agregar a pantalla de inicio.
La app usa el formato de peso colombiano (COP) con locale es-CO. Para adaptar a otra moneda, modifica la función formatearMoneda() en js/config.js.
MIT — libre para uso personal y comercial.