FinApp

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