Zum Inhalt springen
Michael Zogot
← Alle ProjekteCase Study 01 · Eigenes Produkt · live

Abo-Manager Subscraby: alle laufenden Kosten auf einen Blick

RolleProdukt, Design, Architektur, Entwicklung, Betrieb
Zeitraum2026 · live · v1.7
StackNext.js, TypeScript, Supabase, PWA, Telegram
Kurz erklärt, von mir0:00 / 0:45
0:45
Key Visual von Subscraby: App-Symbol, Dashboard auf dem Laptop und Abo-Liste auf dem Smartphone

13

Releases seit März 2026

65+

Dienste im Katalog

6

Tabellen mit Row Level Security

1–14

Tage Vorlauf für Guthabenwarnungen

Ausgangslage

Abos verteilen sich auf Kreditkarten, Girokonten und Prepaid-Karten, manche zahlt man monatlich, manche einmal im Jahr, einige gehören nur zu einem bestimmten Projekt. Kontoauszüge zeigen das nicht im Zusammenhang, und die große Jahresrechnung kommt immer überraschend. Ich wollte ein Werkzeug, das genau diese Fragen beantwortet: Was zahle ich wirklich, wann, mit welcher Karte und wofür. Und zwar so gebaut, dass andere es auch nutzen können.

Lösung

Jedes Abo hat einen Preis, einen Zahlungsrhythmus und optional eine hinterlegte Karte. Daraus berechnet die App das nächste Zahlungsdatum und legt Zahlungseinträge per täglichem Job automatisch an. Einmalige Zahlungen werden nach der ersten Zahlung von selbst beendet, nutzungsabhängige Abos zeigen den Durchschnitt der tatsächlichen Zahlungen.

Alle Auswertungen trennen monatliche und jährliche Kosten und rechnen sie zur echten Belastung zusammen: nach Kategorie, nach Karte, im Kalender und als Prognose für die kommenden Monate. Abos lassen sich Projekten zuordnen, auch mehreren, damit Projektkosten aus den tatsächlichen Zahlungen sichtbar werden.

Datenschutz ist Architektur, keine Zusatzfunktion: keine Bankanbindung, keine Zahlungsabwicklung, jede Tabelle per Row Level Security pro Nutzer getrennt. Zeitgesteuerte Jobs laufen nur mit Secret, Nutzer können ihre Daten als CSV oder JSON exportieren und ihr Konto selbst löschen.

Die Oberfläche

Promovideo: Abo-Liste, Kosten nach Karte, Kalender, Kartenguthaben und Erinnerungen per Telegram · Promovideo mit echter Oberfläche · ohne Ton
Dashboard: monatliche und jährliche Belastung, Ausgaben nach Karte und Kategorie, Kostenprognose
Dashboard: monatliche und jährliche Belastung, Ausgaben nach Karte und Kategorie, Kostenprognose
Abo-Liste mit Summen für Monats- und Jahrespläne, Restlaufzeit bis zur nächsten Zahlung und zugeordneter Karte
Abo-Liste mit Summen für Monats- und Jahrespläne, Restlaufzeit bis zur nächsten Zahlung und zugeordneter Karte
Zahlungskalender: alle Abbuchungen eines Monats mit Tagessummen, filterbar nach Kategorie und Karte
Zahlungskalender: alle Abbuchungen eines Monats mit Tagessummen, filterbar nach Kategorie und Karte
Zahlungskarten mit Anteil an den Gesamtkosten, Guthaben und Warnung vor zu geringer Deckung
Zahlungskarten mit Anteil an den Gesamtkosten, Guthaben und Warnung vor zu geringer Deckung
Projektansicht: Werkzeuge eines Projekts mit laufenden und jährlichen Kosten
Projektansicht: Werkzeuge eines Projekts mit laufenden und jährlichen Kosten
Eigene Produkt-Website subscraby.app
Eigene Produkt-Website subscraby.app

Highlights

  1. 1
    Monat und Jahr getrenntMonatliche und jährliche Abos werden getrennt ausgewiesen und zur tatsächlichen Gesamtbelastung zusammengerechnet.
  2. 2
    KostenprognoseDie Hochrechnung zeigt Monate mit hohen Jahreszahlungen, lange bevor sie fällig werden.
  3. 3
    Karten und KontenJedes Abo hängt an einer hinterlegten Karte, als reine Information. Optional mit Guthaben und Warnung, wenn es nicht reicht.
  4. 4
    ProjektkostenAbos einem oder mehreren Projekten zuordnen und sehen, was ein Projekt laufend kostet.
  5. 5
    Erinnerungen per TelegramHinweis vor jeder Verlängerung, Wochen- und Monatsübersicht auf Befehl, Warnung bei knappem Kartenguthaben.
  6. 6
    Datenschutz by DesignKeine Zahlungsabwicklung, Daten pro Nutzer getrennt, Export als CSV oder JSON, Konto jederzeit selbst löschbar.

Tech-Stack

  • Next.js 16 (App Router), React 19, TypeScript
  • Supabase: Postgres mit Row Level Security, Auth mit E-Mail und Google
  • Tailwind CSS 4, Framer Motion, Recharts
  • Serwist (PWA mit Service Worker)
  • Vercel Cron, Telegram Bot API, React Email + Resend
Nächstes Projekt · 02Agentische CRM-Plattform mit kontrollierbarem KI-Assistenten
Weiter →