Spendie

A simple, cute budgeting app for splitting monthly income into categories.

Live demo: https://turtleduckiee.github.io/spendie/

Features

• Set monthly income
• Choose currency
• Add custom budget categories
• Edit category names and amounts
• Delete categories
• See allocated and remaining income
• Visual donut chart for budget allocation
• Category allocation percentages
• Over-budget indicator
• Fully allocated indicator
• Automatic local browser storage
• Reset budget
• Responsive layout

Supported currencies

• EUR — Euro
• USD — US Dollar
• SEK — Swedish Krona
• GBP — British Pound
• CNY — Chinese Yuan

Tech stack

• Svelte 5
• TypeScript
• Vite
• Tailwind CSS
• localStorage
• GitHub Pages

Getting started

Clone repository:

git clone https://github.com/YOUR_USERNAME/spendie.git
cd spendie

Install dependencies:

npm install

Start development server:

npm run dev

Open the local URL shown by Vite.

Build

Create production build:

npm run build

Preview production build locally:

npm run preview

Deploy to GitHub Pages

Project uses gh-pages to publish the Vite dist directory.

Deploy:

npm run deploy

npm run deploy automatically runs the predeploy script first, which builds the application.

Deployment flow:

npm run deploy
      ↓
npm run predeploy
      ↓
npm run build
      ↓
gh-pages -d dist
      ↓
gh-pages branch
      ↓
GitHub Pages

Make sure vite.config.ts contains the correct repository base path:

export default defineConfig({
  plugins: [svelte()],
  base: '/spendie/'
})

If repository name changes, update the base value accordingly.

Data storage

Spendie does not use a backend or database.

Budget data is stored locally in the browser using localStorage.

This means:

• Data stays on the device/browser where it was entered.
• Different browsers have separate budgets.
• Clearing browser storage removes saved budget data.
• No account or login is required.

Project structure

spendie/
├── src/
│   ├── lib/
│   │   └── components/
│   │       ├── CurrencySelect.svelte
│   │       ├── Input.svelte
│   │       └── MoneyInput.svelte
│   ├── App.svelte
│   └── ...
├── public/
├── package.json
├── vite.config.ts
└── README.md

License

This project is available under the MIT license.