💎 FinTrack Pro

Ultra-Premium Personal Finance Tracker

FinTrack Pro is a feature-rich, single-page personal finance tracker with stunning glassmorphism design, animated charts, budget tracking, savings goals, multi-currency support, and a financial health score — all running entirely in the browser with zero backend.

---

🎨 Color Palette & Design System

Token	Color	Hex	Usage
🟣 Accent		#6c63ff	Primary brand, buttons, highlights
🟢 Income		#10d9a8	Income amounts, positive values
🔴 Expense		#f0415a	Expense amounts, warnings
🟡 Savings		#f59e0b	Savings rate, goals progress
🔵 Accent 2		#a78bfa	Gradients, secondary accents
⬛ Dark BG		#060912	Dark mode base background
⬜ Surface		#0c1020	Dark mode sidebar/cards
🤍 Light BG		#f5f7ff	Light mode base background

---

✨ Features Overview

📊 Core Finance ✅ Add Income & Expense transactions ✅ Real-time Balance, Income, Expense summary ✅ Savings Rate with animated progress bar ✅ Financial Health Score (0–100) ✅ Today's Snapshot (daily income/spend) ✅ 7-day micro bar chart	🎯 Advanced Features ✅ Monthly Budget Tracker with alerts ✅ Savings Goals with emoji & funding ✅ Multi-currency (USD, EUR, GBP, INR, JPY) ✅ Transaction Tags (#work, #monthly) ✅ Recurring Transactions toggle ✅ CSV Export one-click
📈 Analytics & Charts ✅ Cash Flow Bar Chart (7/30/90 days) ✅ Expense Donut Chart by category ✅ Income vs Expense Trend line chart ✅ Spending Heatmap (12 weeks) ✅ Sparkline mini-charts on cards ✅ Analytics Stats Row	🎨 UI & UX ✅ Dark & Light mode with saved preference ✅ 6 Accent Color Picker ✅ Animated floating orb background ✅ Glassmorphism cards with shimmer ✅ Confetti animation on income/goals ✅ Notifications Panel with bell icon ✅ FAB floating action button menu ✅ Keyboard shortcut Ctrl+K

---

🏗️ Application Architecture

FinTrack Pro/
│
├── 📄 index.html          # Single-page app structure
│   ├── 🔷 Sidebar          # Navigation + stats + theme toggle
│   ├── 🔷 Topbar           # Search, currency, notifications, profile
│   ├── 🔷 Section: Dashboard    # Cards, add form, recent list
│   ├── 🔷 Section: Transactions # Filter, sort, search, full list
│   ├── 🔷 Section: Budgets      # Budget form + progress bars
│   ├── 🔷 Section: Goals        # Goal form + goal cards
│   ├── 🔷 Section: Analytics    # 4 charts + heatmap
│   ├── 🔷 Section: Settings     # Profile, theme, accent, data
│   ├── 🔷 FAB Menu         # Floating action button
│   ├── 🔷 Modal            # Confirm dialog
│   └── 🔷 Toast            # Notifications
│
├── 🎨 style.css           # Full design system (1400+ lines)
│   ├── CSS Variables       # Design tokens
│   ├── Animated BG         # Orbs + grid
│   ├── Sidebar             # Navigation styles
│   ├── Cards               # Glassmorphism + sparkline
│   ├── Charts              # Chart wrappers
│   ├── Budget/Goals        # Progress bars
│   └── Responsive          # Mobile breakpoints
│
└── ⚙️ app.js              # All application logic (700+ lines)
    ├── State Management    # Single state object S{}
    ├── LocalStorage        # Persist all data
    ├── Currency Engine     # Conversion + formatting
    ├── Animated Counters   # Count-up numbers
    ├── Charts Engine       # Chart.js wrappers
    ├── Health Score        # Financial scoring
    ├── Budget Alerts       # Over-budget detection
    ├── Confetti Engine     # Canvas particle animation
    └── Export Engine       # CSV generation

---

🔄 Application Flowchart

flowchart TD
    A([🚀 App Start]) --> B[Load LocalStorage]
    B --> C{First Visit?}
    C -->|Yes| D[Load Sample Data]
    C -->|No| E[Load Saved Data]
    D & E --> F[Apply Theme & Profile]
    F --> G[Render Dashboard]

    G --> H{User Action}

    H -->|Add Transaction| I[Fill Form]
    I --> J{Valid Input?}
    J -->|No| K[❌ Show Error Toast]
    K --> I
    J -->|Yes| L[Convert to USD & Save]
    L --> M{Type?}
    M -->|Income| N[🎉 Confetti Animation]
    M -->|Expense| O{Budget Exceeded?}
    O -->|Yes| P[⚠️ Show Alert Toast]
    O -->|No| Q[✅ Success Toast]
    N & P & Q --> R[Update All UI]

    H -->|Change Currency| S[Convert All Amounts]
    S --> R

    H -->|Set Budget| T[Save Budget Limit]
    T --> U[Check vs Current Spend]
    U --> V[Render Progress Bar]

    H -->|Create Goal| W[Save Goal Data]
    W --> X[Render Goal Card]
    X --> Y{Fund Goal?}
    Y -->|Yes| Z[Add Funds to Goal]
    Z --> AA{Goal Reached?}
    AA -->|Yes| AB[🎉 Confetti + Toast]
    AA -->|No| AC[Update Progress]

    H -->|View Analytics| AD[Render 4 Charts]
    AD --> AE[Cash Flow Bar]
    AD --> AF[Category Donut]
    AD --> AG[Monthly Trend]
    AD --> AH[Spending Heatmap]

    H -->|Export CSV| AI[Generate CSV File]
    AI --> AJ[📥 Download]

    H -->|Toggle Theme| AK[Dark ↔ Light]
    AK --> AL[Re-render Charts]

    R --> H

    style A fill:#6c63ff,color:#fff,stroke:#a78bfa
    style D fill:#f59e0b,color:#fff,stroke:#fbbf24
    style L fill:#10d9a8,color:#fff,stroke:#34d399
    style N fill:#10d9a8,color:#fff,stroke:#34d399
    style P fill:#f0415a,color:#fff,stroke:#fb7185
    style AB fill:#6c63ff,color:#fff,stroke:#a78bfa
    style AJ fill:#3b82f6,color:#fff,stroke:#60a5fa

Loading

---

💰 Transaction Flow

sequenceDiagram
    actor U as 👤 User
    participant F as 📝 Form
    participant V as ✅ Validator
    participant E as ⚙️ Engine
    participant S as 💾 Storage
    participant UI as 🖥️ UI

    U->>F: Enter transaction details
    F->>V: Submit form
    V-->>F: Invalid? Show error
    V->>E: Valid → Process
    E->>E: Convert amount to USD
    E->>E: Parse tags & notes
    E->>S: Save to LocalStorage
    E->>UI: Update summary cards
    E->>UI: Animate counter numbers
    E->>UI: Add to transaction list
    E->>UI: Update sparklines
    E->>UI: Update health score
    E->>UI: Check budget limits
    alt Income transaction
        E->>UI: 🎉 Launch confetti
    end
    alt Budget exceeded
        E->>UI: ⚠️ Budget alert toast
    end
    UI-->>U: Show success toast

Loading

---

🎯 Budget Alert System

flowchart LR
    A[New Expense Added] --> B[Find Category Budget]
    B --> C{Budget Set?}
    C -->|No| D[Skip check]
    C -->|Yes| E[Sum Month Expenses]
    E --> F{Percentage?}
    F -->|0–79%| G[🟢 Green Bar\nAll good]
    F -->|80–99%| H[🟡 Yellow Bar\n⚡ Warning Toast]
    F -->|100%+| I[🔴 Red Bar\n🚨 Over Budget!\nDanger animation]

    style G fill:#10d9a8,color:#fff,stroke:none
    style H fill:#f59e0b,color:#fff,stroke:none
    style I fill:#f0415a,color:#fff,stroke:none

Loading

---

🏆 Financial Health Score

flowchart TD
    HS([Financial Health Score\n0–100]) --> A
    HS --> B
    HS --> C
    HS --> D
    HS --> E

    A[💚 Savings Rate\n+30 pts max] --> A1[">30% saved → 30 pts"]
    B[📊 Expense Ratio\n+25 pts] --> B1["<70% of income → 25 pts"]
    C[📋 Activity\n+20 pts] --> C1[">5 transactions → 20 pts"]
    D[🎯 Has Budgets\n+15 pts] --> D1["Any budget set → 15 pts"]
    E[🚀 Has Goals\n+10 pts] --> E1["Any goal created → 10 pts"]

    style HS fill:#6c63ff,color:#fff,stroke:#a78bfa,stroke-width:3px
    style A fill:#10d9a8,color:#fff,stroke:none
    style B fill:#3b82f6,color:#fff,stroke:none
    style C fill:#f59e0b,color:#fff,stroke:none
    style D fill:#a78bfa,color:#fff,stroke:none
    style E fill:#f0415a,color:#fff,stroke:none

Loading

Score	Rating	Color	Meaning
80–100	🌟 Excellent	🟢 #10d9a8	Finances in great shape
60–79	👍 Good	🔵 #6c63ff	On the right track
40–59	⚡ Fair	🟡 #f59e0b	Some areas need attention
1–39	📈 Needs Work	🔴 #f0415a	Start tracking & budgeting

---

🧭 Navigation Flow

stateDiagram-v2
    [*] --> Dashboard
    Dashboard --> Transactions : View All →
    Dashboard --> Transactions : Search
    Dashboard --> Settings : Profile Button

    Transactions --> Dashboard : Nav
    Transactions --> Analytics : Nav
    Transactions --> Budget : Nav
    Transactions --> Goals : Nav

    Budget --> Dashboard : Nav
    Goals --> Dashboard : Nav
    Analytics --> Dashboard : Nav
    Settings --> Dashboard : Nav

    Dashboard --> Dashboard : Add Transaction
    Budget --> Budget : Set Budget
    Goals --> Goals : Create Goal
    Goals --> Goals : Fund Goal

    note right of Dashboard
        Summary Cards
        Add Transaction Form
        Recent Transactions
        Today's Snapshot
    end note

    note right of Analytics
        Cash Flow Chart
        Category Donut
        Monthly Trend
        Spending Heatmap
    end note

Loading

---

💱 Multi-Currency Engine

flowchart LR
    INP["User Input\ne.g. ₹500"] --> A[Detect active currency INR]
    A --> B["Convert to USD\n₹500 ÷ 83.5 = $5.99"]
    B --> C[("💾 Store in USD\n$5.99")]
    C --> D[User switches to EUR]
    D --> E["Display: $5.99 × 0.92 = €5.51"]

    style C fill:#6c63ff,color:#fff,stroke:#a78bfa

Loading

Currency	Flag	Symbol	Rate (vs USD)
US Dollar	🇺🇸	$	1.0000
Euro	🇪🇺	€	0.9200
British Pound	🇬🇧	£	0.7900
Indian Rupee	🇮🇳	₹	83.500
Japanese Yen	🇯🇵	¥	157.80

Note: All amounts stored internally in USD. Display values converted on-the-fly.

---

🖥️ Tech Stack

graph TD
    subgraph Frontend ["🖥️ Frontend (Browser-Only)"]
        H[HTML5\nSemantic Structure]
        C[CSS3\nGlassmorphism + Animations]
        J[JavaScript ES6+\nAll App Logic]
    end

    subgraph Libraries ["📦 Libraries"]
        CJ[Chart.js 4.4\nBar, Line, Donut Charts]
        GF[Google Fonts\nInter + Space Grotesk\n+ JetBrains Mono]
    end

    subgraph Storage ["💾 Data Layer"]
        LS[LocalStorage API\nAll data persisted]
    end

    subgraph Output ["📤 Output"]
        CSV[CSV Export\nDownload file]
        PDF[Print / PDF\nBrowser print]
    end

    H --> C --> J
    J --> CJ
    J --> LS
    J --> CSV
    H --> GF

    style Frontend fill:#6c63ff22,stroke:#6c63ff
    style Libraries fill:#10d9a822,stroke:#10d9a8
    style Storage fill:#f59e0b22,stroke:#f59e0b
    style Output fill:#f0415a22,stroke:#f0415a

Loading

---

🗂️ Data Structure

// Transaction Object
{
  id:        "lp2x9abc",          // Unique ID
  type:      "income" | "expense",
  desc:      "Monthly Salary",    // Description
  amount:    3500,                 // Always stored in USD
  category:  "Salary",
  date:      "2026-07-05",
  notes:     "July payment",
  currency:  "INR",               // Currency when added
  tags:      ["#work","#monthly"],
  recurring: true,
  recurFreq: "monthly" | "weekly" | "yearly"
}

// Budget Object
{
  "Food": 200,        // USD limit per month
  "Transport": 100,
  "Shopping": 150
}

// Goal Object
{
  id:       "gx7k2mnp",
  name:     "Emergency Fund",
  emoji:    "💰",
  target:   5000,       // USD
  current:  1200,       // USD funded so far
  deadline: "2026-12-31"
}

---

📱 Responsive Breakpoints

◀─────────────────────────────────────────────────────────────────────▶
 380px    540px         768px         900px         1100px      1440px
   │         │              │              │              │           │
   │ Stack   │ 2 col cards  │ Sidebar OFF  │ Single col   │ 4 cards   │
   │ all     │ 2x2 grid     │ Hamburger ON │ analytics    │ Full grid │

Breakpoint	Layout Change
< 380px	All cards stacked (1 column)
< 540px	2×2 card grid, toolbar stacks
< 768px	Sidebar hidden, hamburger menu shown
< 900px	Dashboard grid goes to 1 column
< 1100px	Cards go to 2×2 grid
≥ 1440px	Full 4-column card grid

---

⚡ Animation Catalogue

Animation	Element	Trigger	Duration
🌊 Orb Float	Background orbs	Always	12s loop
✨ Shimmer Stripe	Card top border	Always	3s loop
🔢 Counter	Summary amounts	Data change	0.9s ease
📉 Sparkline	Card mini-charts	Data change	Instant
🎴 Section Fade	Page sections	Navigation	0.4s ease
🃏 Card Lift	Summary cards	Hover	0.2s
📋 TX Slide	Transaction items	On add	0.35s + stagger
🎯 Progress Bar	Budget/Goal bars	On load	1.2s ease
🎉 Confetti	Canvas overlay	Income added	200 frames
🔔 Badge Pulse	Budget alert	Always	2s loop
💡 Brand Glow	Sidebar brand	Always	4s loop
🌀 Ring Score	Health score	On load	0.8s
🚀 FAB Spring	FAB menu items	FAB open	0.5s spring
📦 Empty Float	Empty state icon	Always	3s loop
🍞 Toast	Notification	Action	0.4s spring
🗔 Modal Scale	Confirm dialog	Triggered	0.5s spring
👤 Profile Ripple	Avatar ring	Always	2.5s loop

---

🚀 Getting Started

Option 1: Open directly in browser

# Simply open the file
index.html  →  Double click or drag into browser

Option 2: Live Server (VS Code)

# Install Live Server extension in VS Code
# Right-click index.html → "Open with Live Server"
# App runs at: http://127.0.0.1:5500

Option 3: Deploy to Vercel (Free)

# 1. Go to vercel.com/new
# 2. Drag & drop the fintack/ folder
# 3. Click Deploy
# 4. Get your live URL instantly!

---

📁 File Structure

fintack/
├── 📄 index.html      # Main HTML (789 lines)
├── 🎨 style.css       # Design system (1400+ lines)
├── ⚙️ app.js          # App logic (700+ lines)
└── 📖 README.md       # This file

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + K	Open global search
Escape	Close modal / FAB menu
Tab	Navigate form fields

---

🔑 Key Design Decisions

Decision	Reason
Zero backend	Works offline, no server costs, instant deploy
LocalStorage	Simple, fast, no auth needed
USD as base currency	Single conversion step, consistent math
Chart.js via CDN	Lightweight, no build step needed
Google Fonts via CDN	Premium typography with no setup
CSS Custom Properties	Instant theme/accent switching
ES6+ Modules	Modern JS, clean code structure
Canvas confetti	Pure browser animation, no library needed

---

🎓 Learning Outcomes

This project demonstrates:

• 🏗️ Single Page Application (SPA) architecture without a framework
• 💾 LocalStorage CRUD operations
• 📊 Chart.js integration with dynamic data
• 🎨 CSS Custom Properties for real-time theming
• 🎞️ Web Animations API & CSS keyframes
• 🖥️ Canvas API for confetti & sparklines
• 💱 Currency conversion logic
• 📤 CSV file generation in browser
• ♿ Accessibility with ARIA labels & semantic HTML
• 📱 Responsive design with CSS Grid & Flexbox

---

👤 Author

Built with ❤️ for 50x Extension – Cohort 3.0

FinTrack Pro · Personal Finance Tracker

---

██████╗ ██████╗  ██████╗
██╔══██╗██╔══██╗██╔═══██╗
██████╔╝██████╔╝██║   ██║
██╔═══╝ ██╔══██╗██║   ██║
██║     ██║  ██║╚██████╔╝
╚═╝     ╚═╝  ╚═╝ ╚═════╝

FinTrack Pro — Track Smart. Grow Faster.