Explain My Money
OUTCOME
Explored how AI-native systems can replace traditional dashboards by transforming raw financial data into guided, real-time decision-making. Built with Agentic AI tools (Claude, Codex, Cursor, Supabase).
FEATURES
Categorize, View & Edit Transactions, Financial Data Visualizations, Per-user Budget Customization, Supabase Back End Integration, Recurring Income/Expense Tracking
The Problem
Most budgeting apps overwhelm users with complexity. People need a simple answer to: "Am I spending my money well this month?"
The Solution
A mobile-first personal finance dashboard built around the 50/30/20 rule - the idea that income should split into Needs (50%), Wants (30%), and Savings (20%). Users can adjust these percentages while being guided to prioritize high-APR debt repayment and build an emergency savings fund. Instead of dozens of categories and charts, the app gives users one clear view of whether they're on track.
The Product
Explain My Money is a mobile-first financial guidance platform for people living paycheck to paycheck. Instead of tracking money, it helps users get out of survival mode and move toward financial stability through a clear, step-by-step system.
Built on the 50/30/20 framework, the app guides users to prioritize high-interest debt, build emergency savings, and transition into investing, while showing exactly where they are in the journey and what to do next. Smart prompts, recurring expense detection, and color-coded feedback turn budgeting into an active, supportive experience rather than a passive report.
Key Features
- Guided Financial System - Uses the 50/30/20 framework to show users where their money is going and where it should go.
- Goal-Oriented Progression - Moves users through key milestones: paying off high-interest debt, building emergency savings, and transitioning into investing.
- Debt Prioritization - Surfaces and ranks debts by interest rate to guide faster, more effective payoff.
- Committed vs. Actual Spending Clarity - Separates upcoming recurring expenses from money already spent to eliminate financial surprises.
- Contextual Prompts & Guidance - Educates and encourages users with clear next steps directly within the experience.
- Color-Coded Financial Feedback - Highlights what’s on track, at risk, or needs attention for quick, intuitive decision-making.
Tech Choices
The stack prioritizes speed-to-ship and minimal infrastructure:
- Next.js 16 + TypeScript- App Router for server components and clean routing
- Supabase- Handled auth, database (PostgreSQL), and Row Level Security in one tool, eliminating a custom backend entirely
- Tailwind CSS v4 + shadcn/ui- Fast, consistent UI without a design system from scratch
- Recharts- Lightweight, composable charts for spending visualization
- Vercel- Zero-config deployment paired with Next.js
There's no custom API layer. The frontend talks directly to Supabase via RLS policies, which keeps the codebase lean. All data isolation between users is enforced at the database level, not in application code.
Status
Actively in development (v2), with Vitest unit tests and Playwright E2E tests in place for core flows.