Personal Finance Application
Full-Stack Product Personal Finance Management Application
A full-stack finance dashboard for monthly budgeting, expense tracking, health scoring, visual spending analysis, AI-driven insights, CSV export, and desktop usage.
ReactTailwind CSSNode.jsExpressSQLiteChart.jsElectron
- Status
- Completed prototype
- Duration
- Personal product build
- Author
- Jason Sariwating
Problem
Managing personal finances is often unstructured and difficult to track. Budgets, expenses, debt, savings goals, and spending patterns can become scattered, making it harder for users to understand their financial habits and make informed decisions.
Solution
I built a full-stack application that centralizes monthly budget planning, real-time expense tracking, debt monitoring, savings progress, financial health scoring, and visual insights into one clean interface.
Architecture
High-level flow
User
React + Tailwind UI
Express REST API
SQLite Database
Chart.js Insights
Electron Desktop Shell
Features
- Monthly budget planning for income, fixed expenses, variable expenses, savings targets, and emergency funds.
- Real-time expense tracking with category classification, daily timeline, and weekly spending comparison.
- Financial health score from 0 to 100 with AI-driven insights and risk alerts.
- Category breakdown, expense distribution charts, and budget usage feedback.
- Debt and paylater monitoring, CSV export, notification reminders, and Electron desktop support.
Challenges
- Designing a simple workflow while still supporting budget planning, expense logging, debt monitoring, and savings tracking.
- Presenting chart data, percentages, and budget insights in a way that stays readable and actionable.
- Keeping currency handling consistent with real-time IDR formatting across the dashboard.
- Balancing a web-based REST architecture with Electron desktop packaging.
Results
- Transformed everyday financial tracking into a structured, visual, and user-friendly experience.
- Improved visibility into monthly budget usage, spending behavior, debt impact, and savings progress.
- Demonstrated a complete full-stack product build combining usability, data processing, and real-world problem solving.
Technology Used
ReactTailwind CSSNode.jsExpressSQLiteChart.jsElectron
Image Gallery
