FinSight is a personal finance dashboard that turns a handful of numbers about your money into a clear financial report, with an optional AI-written summary on top. You fill in your income, expenses, assets, and goals on the left, and the report on the right updates as you go.
Everything runs in the browser. Your financial data never leaves your device, it's kept in your browser's local storage.
You give it your core financial inputs and it works out a live report:
- Core metrics: Net Worth, Monthly Savings, Savings Rate, Debt-to-Income Ratio, Emergency Fund Coverage, and an overall Financial Health Score out of 100 with a Good / Moderate / Needs Attention rating. Values are colour-coded so it's easy to see what's healthy and what isn't.
- Score transparency: A "How is my score calculated?" modal shows exactly how each metric feeds into your score and which tier you land in, so it isn't a black box.
- Asset distribution: Donut charts for your cash-flow split and a suggested asset allocation based on your risk appetite.
- Goal trajectory: Pick a goal (buying a house, retirement, wealth creation, and so on), set your own target or let it estimate one, and see a projected line of your savings growing toward it along with a rough timeline.
- AI synthesis: Generates a Markdown financial report (Executive Summary, Strengths, Areas of Concern, Recommendations) using Google Gemini.
- What-if simulator: Drag a couple of sliders to try things like cutting spending or adding a lump sum, watch the effect on your savings rate, score, and timeline, and apply it to your real data if you want to keep it.
- Real-time: Every metric, chart, and projection recalculates as you type.
- Colour-coded insights: Healthy vs. at-risk values are obvious at a glance.
- Multi-currency: INR, USD, EUR, GBP, and JPY, with locale-aware formatting.
- Persistent: Your inputs and generated report survive page reloads.
- PDF export: Download a clean, print-friendly version of your report.
- Explainable score: No black box; see precisely how your score is built.
- Private by design: A fully client-side app; nothing is sent to a server except the metrics used to generate the AI summary.
- Thoughtful UX: Collapsible sidebar, mobile overlay, confirmation dialogs for destructive actions, toast notifications, and reduced-motion support.
- React 19 + TypeScript
- Vite for build/tooling
- Tailwind CSS v4 for styling
- Base UI for accessible primitives (select, slider, inputs)
- Recharts for the pie and area charts
- Google Gemini (
@google/genai) for the AI synthesis - react-markdown to render the AI report
- html2pdf.js for PDF export
- lucide-react for icons
The app is organised around a small, well-typed core:
src/utils/calculations.ts— derives all financial metrics from your inputs.src/utils/financialScore.ts— the single source of truth for the health-score rules (also powers the breakdown modal).src/context/FinanceContext.tsx— holds your data, keeps derived metrics in sync, and persists everything to local storage.src/components/— the sidebar editor and each report section (KPIs, charts, goal projection, AI insights, what-if simulator).
The AI synthesis uses a Google Gemini API key. If it isn't set, the rest of the dashboard works normally and the AI section shows a friendly "unavailable" message.