FinApp is a progressive web app (PWA) that helps users manage their personal finances — including tracking income, expenses, and calculating real-time net worth. It’s built with Next.js and styled using shadcn/ui and Tailwind CSS, with a focus on speed, clarity, and portability across devices.
🔐 Authentication & Database: Supabase
FinApp uses Supabase as a backend-as-a-service for:
- Authentication with email/password and magic links
- PostgreSQL database with row-level security (RLS)
- Realtime queries and future socket integrations
- API handling via Supabase's auto-generated endpoints
This allowed me to build secure, session-aware features without writing custom backend code.
⚡ Data Fetching with TanStack Query
TanStack Query handles all client-side data fetching and caching:
- Request deduplication and background refetching
- Optimistic UI updates for editing accounts or transactions
- Fine-grained cache control for smooth tab/page transitions
- Error/retry state handling built in
This provides a fast and responsive UX while reducing boilerplate state logic.
📊 Visualizations
FinApp includes several built-in visualizations to help users better understand their financial situation:
- 📈 Net worth over time
- 🧾 Category breakdowns of accounts and transactions
- 👤 Custom user-defined charts (planned)
💸 Categorization & Structure
The app supports:
- Multiple accounts (e.g. cash, bank, investments)
- Custom transaction categories
- Manual input or API-based imports (planned)
Multi-currency support isn’t included yet, but the category structure is designed to scale with budgeting and goal tracking features that are currently in development.
📱 Progressive Web App
FinApp is built as a Progressive Web App (PWA):
- Installable on mobile and desktop
- Works offline (cached assets and data)
- App-like UX with smooth interactions
The PWA setup uses next-pwa to handle service worker generation and asset caching.
🚀 Deployment with Vercel
FinApp is deployed on Vercel, with:
- Automatic previews on pull requests
- Zero-downtime deploys
- Built-in CI/CD
- Edge-cached static assets
Environment secrets (e.g. Supabase keys) are securely managed through Vercel’s dashboard.
✅ Outcome
FinApp is a secure, installable personal finance tracker with realtime capabilities, visual insights, and a modern UX.
It’s designed to grow — with features like budgeting, goal tracking, and custom charting on the roadmap — while staying lightweight and user-focused.
Demo: https://fin.raynold.dev