BudgetFlow

Personal finance, redesigned for clarity.

Track income, expenses, savings, and investments — without the bloat of legacy finance apps.

Live demo →  ·  Report bug  ·  Request feature

---

Why BudgetFlow

Most budget apps either drown you in data (Mint, YNAB) or treat you like a beginner (Spendee, Goodbudget). BudgetFlow sits in between — built for someone who wants real insight into their money in under 30 seconds, with a UI that looks like it belongs in 2026, not 2014.

Built solo from scratch. Designed, engineered, and shipped end-to-end.

Features

• Five-tab workspace — Overview, Budgets, Transactions, Monthly, Yearly. Each view is purpose-built; no cluttered "do everything" screens.
• Interactive donut analytics — hover to see exact category breakdowns; click to drill down.
• Magic-link auth + cross-device sync — sign in with email, your data follows you anywhere. Guest mode (local) for instant try-before-sign-in.
• Two-step onboarding — answer 4 questions, get a suggested budget plan you can edit. Setup in under 60 seconds.
• Multi-currency support — INR default, USD/EUR/GBP and more, with proper formatting.
• Yearly intelligence — savings rate trends, category drift detection, year-over-year comparisons.
• CSV export — your data, your formats, no lock-in.
• Demo mode — instantly load 3 months of realistic INR transactions to explore the app.
• Cinematic UI — aurora animations, magnetic buttons, scroll-reveal cards, framer-motion micro-interactions, animated number counters. Designed to feel premium without being slow.
• Mobile-performance tuned — expensive GPU effects auto-disabled on small screens for smooth scroll on any device.
• Fully responsive — mobile, tablet, desktop, all polished.

Screenshots

Overview	Budgets
Transactions	Monthly view
Yearly view	Sync modal

Tech stack

Layer	Choice
Framework	React 18 + TypeScript
Build tool	Vite 5
Styling	Tailwind CSS 3.4, custom CSS variables, design tokens
Animation	Framer Motion · @number-flow/react · custom aurora background
Charts	Recharts 3 (custom-themed)
Icons	Lucide React
Backend	Supabase (Postgres + Magic-link Auth)
Hosting	Vercel + custom domain
Typography	Plus Jakarta Sans · Instrument Serif · Syne · Newsreader (Google Fonts)

Project structure

src/
├── App.tsx                          # Tab orchestrator + layout shell
├── components/
│   ├── IntroTab.tsx                 # Overview dashboard
│   ├── SetupTab.tsx                 # Budgets & category management
│   ├── TransactionsTab.tsx          # Transaction CRUD + filters
│   ├── MonthlyOverviewTab.tsx       # Monthly breakdown + insights
│   ├── YearlyOverviewTab.tsx        # Yearly trends + comparisons
│   ├── AuthModal.tsx                # Magic-link sign-in
│   ├── SyncPromptModal.tsx          # Cross-device sync onboarding
│   ├── AuroraBackground.tsx         # Cinematic aurora layer
│   ├── InteractiveWavesBackground.tsx  # Wave field background
│   ├── MagneticButton.tsx           # Cursor-attractive buttons
│   ├── ScrollReveal.tsx             # Scroll-triggered animations
│   └── CategoryIcon.tsx             # Dynamic category iconography
├── hooks/
│   └── useAppData.ts                # Centralized data layer (Supabase)
├── utils/
│   ├── demoData.ts                  # Realistic 3-month sample data
│   ├── exportCsv.ts                 # CSV export logic
│   └── formatAxis.ts                # Chart axis formatting
└── types/                           # Shared TypeScript types

Run locally

# Clone
git clone https://github.com/Navneetsingh-AI/Budget_Tracker.git
cd Budget_Tracker

# Install
npm install

# Configure Supabase (create a .env.local)
echo "VITE_SUPABASE_URL=your_url_here"  > .env.local
echo "VITE_SUPABASE_ANON_KEY=your_key_here" >> .env.local

# Dev server
npm run dev

# Production build
npm run build && npm run preview

Engineering highlights

• Custom design system — semantic CSS variables (--color-emerald, --color-emerald-dim, etc.) for theme consistency, not utility-class spaghetti.
• Animated background — interactive wave field in WebGL, throttled for performance.
• Phased shipping discipline — 3 release phases, each with its own QA pass (see commit history).
• Cross-device QA pipeline — automated screenshot capture script (capture-screens.mjs) for visual regression on mobile/tablet/desktop.
• Realistic demo data — demoData.ts generates 3 months of believable INR transactions across 12 categories so first-time users instantly see what the app does.

Roadmap

• Receipt OCR — drop a photo, auto-create a transaction
• Recurring transactions
• Multi-account support
• AI-powered spending insights ("you spent 38% more on dining this month")
• Mobile app (React Native)

About the builder

Built by Navneet Singh — MBA at IIM Indore, BTech (Civil) from IIEST Shibpur, ex-ZS Associates (pharma data engineering at $3B-client scale), ex-KPMG Consulting.

Currently building AI-native products for the Indian market.

License

MIT — do whatever you want with this. Attribution appreciated.

---

Built with care, shipped solo.

Live demo · Star this repo · Follow on GitHub