Transaction Manager

A modern transaction management interface built with Svelte 5, featuring smart categorization, advanced filtering, and comprehensive analytics for personal expense tracking.

🚀 Features

Core Functionality

• Transaction Display & Management: Sortable table by date, amount, category, and description
• Advanced Filtering: Filter by date range, category, and search text
• Smart Categorization: Automatic categorization based on merchant descriptions
• Manual Override: Edit categories manually with dropdown selectors
• Real-time Analytics: Category breakdown with spending insights

Smart Categorization

• Automatic categorization using merchant keyword matching
• Categories include: Coffee, Groceries, Gas, Restaurants, Shopping, Entertainment, Transportation, Health, Utilities, Gifts, and Other

Analytics Dashboard

• Summary Statistics: Total transactions, total spent, average transaction amount
• Category Breakdown: Visual representation with progress bars and percentages

🛠 Technology Stack

• Frontend: Svelte 5 with SvelteKit
• Language: TypeScript
• Styling: TailwindCSS
• State Management: Svelte 5 Runes ($state, $derived)
• Build Tool: Vite

📦 Installation & Setup

Prerequisites

• Node.js (version 18 or higher)
• npm, yarn, or pnpm

Getting Started

1. Install dependencies:

   npm install
   

2. Start development server:

   npm run dev
   

3. Open your browser: Navigate to http://localhost:5173

🏗 Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── TransactionTable.svelte      # Sortable transaction table
│   │   ├── TransactionFilters.svelte    # Filtering interface
│   │   └── Analytics.svelte             # Analytics dashboard
│   ├── stores/
│   │   └── transactionStore.svelte.ts   # State management with Svelte 5 runes
│   ├── data/
│   │   └── transactions.json            # Sample transaction data
│   ├── categorizer.ts                   # Smart categorization logic
│   └── types.ts                         # TypeScript type definitions
├── routes/
│   ├── +layout.svelte                   # Main layout with header
│   └── +page.svelte                     # Main application page
├── app.css                              # TailwindCSS configuration
└── app.html                             # HTML template

🎯 Key Implementation Details

Svelte 5 Runes Usage

• $state: Reactive state for transactions, filters, and sort configuration
• $derived: Computed values for filtered transactions, category stats, and totals
• $derived.by: Complex derivations with custom logic

Smart Categorization Algorithm

// Example categorization rules
const CATEGORY_RULES = {
  'Coffee': ['STARBUCKS', 'DUNKIN', 'COFFEE'],
  'Groceries': ['WHOLE FOODS', 'TRADER JOE', 'COSTCO'],
  'Gas': ['SHELL', 'EXXON', 'CHEVRON'],
  // ... more categories
};

Component Architecture

• TransactionTable: Handles sorting, formatting, and category editing
• TransactionFilters: Manages all filtering operations with real-time updates
• Analytics: Displays computed statistics and visual category breakdown

🔧 Development

Build for Production

npm run build

Preview Production Build

npm run preview

Type Checking

npm run check