2026 Annual Budget Tracker

A beautiful, installable web app inspired by a Google Sheets annual budget template. Track your income, expenses, and savings with detailed category breakdowns and stunning visual charts.

Features

📊 Dashboard Tab

• Summary Cards — Total Income, Expenses, and Savings at a glance
• Monthly Table — Editable monthly totals with auto-calculated savings
• Donut Chart — Income/Expenses/Savings split with percentages
• Trend Chart — Line chart showing monthly trends across all 12 months

📅 Annual Overview Tab

• Detailed Income Table — Category-level entries (Salary, Side Hustle, Other Income) per month
• Detailed Expenses Table — 19 expense categories (Rent, Utilities, Groceries, Credit Cards, Loans, etc.)
• Auto-calculated Totals — Row totals, column totals, and grand totals
• Monthly Savings Row — Savings per month and annual total
• Bar Chart — Side-by-side Income vs Expenses comparison per month
• Expense Breakdown Donut — Annual expense distribution by category with percentages

📖 Instructions Tab

• Complete user guide with step-by-step instructions
• Tips and troubleshooting

General

• localStorage Persistence — Your data survives between visits
• Save/Reset — Manual save button and reset to sample data
• PWA Support — Installable on desktop and mobile
• Dark Theme — Easy on the eyes, matches the Google Sheets aesthetic
• Responsive — Works on desktop, tablet, and mobile

Color Scheme (extracted from original Google Sheets)

• Background: Dark navy (#151e32, #1a2540)
• Income: Green/teal (#2dd4a8)
• Expenses: Purple (#a78bfa)
• Savings: Sky blue (#38bdf8)

Run Locally

cd /home/vikern/Code/budget_app-main
python3 -m http.server 8080

Then open http://localhost:8080 in your browser.

Project Structure

├── index.html              # App shell with tab navigation
├── styles/main.css         # Complete styling (dark theme, responsive)
├── js/
│   ├── main.js             # App bootstrap
│   └── modules/
│       ├── state.js        # localStorage persistence
│       ├── default-data.js # Sample data matching screenshots
│       ├── calculations.js # Totals, breakdowns, savings
│       ├── ui.js           # Tab rendering, table rendering
│       ├── charts.js       # Canvas charts (donut, trend, bar, expense donut)
│       ├── utils.js        # Money formatting, input sanitization
│       └── pwa.js          # Service worker + install prompt
├── manifest.webmanifest    # PWA manifest
└── service-worker.js       # Offline caching

Default Sample Data

Pre-loaded with 4 months of realistic data (January–April) matching the Google Sheets template:

• Income: Salary (2x weekly), Side Hustle, Other Income
• Expenses: 19 categories including Rent, Utilities, Groceries, Credit Cards, Loans, Entertainment, etc.

May–December start at $0 for you to fill in.

How to Use

1. Open the Annual Overview tab — this is your main data entry area
2. Fill in Income categories for each month
3. Fill in Expense categories for each month
4. Switch to Dashboard to see summaries and charts
5. Click Save to persist your data

Happy Budgeting! 💰