Finance App - Minimalist PWA

A clean, minimalist Progressive Web App (PWA) for tracking personal income and expenses. Fully offline-capable with local data storage, designed specifically for mobile use.

Features

📊 Dashboard

• Total Balance: View your overall financial balance (income - expenses)
• Monthly Summary: Quick view of current month's income and expenses
• Category Breakdown: Visual pie chart showing expense distribution by category

📝 Transaction Management

• Add Transactions: Record income or expenses with amount, category, date, and optional notes
• Edit/Delete: Modify or remove existing transactions
• Search & Filter: Quickly find transactions by category or note
• Custom Categories: Add your own custom categories on the fly

📈 Trends & Analytics

• Income vs Expenses: Compare earnings and spending over the last 6 months
• Expense Trends: Daily spending line chart for the past 14 days
• All-Time Category Spending: See which categories consume most of your budget

⚙️ Settings

• Dark/Light Mode: Toggle between themes or follow system preference
• Data Export: Export all your data as CSV or JSON
• Data Management: Clear all data with confirmation

🔒 Privacy & Offline

• 100% Offline: All data stored locally in your browser (IndexedDB)
• No Backend Required: Everything runs client-side
• No Data Collection: Your financial data never leaves your device

Installation

For iPhone/iPad

1. Open Safari on your iOS device
2. Navigate to: https://ctt062.github.io/finance-app/
3. Tap the Share button (square with arrow up)
4. Scroll down and tap "Add to Home Screen"
5. The app will appear on your home screen and open in full-screen mode

For Android

1. Open Chrome on your Android device
2. Navigate to: https://ctt062.github.io/finance-app/
3. Tap the Menu (three dots)
4. Select "Add to Home screen" or "Install app"
5. The app will be installed and accessible from your app drawer

For Desktop

Simply visit https://ctt062.github.io/finance-app/ in any modern browser.

Usage

Adding a Transaction

1. Tap the + button in the bottom navigation
2. Select Income or Expense
3. Enter the amount
4. Choose or create a category
5. Select the date (defaults to today)
6. Add an optional note
7. Tap Save Transaction

Editing a Transaction

1. Go to the History tab
2. Tap on any transaction
3. Modify the details
4. Tap Save Transaction or Delete Transaction

Viewing Trends

1. Navigate to the Trends tab
2. View multiple visualizations:
   • Income vs Expenses comparison
   • Daily expense trends
   • All-time category spending

Technical Details

Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with CSS variables for theming
• Vanilla JavaScript: No frameworks, pure ES6+ modules
• IndexedDB: Local database storage via idb library
• Chart.js: Data visualization
• Service Worker: Offline functionality and caching

Browser Support

• ✅ Safari (iOS 11.3+)
• ✅ Chrome (Android & Desktop)
• ✅ Firefox
• ✅ Edge
• ✅ Any browser with Service Worker and IndexedDB support

Data Storage

All data is stored locally in your browser using IndexedDB. No data is sent to any server. Your financial information remains completely private and offline.

Development

Local Setup

1. Clone the repository:

   git clone https://github.com/ctt062/finance-app.git
   cd finance-app

2. Serve the files using a local server (required for Service Worker):

   # Using Python 3
   python3 -m http.server 8000
   
   # Using Node.js (with http-server)
   npx http-server -p 8000

3. Open http://localhost:8000 in your browser

Project Structure

finance-app/
├── index.html          # Main HTML structure
├── style.css           # All styling
├── app.js              # Application logic
├── manifest.json       # PWA manifest
├── sw.js               # Service Worker
├── icons/              # App icons
│   ├── icon.png
│   ├── icon-192.png
│   └── icon-512.png
└── README.md           # This file

Deployment

This app is currently deployed on GitHub Pages at: https://ctt062.github.io/finance-app/

Deploying to GitHub Pages

1. Push your code to a GitHub repository
2. Go to Settings → Pages
3. Select Deploy from a branch
4. Choose main branch and / (root) folder
5. Click Save

The app will be live at https://[username].github.io/finance-app/

Alternative Hosting

You can also deploy to:

• Vercel: Drag and drop the folder
• Netlify: Drag and drop the folder
• Any static hosting service

Note: Service Workers require HTTPS, so make sure your hosting supports it.

Features Roadmap

• Recurring transactions
• Budget limits per category
• Monthly/yearly reports
• Multi-currency support
• Data backup/restore

License

This project is open source and available under the MIT License.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

Support

If you encounter any issues or have suggestions, please open an issue on GitHub.

---

Made with ❤️ for personal finance tracking