Expense Flow

Expense Flow is a portfolio finance tracker for recording income and expenses, filtering transactions, and keeping a clear balance overview.

Status

Portfolio-ready. Glassmorphism dark UI, inline validation, localStorage persistence, responsive layout.

Live Demo

Not deployed yet.

Preview

Additional QA screenshots:

• Mobile preview

Features

• Add income and expense transactions
• Edit and delete transactions
• Summary cards for balance, income, and expenses
• Category, type, search, and sort controls
• Local persistence with localStorage
• Empty states for first use and filtered results
• Responsive layout for desktop and mobile
• Safe text rendering through DOM APIs

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript
• LocalStorage API

Project Structure

expense-tracker/
  index.html
  assets/
    icons/
      favicon.svg
    og/
      og-image.svg
    screenshots/
      .gitkeep
  src/
    css/
      styles.css
    js/
      app.js
  README.md

What I Practiced

• DOM rendering without a framework
• Client-side financial state management
• Filtering, sorting, and search logic
• Form validation
• Safe rendering of user-entered text
• Responsive dashboard UI
• Product-oriented empty states and summaries

Local Run

Open index.html in a browser or use a local static server such as Live Server.

QA Checklist Before Publish

• Add income and expense transactions
• Edit and delete a transaction
• Check balance, income, and expense totals
• Test search, type filter, category filter, and sorting
• Refresh page and confirm localStorage persistence
• Check mobile layout
• Add screenshots and live demo link

Future Improvements

• Add monthly budget goals
• Add category charts
• Add CSV export
• Add recurring transactions