Construyendo CashUp
En esta página
CashUp es una app gamificada de educación financiera personal — rastrea ingresos y gastos, completa lecciones estilo Duolingo, escala un leaderboard de ahorro y gana badges de logros. Corre como Progressive Web App con persistencia opcional en Supabase o un modo demo en memoria para stakeholders.
No se necesita cuenta — abre Iniciar sesión y usa un usuario demo.
Qué hace
Landing de marketing
Página pública con hero, tarjetas de features (smart tracking, learn finance, compete & earn, AI tips), reseñas de usuarios, sección about, previews de cursos (3 niveles: Fundamentos, Dinero Inteligente, Inversiones), teasers de blog y acordeón FAQ.
Auth y onboarding
- Login con auth de Supabase o usuarios demo («existing user» / «new user» para demos con stakeholders)
- Flujo de onboarding con configuración de perfil
- Test de alfabetización financiera — quiz base antes de entrar a la app
App principal (rutas protegidas)
| Módulo | Propósito |
|---|---|
| Dashboard | Resumen financiero, stats, tasa de ahorro, rachas |
| Transactions | Seguimiento de ingresos/gastos con categorías |
| Subscriptions | Detección y gestión de cargos recurrentes |
| Learning | Lecciones gamificadas con páginas de estudio + quiz |
| Leaderboard | Competencia de ranking por ahorro |
| Savings goals | Progreso de ahorro con metas |
| Split expenses | División de gastos compartidos |
| Profile & settings | Preferencias de usuario, instrucciones de instalación PWA |
Features de IA
AIAnalysisDialog ofrece tips financieros personalizados según hábitos de gasto.
Comportamiento PWA
Cuando se instala como PWA standalone, la app omite la landing de marketing y enruta directo a /auth — tratando la app instalada como el producto, no el sitio folleto.
Stack tecnológico
| Capa | Elección |
|---|---|
| Framework | React 18 + TypeScript + Vite |
| UI | shadcn/ui + Tailwind CSS |
| Estado | Zustand |
| Data fetching | TanStack React Query |
| Backend | Supabase (auth + PostgreSQL) |
| Routing | React Router 6 |
| PWA | vite-plugin-pwa + service worker |
| Gráficas | Recharts |
| Formularios | React Hook Form + Zod |
| Testing | Vitest + Testing Library |
El modo demo funciona sin Supabase — todos los datos viven en memoria para que la UX completa se pueda demostrar sin configurar backend.
Proceso de desarrollo
CashUp (FinPath Mastery) es un demo de alfabetización financiera con Vite + React, estado Zustand, backend opcional Supabase y soporte PWA vía vite-plugin-pwa. Demo en vivo: finpath-mastery.vercel.app.
Shell de layout
- Integración de la plantilla Vite shadcn/ui: sidebar, bottom nav móvil y scaffold de páginas con React Router.
- Estructura de rutas para lecciones, quizzes, calendario y perfil.
- Arquitectura de componentes preparada para cableado Supabase posterior manteniendo el modo demo funcional.
Fase de UI demo (sin base de datos)
- Todas las pantallas construidas con datos placeholder realistas en memoria para navegar la UX completa sin backend.
- Flujo de test de alfabetización financiera y páginas de quiz de lecciones.
- Gráficas con Recharts y formularios con React Hook Form + esquemas Zod.
Configuración PWA
vite-plugin-pwacon manifest, service worker y prompts de instalación — ver guía Vite PWA.- Errores de build de Vite relacionados con precaching del service worker y rutas de assets corregidos.
- Carga del shell offline probada en modo pantalla de inicio.
Layout PWA móvil
- Safe area insets y posicionamiento del navbar inferior afinados para display standalone en iOS/Android.
- Contenido con scroll evitando quedar oculto detrás del nav fijo inferior.
- Modo landing de una sola página al instalar (sin botón home duplicado).
- Ghosting de UI y cadenas de traducción ES corregidos.
Pulido final
- UI de calendario de scheduling refinada y posicionamiento de contenido de lecciones sobre el nav inferior.
- Nuevo ícono de app y tamaño de navbar para pantallas pequeñas.
- Pasada final de deploy en Vercel con modo demo documentado en README.
Construyendo Galena AI