Because money disappears faster than expected — and Excel sheets are not fun.
🌐 Live App → mudra-finance.vercel.app 📱 Works on mobile, tablet, and desktop
MUDRA is a personal finance management web application built to bring clarity, structure, and visibility to your everyday finances.
Most people's money situation looks something like this — expenses scattered across five different apps, forgotten subscriptions silently draining accounts, no clear picture of where the month went. MUDRA was built to fix exactly that.
It gives you one clean, unified place to:
- See all your account balances
- Track every transaction
- Set and monitor budgets
- Work toward financial goals
- Manage recurring expenses
The name MUDRA is a deliberate choice — it means gesture, currency, and intention all at once. Managing money should feel intentional, not chaotic.
Before MUDRA, money is chaos. After MUDRA, money works for you.
Most people face three core financial problems:
| Problem | Reality |
|---|---|
| 💸 Money Chaos | Expenses scattered across apps, wallets, UPI, cash — impossible to track |
| 🔍 No Financial Clarity | Most people genuinely don't know where their money went each month |
| 🧠 Mental Accounting | Trying to remember expenses in your head instead of recording them |
MUDRA addresses all three with a structured, visual, easy-to-use dashboard that requires no financial expertise to operate.
The first thing a visitor sees — a full-screen interactive hero section with 50+ scattered Indian currency notes (₹10 to ₹2000) physically reacting to cursor movement. As the user scrolls, the notes animate into neat denomination stacks, visually symbolising the transformation MUDRA brings. Below the hero sits a features section and the login/signup form.
The central hub. Displays a high-level overview of the user's complete financial picture — total balances, recent transactions, budget progress, and active goals — all in one glance.
Manage all financial accounts in one place. Add bank accounts, wallets, or cash holdings. See individual balances clearly without switching between apps.
A complete log of every income and expense entry. Add transactions manually, categorise them, and understand your spending patterns over time.
Set monthly spending limits by category. MUDRA tracks how much of each budget has been used and how much remains — helping users spend with awareness rather than impulse.
Define financial goals (emergency fund, trip savings, gadget purchase) and track progress toward them. Visualise how close you are to achieving each target.
Track subscriptions, EMIs, and fixed monthly expenses that repeat automatically. Never be surprised by a charge you forgot about.
A dedicated page introducing the developer, the motivation behind MUDRA, and contact information.
User visits MUDRA
│
▼
┌─────────────────────┐
│ Landing Page │
│ (Hero + Features) │
└─────────┬───────────┘
│ scrolls down
▼
┌─────────────────────┐
│ Login / Sign Up │
└──────┬──────┬───────┘
│ │
Sign Up Sign In
│ │
▼ ▼
┌─────────────────────┐
│ Supabase Auth │◄─── Google OAuth (redirect flow)
└──────────┬──────────┘
│ on success
▼
┌─────────────────────┐ ┌──────────────────────┐
│ Email Confirmation │ │ Google Sheets Log │
│ (if email signup) │ │ (name, email, │
└──────────┬──────────┘ │ login time, │
│ confirmed │ provider) │
▼ └──────────────────────┘
┌─────────────────────┐
│ Dashboard │
└─────────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + Vite | UI framework and dev server |
| Styling | Tailwind CSS + Inline styles | Layout and component design |
| Auth | Supabase Auth | Email/password + Google OAuth |
| Database | Supabase (PostgreSQL) | All user financial data |
| Security | Row Level Security (RLS) | Each user sees only their own data |
| Deployment | Vercel | Hosting and CI/CD |
| Analytics | Google Sheets + Apps Script | Developer-side user login tracking |
- Node.js 18+
- A Supabase account
- A Vercel account (for deployment)
# Clone the repository
git clone https://github.com/khushishahs02/finance-management-system.git
cd finance-management-system/finance-app
# Install dependencies
npm install
# Create environment file
cp .env.example .envCreate a .env file in the root with:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keynpm run dev
# App runs at http://localhost:5173The app requires the following tables in your Supabase project:
| Table | Key Columns |
|---|---|
users |
id, name, email, created_at |
accounts |
id, user_id, name, balance, type |
transactions |
id, user_id, amount, category, date, note |
budgets |
id, user_id, category, limit, month |
goals |
id, user_id, name, target, saved |
recurring |
id, user_id, name, amount, frequency |
Enable Row Level Security on all tables and create policies so users can only access rows where user_id = auth.uid().
The app is live and deployed on Vercel.
🌐 https://mudra-finance.vercel.app
When ready to deploy:
# Step 1 — Push your code to GitHub first
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/khushishahs02/your-repo.git
git push -u origin main
# Step 2 — Install Vercel CLI
npm i -g vercel
# Step 3 — Deploy
vercelThen add these environment variables in the Vercel dashboard:
| Variable | Value |
|---|---|
VITE_SUPABASE_URL |
Your Supabase project URL |
VITE_SUPABASE_ANON_KEY |
Your Supabase anon key |
⚠️ Never commit your.envfile to GitHub. Add it to.gitignore.
I started this project primarily to gain hands-on experience — and I honestly did not know much about Claude when I began.
It solved my problems effortlessly, explained things clearly. Through building MUDRA, I learned so many things I had never touched before:
- Working with Supabase for authentication and databases
- Understanding API keys and how to connect services securely
- Connecting a live app to Google Sheets via Apps Script
- Deploying a website live on the internet using Vercel
- Understanding OAuth and how Google sign-in works under the hood
- Building physics-based animations with requestAnimationFrame
- Designing a complete multi-page React application from scratch
Honestly, I am a different person after making this app.
The idea and design are completely mine. The UI design and implementation were built with the help of Claude AI — but every decision about what to build, how it should look, and what problem it should solve came from me.
If MUDRA helps even one person understand their money better, the mission is successful.
I'd love to hear from you — whether it's a bug report, a feature idea, or just a note saying the app helped you.
| Channel | Link |
|---|---|
| khushishahs.2006@gmail.com | |
| 🐙 GitHub | github.com/khushishahs02 |
| 🐛 Bug Reports | Open an issue |
Released: 2025
First production release of MUDRA Personal Finance Manager.
This project is open source and available under the MIT License.