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, solo clic en iniciar sesión para comenzar la 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
Integración de UI
Integración del layout frontend desde la plantilla shadcn/Vite — sidebar, bottom nav móvil, shell de routing y scaffolding de páginas centrales.
Fase de UI demo
UI completa construida con datos demo hardcodeados (aún sin base de datos). Fase 1 del producto completada: todas las pantallas navegables con contenido placeholder realista. Arquitectura preparada para integración con Supabase.
Setup PWA
Soporte Progressive Web App configurado vía vite-plugin-pwa — manifest, service worker, prompts de instalación y fixes de build Vite para deploy con capacidad offline.
PWA y navbar móvil
Iteración extensa en layout PWA móvil — safe area insets, posicionamiento de navbar inferior, modo display standalone y evitar que el contenido quede oculto detrás del nav bar en iOS/Android. Modo landing de una sola página (sin botón home extra cuando está instalada).
Lecciones, calendario y pulido
- Test de alfabetización financiera y páginas de quiz de lecciones refinadas
- Fixes del componente calendario para UI de scheduling
- Primera implementación del service worker
- Fixes de traducción y ghosting de UI resueltos
- Nuevo ícono de app y tamaño de navbar finalizados
- Fix de posicionamiento de contenido para que áreas con scroll despejen el bottom nav
Última actualización
Pase final de pulido en la demo desplegada en finpath-mastery.vercel.app.
Construyendo Smartclic Demo