CashUp is a gamified personal finance education app — track income and expenses, complete Duolingo-style lessons, climb a savings leaderboard, and earn achievement badges. It runs as a Progressive Web App with optional Supabase persistence or an in-memory demo mode for stakeholders.
No account needed — just click sign in to start the demo.
What it does
Marketing landing
Public landing page with hero, feature cards (smart tracking, learn finance, compete & earn, AI tips), user reviews, about section, course previews (3 levels: Fundamentos, Dinero Inteligente, Inversiones), blog teasers, and FAQ accordion.
Auth & onboarding
- Login with Supabase auth or demo users (“existing user” / “new user” for stakeholder demos)
- Onboarding flow with profile setup
- Financial literacy test — baseline quiz before entering the app
Core app (protected routes)
| Module | Purpose |
|---|---|
| Dashboard | Financial overview, stats, savings rate, streaks |
| Transactions | Income/expense tracking with categories |
| Subscriptions | Recurring charge detection and management |
| Learning | Gamified lessons with study + quiz pages |
| Leaderboard | Savings ranking competition |
| Savings goals | Target-based saving progress |
| Split expenses | Shared expense splitting |
| Profile & settings | User preferences, PWA install instructions |
AI features
AIAnalysisDialog provides personalized financial tips based on spending habits.
PWA behavior
When installed as a standalone PWA, the app skips the marketing landing and routes directly to /auth — treating the installed app as the product, not the brochure site.
Tech stack
| Layer | Choice |
|---|---|
| Framework | React 18 + TypeScript + Vite |
| UI | shadcn/ui + Tailwind CSS |
| State | Zustand |
| Data fetching | TanStack React Query |
| Backend | Supabase (auth + PostgreSQL) |
| Routing | React Router 6 |
| PWA | vite-plugin-pwa + service worker |
| Charts | Recharts |
| Forms | React Hook Form + Zod |
| Testing | Vitest + Testing Library |
Demo mode works without Supabase — all data lives in memory so the full UX can be demoed without backend setup.
Development process
UI integration
Integrated the frontend layout from the shadcn/Vite template — sidebar, mobile bottom nav, routing shell, and core page scaffolding.
Demo UI phase
Built the complete UI with hardcoded demo data (no database yet). Completed phase 1 of the product: all screens navigable with realistic placeholder content. Prepared architecture for Supabase integration.
PWA setup
Configured Progressive Web App support via vite-plugin-pwa — manifest, service worker, install prompts, and Vite build fixes for offline-capable deployment.
PWA & mobile navbar
Extensive iteration on mobile PWA layout — safe area insets, bottom navbar positioning, standalone display mode, and preventing content from hiding behind the nav bar on iOS/Android. Single landing page mode (no extra home button when installed).
Lessons, calendar & polish
- Financial literacy test and lesson quiz pages refined
- Calendar component fixes for scheduling UI
- Service worker first implementation
- Translation fixes and UI ghosting resolved
- New app icon and navbar sizing finalized
- Content positioning fix so scrollable areas clear the bottom nav
Latest update
Final polish pass on the deployed demo at finpath-mastery.vercel.app.
Building Smartclic Demo