How wiranata-orion/forecasting-my-finances works
This is a personal-finance tracker: users record income, expenses and planned costs, then review balances, spending analytics and a next-month forecast. The dashboard orchestrates data loading and presents the distinct transaction, planned-expense, analytics, and forecasting stages through dedicated views; a frontend API service communicates with Flask, which applies domain logic and persists records in SQLite. The README documents wallet/balance views, cutoff-cycle settings, forecast insights and accuracy evaluation. Some component/API wiring and forecast endpoints are unsampled, so those relationships are shown only where directly evidenced or documented.
Main entry points: Home.vue Dashboard orchestration · formatters.js Display formatters · app.py Finance API · api.js HTTP API client
Components 19
Dashboard UI
- Dashboard orchestration
frontend/src/components/Home.vue - Transaction activity
frontend/src/components/ActivityLog.vue - Transaction entry
frontend/src/components/AddTransactionModal.vue - Planned expenses
frontend/src/components/PlannedExpenses.vue - Plan entry
frontend/src/components/AddPlannedModal.vue - Overview cards
frontend/src/components/OverviewCards.vue - Allocation donut
frontend/src/components/DonutAnalytics.vue - Daily analytics
frontend/src/components/DailyBarAnalytics.vue - Wallet balances
frontend/src/components/WalletDonut.vue - Forecast view
frontend/src/components/ForecastingView.vue - Budget view
frontend/src/components/Budget.vue - Display formatters
frontend/src/utils/formatters.js
API and domain
- HTTP API client
frontend/src/services/api.js - Finance API
backend/app.py - Legacy expenses API
backend/server.js - In-memory expenses
backend/routes/expenses.js
Persistence
- Finance SQLite
backend/database.py
Forecasting
- Forecast model
backend/forecaster.py
Other components
- Finance user
Connections 23
- Finance user → Dashboard orchestration: uses
README.md - Dashboard orchestration → Overview cards: renders
frontend/src/components/Home.vue - Dashboard orchestration → Allocation donut: renders
frontend/src/components/Home.vue - Dashboard orchestration → Daily analytics: renders
frontend/src/components/Home.vue - Dashboard orchestration → Planned expenses: renders
frontend/src/components/Home.vue - Dashboard orchestration → Forecast view: renders
frontend/src/components/Home.vue - Dashboard orchestration → Transaction activity: renders
frontend/src/components/Home.vue - Dashboard orchestration → Transaction entry: renders
frontend/src/components/Home.vue - Dashboard orchestration → Plan entry: renders
frontend/src/components/Home.vue - Dashboard orchestration → HTTP API client: requests data
frontend/src/components/Home.vue - Transaction entry → HTTP API client: creates transactions
frontend/src/components/AddTransactionModal.vue - HTTP API client → Finance API: HTTP requests
- Finance API → Finance SQLite: reads and writes
backend/app.py - Finance API → Forecast model: runs forecast
backend/app.py - Dashboard orchestration → Wallet balances: presents balances
- Forecast view → Display formatters: formats values
frontend/src/components/ForecastingView.vue - Transaction activity → Display formatters: formats entries
frontend/src/components/ActivityLog.vue - Overview cards → Display formatters: formats values
frontend/src/components/OverviewCards.vue - Allocation donut → Display formatters: formats values
frontend/src/components/DonutAnalytics.vue - Daily analytics → Display formatters: formats dates
frontend/src/components/DailyBarAnalytics.vue - Planned expenses → Display formatters: formats values
frontend/src/components/PlannedExpenses.vue - Legacy expenses API → In-memory expenses: mounts route
backend/server.js - Finance user → Budget view: opens