A full-featured personal budget management application with multi-device sync, dual-currency conversion, and PWA installation support.
- 💰 Monthly Budget Management - Set and track monthly budgets, view remaining balance in real-time
- 💱 Dual Currency Support - Support for 7 currencies with real-time exchange rates (auto-updates hourly)
- 📊 Expense Tracking - Record daily expenses, preserve exchange rates at time of entry, editable
- 🛍️ Wishlist - Track items you want to buy, tax calculation support, automatic currency conversion
- 👤 User System - Register/login, cloud data storage, multi-device sync
- 📱 PWA Support - Installable as an app, fullscreen experience, no address bar
- 🎨 Modern UI - Dark theme, glassmorphism effects, smooth animations
- 🔄 Offline Cache - Service Worker support, partial offline functionality
- Open the webpage in Safari
- Tap the "Share" button at the bottom
- Select "Add to Home Screen"
- Done! Open from home screen, no address bar
- Open the webpage in Chrome
- Tap the "Install" prompt that appears
- Or tap menu → "Install app"
- Done! App appears in app list
- Open the webpage
- Click the "Install" icon ⊕ in the address bar
- Click "Install" to confirm
- Done! Runs in standalone window
- HTML5 / CSS3 / JavaScript
- PWA (Progressive Web App)
- Service Worker (offline cache)
- Responsive design
- Node.js + Express
- JWT authentication
- JSON file storage
# Install dependencies
npm install
# Start server
npm start
# Access application
http://localhost:3000/auth.html# Run deployment script
./deploy-to-server.shThe script will automatically:
- Package the project
- Upload to server
- Install dependencies
- Start PM2 process
- Configure auto-restart
- 🇨🇳 CNY (Chinese Yuan)
- 🇺🇸 USD (US Dollar)
- 🇪🇺 EUR (Euro)
- 🇬🇧 GBP (British Pound)
- 🇯🇵 JPY (Japanese Yen)
- 🇭🇰 HKD (Hong Kong Dollar)
- 🇨🇦 CAD (Canadian Dollar)
You are more than welcome to create Issues if you need more currency.
Create a .env file:
PORT=3000
JWT_SECRET=your-secret-key-here
NODE_ENV=productionBudget_Planner/
├── public/ # Frontend files
│ ├── auth.html # Login/Register page
│ ├── index.html # Main application page
│ ├── auth.css # Login page styles
│ ├── style.css # Main app styles
│ ├── auth.js # Login logic
│ ├── app.js # Main app logic
│ ├── manifest.json # PWA configuration
│ ├── service-worker.js # Offline cache
│ └── icons/ # App icons
├── server.js # Backend server
├── package.json # Project configuration
├── ecosystem.config.js # PM2 configuration
└── deploy-to-server.sh # Deployment script
- Register Account - First-time visitors need to register
- Set Budget - Set monthly budget on overview page
- Track Expenses - Add daily expenses on expenses page
- Manage Wishlist - Add items you want to buy on wishlist page
- Multi-device Sync - Login on any device, data syncs automatically
- Password encryption using bcrypt
- JWT Token authentication
- Mandatory secret key in production
- Data isolation (each user independent)
# Check service status
ssh users@server 'pm2 status'
# View logs
ssh users@server 'pm2 logs budget-tracker'
# Restart service
ssh users@server 'pm2 restart budget-tracker'
# Update code
./deploy-to-server.sh# Check logs
pm2 logs budget-tracker --lines 50
# Check port usage
lsof -i :3000- Ensure using HTTPS (or localhost)
- Check if manifest.json is correct
- Clear browser cache and retry
- ✅ User registration/login system
- ✅ Monthly budget management
- ✅ Expense tracking (editable)
- ✅ Wishlist (tax calculation support)
- ✅ Dual currency real-time conversion
- ✅ PWA support
- ✅ Multi-device data sync
- ✅ Responsive design
👨💻 Author: N28888
Budget Tracker - Making financial management easier
⭐ If you find this useful, please Star!