Building CashUp
On this page
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 — open Sign in (Iniciar sesión), then use a demo user.
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
CashUp (FinPath Mastery) is a Vite + React financial literacy demo with Zustand state, optional Supabase backend, and PWA support via vite-plugin-pwa. Live demo: finpath-mastery.vercel.app.
Layout shell
- Integrated the shadcn/ui Vite template: sidebar, mobile bottom nav, and React Router page scaffold.
- Set up route structure for lessons, quizzes, calendar, and profile screens.
- Prepared component architecture for later Supabase wiring while keeping demo mode functional.
Demo UI phase (no database)
- Built all screens with realistic in-memory placeholder data so the full UX is navigable without backend setup.
- Implemented financial literacy test flow and lesson quiz pages.
- Added charts with Recharts and forms with React Hook Form + Zod validation schemas.
PWA configuration
- Added
vite-plugin-pwawith web app manifest, service worker, and install prompts — see Vite PWA guide. - Fixed Vite build issues related to service worker precaching and asset paths.
- Tested offline shell loading for installed home-screen mode.
Mobile PWA layout
- Tuned safe-area insets and bottom navbar positioning for iOS/Android standalone display.
- Prevented scrollable content from hiding behind the fixed bottom nav.
- Enabled single landing-page mode when installed (no duplicate home button).
- Resolved UI ghosting and translation string mismatches across ES copy.
Final polish
- Refined calendar scheduling UI and lesson content positioning above the nav bar.
- Shipped new app icon and navbar sizing for small screens.
- Final deploy pass on Vercel with demo data mode documented in README.
Building Galena AI