shubankar-sridhar/fintrack

Purpose and Deployment

FinTrack is a single-user-session personal finance manager for accounts, transactions, budgets, savings, recurring obligations, loans, and reporting. The production shape is a React SPA served as compiled static assets by a Flask backend, with Render deployment configuration in render.yaml. Key runtime entry points are backend/app.py and src/main.jsx.

Frontend Application Shell

src/main.jsx mounts the React application; src/App.jsx owns authentication state, shared data refresh behavior, and section-level routing. Once authenticated, the shell combines navigation and user controls from src/components/Sidebar.jsx and src/components/Header.jsx; unauthenticated users are routed to src/components/AuthScreen.jsx.

API Boundary and Authentication

The browser uses a centralized fetch layer in src/utils/api.js to call Flask /api/* endpoints. backend/app.py is the REST and static-serving boundary: it handles registration, login/logout, session-based authentication, user-scoped authorization, CRUD operations, transactional finance actions, export/reset, and analytics aggregation. Passwords are SHA256-hashed; Flask sessions carry authenticated identity.

Persistence and Financial Domain

backend/database.py owns SQLite initialization and schema access. users is the tenancy root; accounts, categories, expenses, income sources, recurring payments, savings goals, and EMIs are associated with a user, with transaction-related records additionally referencing accounts/categories where relevant. The backend enforces business mutations such as account balance changes, transfers, income receipts, recurring processing, savings contributions, and EMI payments.

Transaction and Obligation Workflows

Expense, income, account, category, recurring, savings, and EMI screens each collect input and invoke corresponding APIs:

src/components/Expenses.jsx, src/components/Income.jsx, and src/components/Accounts.jsx manage core cash-flow records and account transfers.

src/components/Recurring.jsx, src/components/Emis.jsx, and src/components/Savings.jsx manage scheduled liabilities and goal allocation. Date/frequency handling is backed by Python dateutil, with due-payment state exposed to navigation and dashboard views.

Dashboard and Analytics Read Models

The dashboard consumes summary, recent activity, and monthly aggregate data to present the current financial state in src/components/Dashboard.jsx. Analytics requests backend-generated monthly income/expense, category-spend, and daily-spend aggregates, rendered through Chart.js in src/components/Analytics.jsx. This keeps aggregation and user-data filtering server-side while visualization remains client-side.

Build and Runtime Infrastructure

Development uses Vite/React from package.json and vite.config.js; its production build is committed/served under backend/static/index.html and backend/static/assets/. Backend dependencies and production WSGI hosting are defined by backend/requirements.txt, including Flask, SQLite access, date utilities, and Gunicorn. No separate queue, scheduler, or external database service is represented; due recurring work is initiated through application API actions.