minus – Vibe Coded Ausgabentracker

Eine deutschsprachige Web-App zum manuellen Erfassen, Sortieren und Auswerten von Ausgaben. Die App läuft mit TanStack Start, React, Tailwind CSS und Supabase.

Funktionen

• Konto erstellen und anmelden per E-Mail/Passwort oder Google OAuth.
• Ausgaben mit Betrag, Datum, Kategorie, Notiz und Typ erfassen.
• Fixkosten und variable Ausgaben getrennt ausweisen.
• Monatlich wiederkehrende Ausgaben automatisch in den aktuellen Monat übernehmen.
• Kategorien mit eigenen Farben anlegen, bearbeiten und löschen.
• Monatsübersicht mit Gesamtsumme, Fixkosten und variablen Ausgaben.
• Analyseansicht mit Kategorien-Diagramm, Vormonatsvergleich und Fixkosten-Filter.
• Impressum, Datenschutz, PWA-Manifest und Sicherheitsheader sind vorbereitet.

Tech-Stack

• React 19
• TanStack Start / TanStack Router
• TanStack Query
• Tailwind CSS 4
• Supabase Auth und Postgres
• Recharts
• Vite / Nitro mit Vercel-Preset

Voraussetzungen

• Node.js 22 oder neuer
• npm
• Ein Supabase-Projekt
• Optional: Supabase CLI, wenn du die Migrationen lokal oder per CLI einspielen möchtest
• Optional: Docker, wenn du ohne lokale Node-Installation entwickeln möchtest

Installation

npm install
cp .env.example .env
npm run dev

Danach läuft die App lokal unter:

http://localhost:3000

Unter Windows PowerShell kannst du die Env-Datei so kopieren:

Copy-Item .env.example .env

Umgebungsvariablen

Die App braucht Supabase-Werte für Server- und Client-Code. Kopiere .env.example nach .env und trage die Werte deines eigenen Supabase-Projekts ein.

SUPABASE_URL="https://<project-ref>.supabase.co"
SUPABASE_PUBLISHABLE_KEY="<anon-publishable-key>"

VITE_SUPABASE_URL="https://<project-ref>.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="<anon-publishable-key>"

Die SUPABASE_* Variablen werden serverseitig verwendet. Die VITE_SUPABASE_* Variablen werden in den Browser-Build eingebettet und müssen deshalb identisch gesetzt sein.

Wichtig: Verwende hier nur den Supabase anon beziehungsweise publishable Key. Ein service_role Key gehört nicht in den Browser und wird von dieser App aktuell nicht benötigt.

Impressum Und Datenschutz (LEGAL_*)

Die Anbieterdaten für /impressum und /datenschutz stehen nicht im Quellcode, sondern in acht Umgebungsvariablen:

LEGAL_NAME="<Vor- und Nachname>"
LEGAL_COMPANY="<Firmenname>"
LEGAL_STREET="<Straße und Hausnummer>"
LEGAL_ZIP="<PLZ>"
LEGAL_CITY="<Ort>"
LEGAL_COUNTRY="<Land>"
LEGAL_EMAIL="<kontakt@example.com>"
LEGAL_PHONE="<+49 000 0000000>"

Gelesen werden sie ausschließlich serverseitig in src/lib/legal.functions.ts (getLegalEntity) und über den Route-Loader in die Seiten gereicht. Deshalb kein VITE_ Prefix: VITE_* Variablen würde Vite als Klartext in das Browser-Bundle einbetten. Auf der ausgelieferten Seite sind die Werte selbstverständlich sichtbar – ein Impressum ist öffentlich. Der Zweck ist allein, dass Anschrift und Telefonnummer nicht im öffentlichen Repository und in dessen Git-Historie stehen.

Für das Deployment müssen die acht Variablen in Vercel unter Project Settings > Environment Variables gesetzt werden (Production, Preview und Development).

Hinweis für frische Clones: Solange die Variablen nicht gesetzt sind, zeigen Impressum und Datenschutz sichtbare Platzhalter wie «LEGAL_NAME fehlt» statt echter Daten. Das ist bewusst so gebaut – ein Impressum ist nach § 5 DDG Pflicht, und eine leere Zeile würde unbemerkt bleiben. Trage vor einem eigenen Deployment deine eigenen Anbieterdaten ein.

Supabase Einrichten

1. Erstelle ein neues Projekt in Supabase.
2. Öffne Project Settings > Data API beziehungsweise API Keys.
3. Kopiere die Project URL nach SUPABASE_URL und VITE_SUPABASE_URL.
4. Kopiere den anon/publishable Key nach SUPABASE_PUBLISHABLE_KEY und VITE_SUPABASE_PUBLISHABLE_KEY.
5. Spiele die SQL-Dateien aus supabase/migrations in Reihenfolge ein.
6. Aktiviere in Supabase Auth die gewünschten Login-Methoden.
7. Für Google Login: Google Provider in Supabase konfigurieren und Redirect-URLs setzen.

Die Datenbank nutzt Row Level Security. Kategorien, Transaktionen und Profile sind an den eingeloggten Nutzer gebunden. Beim Registrieren wird automatisch ein Profil erstellt und es werden Standardkategorien wie Wohnen, Lebensmittel, Transport, Freizeit, Abos und Sonstiges angelegt.

Migrationen Per Supabase CLI

Wenn dein Supabase-Projekt mit der CLI verbunden ist:

npx supabase link --project-ref <project-ref>
npx supabase db push

Alternativ kannst du die SQL-Dateien aus supabase/migrations im Supabase SQL Editor nacheinander ausführen.

Google OAuth

Für die Google-Anmeldung brauchst du in Supabase unter Authentication > Providers > Google eine Google Client ID und ein Google Client Secret.

Setze außerdem passende Redirect-URLs, zum Beispiel:

http://localhost:3000/auth/callback
https://deine-domain.de/auth/callback

Docker Entwicklung

Ohne lokale Node-Installation kannst du die App mit einem offiziellen Node-Container starten.

Eingabeaufforderung:

docker run --rm -it -p 3000:3000 -v "%cd%:/app" -w /app node:22-bookworm sh -c "npm ci && npm run dev -- --host 0.0.0.0"

PowerShell:

docker run --rm -it -p 3000:3000 -v "${PWD}:/app" -w /app node:22-bookworm sh -c "npm ci && npm run dev -- --host 0.0.0.0"

Die .env muss vorher im Projektordner liegen.

Build Und Vorschau

npm run build
npm run preview

Der Produktionsbuild erzeugt Vercel-kompatible Artefakte unter .vercel/output.

Deployment

Das Projekt ist aktuell auf Vercel ausgelegt. In Vercel müssen dieselben Umgebungsvariablen aus .env.example unter Project Settings > Environment Variables gesetzt werden.

Empfohlene Build-Einstellungen:

Install Command: npm ci
Build Command: npm run build
Output: .vercel/output

Sicherheit

• .env, .env.*, .vercel, node_modules und Build-Ordner sind in .gitignore ausgeschlossen.
• Committe niemals echte Supabase Secrets, Google OAuth Secrets oder Service-Role-Keys.
• Der Supabase service_role Key wird nicht benötigt. Falls du ihn später verwendest, darf er nur serverseitig und niemals mit VITE_ Prefix gesetzt werden.
• Die App nutzt Supabase RLS, damit Nutzer nur ihre eigenen Daten lesen und verändern können.

Nützliche Befehle

npm run dev
npm run build
npm run preview
npm run lint
npm run format

Hinweis: Der aktuelle Lint-Befehl kann Formatfehler melden, wenn der Code nicht mit Prettier formatiert wurde.