Finance Manager (LocalStorage-based)

A comprehensive front-end Finance Manager application that enables users to sign up / log in, manage their finances, track budgets, and visualize financial data through interactive charts. All data is stored in the browser using LocalStorage (no backend required).

Features

• 🔐 User Authentication: Sign up and login system with username/password
• 💰 Income & Expense Tracking: Log income and expenses with categories
• 📊 Financial Analytics: Interactive charts showing income vs expense trends and balance history
• 💵 Budget Management: Set spending limits by category and track budget status
• 🎵 Audio Feedback: Sound effects for user interactions (success, error, hover)
• 📱 Responsive Design: Modern UI with card-based layout and smooth animations
• 🔒 Session Management: Secure user sessions with automatic redirects

Tech Stack

• HTML5: Semantic markup with responsive design
• CSS3: Modern styling with Google Fonts (Poppins, Roboto Condensed), custom properties, and animations
• Vanilla JavaScript:
  • DOM manipulation with querySelector, innerHTML, and template literals
  • Event handling with addEventListener
  • Array methods: find, some, forEach, push, indexOf, map
  • LocalStorage API for data persistence
  • JSON serialization/deserialization
• Chart.js: Interactive data visualization library for financial charts
• Web Audio API: Sound effects for enhanced user experience

Project Structure

End term project/
├── index.html          # Authentication page (signup/login)
├── Signup.js           # Authentication logic + LocalStorage utilities
├── style.css           # Auth page styles
├── dashboard.html      # Main dashboard with all features
├── dashboard.js        # Dashboard logic (finance tracking, charts, budgets)
├── dashbaord.css       # Dashboard styles (note: filename typo preserved)
├── audio.js            # Audio feedback for card hover interactions
├── Audio/              # Sound effect files
│   ├── success.mp3
│   ├── error.mp3
│   ├── income.mp3
│   ├── expense.mp3
│   └── select.mp3
└── img/                # Images and assets
    ├── Logo.svg
    ├── user.png
    └── bg.jpg

How It Works

Authentication (Signup.js)

• managePage(id): Dynamically switches between Signup and Login views by replacing container HTML
• showPopUp(content): Displays temporary notification messages (2-second fade)
• setLocalStorage(vname, value): Stores data in LocalStorage as JSON strings
• readStorage(vname): Retrieves and parses JSON data from LocalStorage with array fallback
• RegisterUser(btn):
  • Validates all input fields
  • Checks for duplicate usernames using some()
  • Creates new user account and finance record
  • Stores user data, finance data, and sets current session
  • Plays success sound and redirects to dashboard
• logInUser(btn):
  • Validates credentials using find()
  • Sets current user session
  • Plays welcome sound and redirects to dashboard

Dashboard (dashboard.js)

Security & Initialization

• Security Check: Verifies CurrentUser and Finance exist, redirects to login if missing
• findUserIndex(): Locates the logged-in user's finance record in the Finance array

Profile & Display

• Renders user profile (name, username, current balance)
• Displays recent income and expense transactions
• Shows budget status with color-coded indicators (green/red)

Financial Operations

• logNewExpense(e):
  • Validates expense source, category, and amount
  • Checks sufficient balance before deducting
  • Updates category budget limits
  • Appends expense to transaction history
  • Plays expense sound effect
  • Refreshes dashboard to show updated data
• logNewIncome(e):
  • Validates income source and amount
  • Adds amount to current balance
  • Appends income to transaction history
  • Plays income sound effect
  • Refreshes dashboard

Budget Management

• setNewBudget():
  • Allows setting spending limits by category
  • Updates existing budgets or creates new ones
  • Categories: Food, Groceries, Miscellaneous, Rent, Shopping
  • Automatically tracks spending against limits

Data Visualization

• renderFinanceChart():
  • Creates line chart comparing income vs expense trends
  • Uses Chart.js with custom styling matching app theme
  • Shows transaction history over time
• renderBalanceHistoryChart():
  • Displays balance progression after each transaction
  • Reconstructs balance timeline from income/expense logs
  • Point-styled chart with hover tooltips

Audio Feedback (audio.js)

• Card Hover Effects: Plays select sound when hovering over cards
• Visual Feedback: Adds card-active class for highlight effect
• Error Handling: Gracefully handles audio playback errors

LocalStorage Data Structure

The application uses three main LocalStorage keys:

Users (Array)

[
  {
    Name: "John Doe",
    Id: "johndoe",
    Password: "password123"
  }
]

Finance (Array)

[
  {
    Id: "johndoe",
    currentBalance: 5000,
    income: [
      { Source: "Salary", Amount: 3000 },
      { Source: "Freelance", Amount: 500 }
    ],
    expense: [
      { Source: "Groceries", Amount: 200, Category: "Groceries" },
      { Source: "Rent", Amount: 1000, Category: "Rent" }
    ],
    budgets: [
      { Category: "Food", Limit: 500 },
      { Category: "Groceries", Limit: 300 }
    ]
  }
]

CurrentUser (Object)

{
  Name: "John Doe",
  Id: "johndoe",
  Password: "password123"
}

Why JSON?

LocalStorage only stores strings, so the app uses:

• JSON.stringify(data) before saving
• JSON.parse(text) after reading

Fin