BlinkBudget - Fast Expense Tracking

Track your expenses in 3 clicks max. BlinkBudget transforms expense tracking into a swift, almost unconscious habit with beautiful, actionable insights for smarter financial decisions.

Screenshots

Desktop View

Mobile View

Financial Planning View

Key Features

Lightning Fast Entry

• 3-click expense logging - Amount -> Category -> Done
• Auto-submit on category selection - No save buttons needed
• Mobile-optimized interface focused on speed and simplicity
• Offline-capable with localStorage and Service Worker persistence
• Smart Suggestions Engine - Intelligent transaction categorization and insights
• Ghost Transactions - See historical transaction data when dates are modified
• Dynamic quick amount presets - Buttons automatically update based on your most frequently used transaction amounts with usage counters and reset functionality

Transaction Management

• Multiple transaction types: Support for Expenses, Income, Transfers, and Refunds, with enhanced validation and error reporting
• Optional transaction descriptions: Add notes to transactions or leave them blank, as you prefer
• Custom Category Management: Create, edit, and manage your own expense categories for personalized tracking
• Category Reordering: Organize your expense categories in a way that works best for you
• Streamlined transaction indicators: Simplified notifications and indicators for different transaction types:
  • Refunds are marked with an ↑ arrow to indicate money coming back
  • Transfers are marked with a ⇆ arrow to indicate money moving between accounts
• Smart categorization: Visual category chips for easy identification:
  • Food & Groceries, Dining & Coffee, Housing & Bills
  • Transportation, Leisure & Shopping, Personal Care
  • Plus your custom categories for complete control
• Multi-account support (Checking, Savings, Credit Card, Cash)
• Account-to-account transfers with automatic balance updates
• Data integrity validation - Smart checks that recognize all transaction types without false warnings
• Filter transactions by category tap on the name to show
• Date filtering functionality tap on the name to show
• Integrated category filtering between Reports and Dashboard views for consistent analysis across all sections
• Smart time period navigation with dynamic labels showing specific months and years

Dashboard & Analytics

• Real-time balance calculations across all accounts
• Account filtering - View transactions by specific account or all accounts
• Transaction history with edit/delete capabilities
• Reliable transaction editing - Improved date editing behavior with restored budget amount state display
• Visual feedback for recently added transactions
• Dashboard layout with improved spacing and optimized action buttons
• Fast chart loading with intelligent caching system and cache invalidation
• Enhanced data visualization with consistent colors for transactions
• Improved chart layout with custom legend positioning and better tooltip placement
• Seamless category filtering between Reports and Dashboard views for consistent analysis

Financial Planning & Insights

BlinkBudget includes a sophisticated financial planning engine that helps you look beyond today's expenses:

• Anomaly Detection Service - Automatically identifies unusually large transactions or irregular spending patterns.
• Automated Optimization Engine - Tailored suggestions to switch categories or reduce spending to meet savings goals.
• Investment Portfolio Tracking - Monitor your total net worth with manual entry support for various investment types.
• Long-term Goal Planning - Define specific financial objectives and track your progress over years or decades.
• Projected Account Balances - Forecast future balances based on your historical spending and incoming funds.
• Comprehensive Analytics - Deep dive into your finances with "Top Movers" analysis, historical timeline comparisons, and baseline variability insights.
• Dynamic Charting - Toggle between daily and monthly views for precise trend analysis.

User Experience & UI

• Keyboard-aware UI that adapts to virtual keyboard
• PWA support - Installable as a standalone app with offline support
• Android TWA support - Trusted Web Activity for native Android app experience with Play Store deployment
• Keyboard shortcut (Escape key) to exit Settings and return to dashboard
• Helpful tips on each section
• Top-tier Security - Advanced XSS protection, strict URL validation, and comprehensive privacy compliance
• Improved accessibility with "Skip to Content" links, ARIA roles, and proper form label associations
• Modern component foundation - BaseComponent building blocks and an Enhanced Button component for consistent UI behavior
• Enhanced color schemes with improved text contrast for better readability

Backup & Restore

• Automatic daily backup stored in Firebase, representing yesterday's state.
• Single backup overwritten each day to keep storage simple.
• Restore from last backup replaces current data with the backup (warning shown).
• Offline safe: backup skips when offline; restore requires internet.
• User feedback via custom events showing start, success, and failure.

Settings & Customization

• General Settings section - Unified Refresh App, Install App, and Logout actions
• Account management - Add, edit, delete accounts
• Date format preferences (US, ISO, EU formats)
• Data export/import capabilities
• Transaction editing with validation
• Simplified feedback system - Direct GitHub issues link for bug reports and suggestions

Tech Stack

• Frontend: Vanilla JavaScript (ES6 Modules) + Vite
• Styling: Vanilla CSS with CSS Custom Properties
• Storage: Firebase (Sync) + localStorage for offline-capable data persistence
• Testing: Vitest with jsdom environment
• Build: Vite with PostCSS optimization
• Performance: Built-in performance monitoring and optimization utilities
• PWA: vite-plugin-pwa for service worker and manifest management
• Package Manager: Yarn for improved dependency management
• Android: Trusted Web Activity (TWA) with Bubblewrap CLI for Play Store deployment

Quick Start

Quick Start

Android App (Trusted Web Activity)

Download and install the BlinkBudget APK directly on your Android device. The TWA automatically updates from the website, so you'll always have the latest version.

Note: You may need to enable "Install from Unknown Sources" in your Android settings. The app is signed and safe to install.

Prerequisites

Prerequisites

• Node.js (v22 or higher)
• yarn (v4 or higher)

Installation

# Clone the repository
git clone <repository-url>
cd blinkbudget

# Install dependencies
yarn install

# Start development server
yarn run dev

Available Scripts

yarn run dev        # Start development server
yarn run build      # Build for production
yarn run preview    # Preview production build
yarn test           # Run unit tests

Usage

Adding a Transaction (3 clicks)

1. Click "Add Transaction" button
2. Enter amount and select account
3. Click category - Transaction automatically saves!

Managing Accounts

• Go to Settings -> Account Management
• Add new accounts (Checking, Savings, Credit Card, Cash)
• Set default account for quick entry

Transfers Between Accounts

• Select "Transfer" type in transaction form
• Choose source and destination accounts
• Amount is automatically debited/credited

Architecture

Component Structure

• Functional Components returning native HTMLElements
• Props-based configuration with closure-based state
• Modular design with single responsibility principle

File Organization

src/
├── components/     # Reusable UI components
├── views/         # Main application screens
├── core/          # Router, storage, mobile utilities, auth
├── utils/         # Helper functions and constants
└── styles/        # CSS files with design tokens

Key Components

• TransactionForm - Smart form with auto-submit
• DashboardView - Main screen with stats and transaction list
• FinancialPlanningView - Advanced financial planning and forecasting
• GeneralSection - Centralized settings for app maintenance and installation
• MobileNavigation - Bottom tab navigation for mobile

Design System

Colors & Theming

• HSL color space for consistent theming
• CSS Custom Properties for maintainable styles
• Semantic color tokens (primary, surface, error, success)

Responsive Design

• Mobile-first approach with 768px breakpoint
• Touch-friendly 56px minimum touch targets
• Adaptive layouts for different screen sizes

Testing

Comprehensive test suite covering:

• Component functionality
• Form validation and submission
• Mobile-specific features
• CSS architecture and optimization

yarn test           # Run all tests
yarn test -- --watch # Run tests in watch mode

Production Build

Optimized production builds include:

• CSS purging to remove unused styles
• Autoprefixer for browser compatibility
• CSS minification with cssnano
• Asset optimization through Vite
• PWA Service Worker generation

Contributing

This project follows strict coding standards:

• Vanilla JavaScript ES6+ modules
• Functional component patterns
• Semantic HTML with accessibility focus
• Performance-optimized implementations

License

GPLv3 License

---

BlinkBudget - Making expense tracking effortless, all in 3 moves.

Reminder: This application leverages AI-assisted development. Most logic and UI components were generated through collaborative AI engineering.