A modern, feature-rich personal finance tracker built with React, TypeScript, Supabase, and Capacitor for Android/iOS.
- Expense Management — Add, edit, delete expenses across 10+ categories (Food, Transport, Health, Shopping, Entertainment, etc.)
- Income Tracking — Log income from Salary, Freelance, Investment, Gift, and more
- Budget Management — Set monthly budgets (overall + per-category) with real-time progress bars
- Recurring Transactions — Mark expenses and incomes as weekly/monthly recurring
- Category Donut Chart — See where your money goes with visual breakdowns
- 6-Month Trend — Income vs. Expenses bar chart over time
- Daily Spending Area Chart — Track your daily expenditure patterns
- Savings Trend Line — Monitor net savings each month
- Payment Split — Cash vs. Online spending breakdown
- Month — Navigate month-by-month with prev/next arrows
- Year — View entire year at a glance
- Custom Range — Pick specific from/to dates
- All Time — See everything across all periods
- Available on Expenses, Income, and Charts pages
- Violet-indigo gradient headers with smooth rounded corners
- Glassmorphism cards and subtle backdrop blur effects
- Smooth micro-animations and hover transitions
- Dark mode–compatible color scheme
- Mobile-first responsive design
- Multi-Currency — Choose your preferred currency (₹, $, €, £)
- CSV Export — Download expenses and income data
- Search & Filter — Find transactions by keyword, category, or payment method
- Sort Options — Sort by date or amount (ascending/descending)
- Email/password authentication via Supabase Auth
- Row Level Security (RLS) on all database tables
- Encrypted data sync
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| Styling | Tailwind CSS + shadcn/ui |
| Backend | Supabase (Auth + PostgreSQL) |
| Charts | Recharts |
| Icons | Lucide React |
| Date Utils | date-fns |
| Mobile | Capacitor (Android + iOS) |
| State | React Context |
- Node.js 18+
- npm or yarn
- A Supabase project
# 1. Clone the repo
git clone https://github.com/YOUR_USERNAME/MoneyMate.git
cd MoneyMate
# 2. Install dependencies
npm install
# 3. Set up environment variables
# Create a .env file in the root with:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
# 4. Run the dev server
npm run devOpen http://localhost:8080 in your browser.
# Build the web app
npm run build
# Sync with Capacitor
npx cap sync
# Open in Android Studio
npx cap open android
# Build APK: Android Studio → Build → Build APK(s)MoneyMate/
├── src/
│ ├── components/ # Reusable UI components (forms, dialogs, nav)
│ ├── contexts/ # React contexts (Auth, Currency)
│ ├── hooks/ # Custom React hooks
│ ├── integrations/ # Supabase client setup
│ ├── lib/ # Utilities, categories config, constants
│ └── pages/ # Page components
│ ├── AuthPage.tsx # Login / Signup
│ ├── Dashboard.tsx # Home with balance, stats, recent transactions
│ ├── ExpensesPage.tsx # Expense list with date filtering
│ ├── IncomePage.tsx # Income list with date filtering
│ ├── ChartsPage.tsx # Analytics & visualizations
│ ├── BudgetPage.tsx # Budget management
│ └── SettingsPage.tsx # Profile, currency, export, about
├── android/ # Capacitor Android project
├── ios/ # Capacitor iOS project
├── capacitor.config.ts # Capacitor configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── vite.config.ts # Vite build configuration
| Variable | Description |
|---|---|
VITE_SUPABASE_URL |
Your Supabase project URL |
VITE_SUPABASE_PUBLISHABLE_KEY |
Your Supabase anon/public key |
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
npm run cap:sync |
Sync web assets to native projects |
npm run cap:android |
Open Android project in Android Studio |
npm run cap:ios |
Open iOS project in Xcode |
Pranay Bagaria
This project is licensed under the MIT License — feel free to use, modify, and distribute this project.
See the LICENSE file for details.
Built with ❤️ by Pranay Bagaria using React, Supabase & Capacitor