Expense Tracker

A simple app for logging your expenses. You add what you spent, and the app keeps a running list you can browse, edit, and delete. To save typing, you can snap a photo of a receipt and the app fills in the amount, shop name, date, and category for you.

It runs in a web browser and also as a phone app (built with Ionic and Capacitor). Your data is stored on your own device using SQLite, so nothing is sent to a server just to save an expense.

What it does

• Add an expense with an amount, merchant, category, date, and an optional note.
• See all your expenses in one list, newest first.
• Tap an expense to view it, then edit or delete it.
• Take a photo of a receipt to auto-fill the details (see "Receipt scanning" below).

Receipt scanning

When you add a photo, the app sends it to Google's Gemini service, which reads the receipt and returns the total, the shop name, the date, and a best-guess category. This is the one feature that talks to the internet.

To use it you need a free Gemini API key from Google AI Studio. Create a file at src/environments/secrets.ts with your key:

export const secrets = {
  geminiApiKey: 'your-key-here',
};

This file is deliberately kept out of version control so your key stays private. If you skip this step, everything else in the app still works; only receipt auto-fill is disabled.

Running it

You need Node.js installed. Then, from the project folder:

npm install     # install dependencies (first time only)
npm start       # run the app in your browser at http://localhost:4200

Other useful commands:

npm run build   # create a production build in the www/ folder
npm run lint    # check the code for style issues

How it's built

• Ionic + Angular for the screens and navigation.
• Capacitor to package the same code as a real iOS/Android app.
• SQLite (on-device) to store expenses. On the web it lives in the browser's storage; on a phone it uses the device's own database.
• Google Gemini for reading receipt photos.

The main pieces of code live in src/app:

• home/: the list of all expenses.
• add-expense/: the form for adding or editing an expense.
• expense-detail/: the single-expense view.
• services/database.ts: reads and writes expenses to SQLite.
• services/ocr.ts: sends receipt photos to Gemini and reads back the details.
• models/expense.ts: the shape of one expense.

One detail worth knowing: amounts are shown in euros and stored as whole numbers of cents (so €12.34 is saved as 1234) to avoid rounding problems with decimals.