Moneyflow

Track your money flow - personal finance app with beautiful charts and insights. Built with SvelteKit 2, Svelte 5, and Drizzle ORM.

Features

📊 Dashboard

• Overview of financial health with stats cards
• Monthly income vs expense trend chart
• Spending breakdown by category
• Recent transactions list

💰 Transactions

• Create, edit, and delete transactions
• Filter by date range, type, category, and account
• Quick transaction from sidebar (accessible anywhere)
• Income and expense tracking

📁 Categories

• Custom categories with icons and colors
• Separate income and expense categories
• Icon picker with Lucide icons

🏦 Accounts

• Multiple account support (Bank, Cash, E-Wallet, etc.)
• Account balance tracking
• Multi-currency ready

📈 Budget

• Monthly budget per category
• Progress tracking with visual indicators
• Copy budgets from previous month
• Budget vs actual spending comparison

📋 Reports

• Period selection (This Month, Last Month, 3/6 Months, Year)
• Income vs Expense summary with savings rate
• Monthly trend chart
• Category breakdown with percentages

🎨 UI/UX

• Dark/Light/System theme toggle
• Responsive sidebar navigation
• Toast notifications
• Modern UI with shadcn-svelte components

Tech Stack

• Framework: SvelteKit with Svelte 5 (Runes)
• Styling: Tailwind CSS v4
• UI Components: shadcn-svelte + Bits UI
• Charts: LayerChart + D3
• Database: PostgreSQL with Drizzle ORM
• Forms: Superforms + Zod validation
• Icons: Lucide

Getting Started

Prerequisites

• Bun (recommended) or Node.js 20+

Installation

1. Clone the repository:

git clone https://github.com/yourusername/svelte-finance.git
cd svelte-finance

2. Install dependencies:

bun install

3. Start PostgreSQL database:

bun run db:start

4. Push database schema:

bun run db:push

5. Start development server:

bun run dev

6. Open http://localhost:5173

Scripts

Project Structure

src/
├── lib/
│   ├── components/       # Shared components
│   │   ├── ui/          # shadcn-svelte components
│   │   └── ...          # App components (sidebar, nav, etc.)
│   ├── features/        # Feature modules
│   │   ├── accounts/    # Account management
│   │   ├── budget/      # Budget tracking
│   │   ├── categories/  # Category management
│   │   ├── dashboard/   # Dashboard widgets
│   │   ├── reports/     # Financial reports
│   │   └── transactions/# Transaction CRUD
│   ├── server/          # Server-only code
│   │   └── db/          # Database schema & connection
│   └── utils/           # Utility functions
├── routes/              # SvelteKit routes
│   ├── accounts/
│   ├── budget/
│   ├── categories/
│   ├── dashboard/
│   ├── reports/
│   └── transactions/
└── drizzle/             # Database migrations

Environment Variables

Create a .env file in the root directory:

DATABASE_URL=postgres://postgres:postgres@localhost:5432/finance

License

MIT