Vaultly
A full-stack personal finance tracker with real-time analytics, multi-wallet support, and interactive data visualizations.
Vaultly was built to solve a real problem I faced: tracking finances across multiple accounts without relying on spreadsheets. The goal was a clean, fast, and secure web app providing instant insights into spending habits while keeping user data private through secure authentication and database design.
Key Features & Highlights
- Full-stack architecture with Nuxt 3 and TypeScript for type-safe, maintainable code
- Secure authentication and PostgreSQL persistence via Supabase with row-level security
- Interactive financial charts and spending analytics using Recharts with full dark mode support
- Multi-wallet system for organizing transactions across personal, savings, and business accounts
Tech Stack
Nuxt 3
SSR & SSG for performance
Vue 3
Composition API for reusable logic
TypeScript
Type-safe across the stack
Tailwind CSS
Utility-first responsive styling
Supabase
Auth, real-time DB, RLS
PostgreSQL
Relational data & complex queries
Recharts
Interactive financial charts
Pinia
State management
Challenges & Solutions
Problem
Complex queries across multiple wallets and time ranges slowed the dashboard.
Solution
Optimized PostgreSQL views and used Supabase realtime subscriptions to cache and sync metrics efficiently.
Problem
Chart performance degraded with 6+ months of transaction history.
Solution
Added data aggregation layers and virtualized rendering with Recharts, reducing render time by ~60%.