Systems · 03
MakiFinancer Personal Finance Dashboard
A personal finance dashboard that brings spending, budgets, savings, debts and upcoming bills into one place. Every page reads from one finance engine, so it can answer the mid-month questions: how much is safe to spend, which categories will run over and what next week's bills will do to cash flow. Entry is assisted, too: it learns categories from past entries, catches duplicates and price increases, and previews a purchase's budget impact before it's saved.
- Built with
- Next.js
- React
- TypeScript
- Supabase
- Custom SVG charts
- Vercel
01 / 07
Image 1 of 7: MakiFinancer overview dashboard with KPIs, Money Left This Month and spending by category
Real app, fictional demo data.
Overview
The problem. Personal finances tend to end up split between a notes app for expenses, a spreadsheet for budgets and a mental list of bills and money owed. None of them says how much can still be spent this month, which budget is about to run over, or what the next bills will do to the cash.
What I built. MakiFinancer is a personal finance dashboard that keeps spending, income, budgets, savings, debts and upcoming bills in one place. Instead of only listing transactions, it explains them: how much is still safe to spend this month, which categories are heading over budget, and what the next bills will do to the cash.
I built the whole app: a monthly overview, expense tracking with a review inbox, budgets grouped into needs, wants and priorities, reports, insights with a health score, savings and debt tracking, and a financial calendar. Adding an expense is assisted too: it suggests the category, flags duplicates and price increases, and shows the budget impact before saving. Every page reads from one finance engine, so the numbers always agree.
Why it helps. Every page agrees because every number comes from the same engine, and budget warnings arrive while there's still time to adjust.
System architecture
- React 19 client components. Overview, Expenses, Income, Reports, Insights, Budget, Savings & Invest, Calendar, Categories and Settings. Next: Login gate.Make scenario. Logs entries from chat into the same transactions table; they arrive marked Needs review. Next: Database.
- Next.js Proxy · Route Handlers. A single-user login: an httpOnly session cookie checked on every page. Next: App state.
- React context. Loads 16 queries in parallel; writes are optimistic and roll back if the database refuses them. Next: Finance engine, Database.
- Pure TypeScript. One snapshot feeds every page: totals, budgets and pace, forecast, net worth, health score and 20 insight rules. End of flow.Supabase Postgres · 16 tables. Transactions, categories, budgets, savings, investments, calendar events, debts, assets and settings. End of flow.
Key features
- One finance engine behind every page
- Assisted entry: learned categories, duplicate and price-increase checks
- Budget impact preview before an entry is saved
- Budgets with Needs, Wants and Priorities envelopes and pace warnings
- Transfer-aware Money Left This Month
- 7, 14 or 30-day Safe to Spend forecast and a financial calendar
- 20-rule insights and a 0–100 health score
- Savings goals, emergency fund, investments, debts and net worth
- Reports with a monthly closing summary
- Dark, light and system themes
Integrations
- Supabase
- Telegram bot via Make