Transaction layer
Expenses and income share one consistent record model with categories, notes, dates, and an audit-friendly history.
Back to Work
Atlas
A personal finance workspace I built for my own money triage: capture expenses quickly, keep recurring payments visible, follow savings goals, and review income against spending without maintaining a spreadsheet.
ReactSupabaseTailwind CSSPostgreSQLChart.js
Overview
The Challenge
My own finance tracking was split between statements, notes, and a spreadsheet I updated too late. The problem was less about advanced budgeting and more about making daily capture easy enough to keep the month accurate.
Atlas brings expenses, income, categories, savings goals, and recurring payments into one small workspace. Quick entry is intentionally simple; the heavier analysis stays in monthly and category views where it is useful.
This was an independent product and a practical design exercise: test whether fast capture, visible recurring costs, and progress-led feedback could make a personal tool worth reopening after the first week.
Timeline
2 months
Role
Full-Stack Developer & Designer
Tech Stack
- • React
- • Tailwind CSS
- • Supabase
- • PostgreSQL
- • Chart.js
App Type
Personal Finance Web App
Money model
Every movement needs context.
Atlas turns scattered transactions into a readable financial system: capture what changed, plan what comes next, and make progress visible without turning personal finance into accounting software.
Budget layer
Category limits translate monthly intent into something users can check against real spending as it happens.
Goal layer
Savings targets connect contributions to a clear destination, with progress that stays understandable at a glance.
Reporting layer
Trends and comparisons surface the decisions behind the numbers instead of filling the dashboard with decorative charts.
Dashboard
Your Financial Overview at a Glance
A clean, intuitive dashboard showing your complete financial picture — balances, recent transactions, and quick actions all in one place.
Financial Management
Track Every Dollar
Detailed views for expenses, income, and savings — helping you understand and control your financial life.
Reports & Analytics
Understand Your Financial Patterns
Compare spending, income, and categories across the month without turning the dashboard into an accounting suite.
System architecture
Simple on the surface. Structured underneath.
The build keeps financial records, access, visualization, and interface concerns separate so new money workflows can grow without making the product harder to reason about.
React workspace
Reusable financial primitives keep transaction entry, filters, summaries, and goal views consistent across the product.
Supabase foundation
PostgreSQL-backed records and authenticated ownership rules keep each user’s financial data isolated and queryable.
Derived insight layer
Chart.js consumes normalized totals so every visual is tied back to the same transaction source of truth.
Tailwind system
A compact token-led UI keeps dense financial information readable across dashboard and mobile breakpoints.
Working scope
The loop the product needed
Capture the transaction, understand the month, and decide what to change.
Capture
Expenses and income
Review
Categories and monthly totals
Plan
Savings goal progress
Remember
Recurring payments
Engineering Challenges
Design choices behind the build
Quick add without opening a long form
Solution · Single-input quick-add with smart parsing (e.g. "12.50 lunch" → amount + auto-categorised). Default category from history. Submit on Enter. The whole flow lives behind one keystroke.
Outcome · The shortest path handles the routine entry; full editing remains available for exceptions.
Smart categorisation that learns from history
Solution · Simple frequency table per merchant string + fallback to keyword rules. Wrong category = one tap to correct, which updates the rule. No heavy ML model required.
Outcome · Corrections improve future suggestions without introducing a separate machine-learning service.
Progress without turning the dashboard into a warning screen
Solution · Savings progress and month context lead the hierarchy. Warning colours are reserved for information that actually requires attention.
Outcome · The dashboard supports review and planning instead of treating every visit as a failure state.
Building a consumer app?
I take on senior contract work for consumer-facing products where UX details and daily-engagement design matter.