Nur ich
Axis
SET
Meizo
Kategorie
Eigene Lernprojekte.
Hier lerne ich, wirklich selbst zu programmieren. Die ersten vier Übungen sind ganz ohne KI entstanden; bei LeadFlow ist nur das schlichte CSS mit KI entstanden — der Fokus lag auf meiner Programmierlogik.
Übung · Ohne KI
To-Do-Liste
Meine erste eigene App — reines HTML, CSS und JavaScript, komplett selbst geschrieben, ganz ohne KI.
HTML · CSS · JavaScript Erstes Projekt
Übung · Ohne KI
Notizen
Notizen-App mit React (useState, Vite) — Notizen hinzufügen und löschen, komplett selbst geschrieben, ganz ohne KI.
React · Vite Zweites Projekt
Übung · Ohne KI
MoviePicker
Filmsuche mit React (useState, Vite) — Live-Suche gegen die OMDb-API, Ergebnisse anklicken für Details, komplett selbst geschrieben, ganz ohne KI.
React · Vite · OMDb API Drittes Projekt
Übung · Ohne KI
Wetter App
Wetter-App mit React (useState, useEffect, Vite) — Stadt eingeben, aktuelles Wetter über die OpenWeatherMap-API abrufen, komplett selbst geschrieben, ganz ohne KI.
React · Vite · OpenWeatherMap API Viertes Projekt
Eigenes Projekt · CSS mit KI
LeadFlow
Kleines Lead-Management mit React und TypeScript: Leads anlegen, suchen, bearbeiten und löschen. Das CSS ist bewusst schlicht und mit KI entstanden — mein Fokus lag auf der Programmierlogik.
React · TypeScript · Vite Programmierung im Fokus
Kategorie
Mit KI gebaut.
Ich designe, skizziere und treffe die Entscheidungen — gebaut haben sie Claude und ich gemeinsam.
Projekte
Drei Probleme, die ich mir selbst gelöst habe.
Kein Auftrag, kein Kunde — jedes dieser Projekte ist entstanden, weil ich für ein eigenes Problem nichts Passendes gefunden habe. Hier die ausführliche Version mit Ausgangslage, Entscheidungen, Tech-Stack und einer Demo zum Ausprobieren.
01 · Finance
Axis
Ein privates Finance-Cockpit mit echter Bank-Anbindung und einem KI-Assistenten, der mitschreibt.

Ausgangslage

Ich wollte ausprobieren, ob sich Kontostand, laufende Abos, offene Rechnungen und Raten sinnvoll an einem Ort verbinden lassen, statt über eine Banking-App, Gmail und eine Excel-Tabelle verteilt zu sein.

Lösung

Eine private PWA für mich und meine Familie: echte Kontoanbindung über Enable Banking (Open Banking/PSD2, mehrere Banken und Fintechs gleichzeitig), automatisches Mitlesen von Rechnungsmails in Gmail, und ein KI-Assistent mit Function-Calling, der Buchungen nicht nur anzeigt, sondern auch anlegt, kategorisiert und bei Unsicherheit gezielt nachfragt — die Antwort merkt er sich dauerhaft pro Empfänger.

Echte Kontoanbindung über Enable Banking, mehrere Banken/Fintechs gleichzeitig

Gmail-Sync liest Rechnungs- und Kaufbestätigungsmails automatisch aus

KI-Assistent mit Function-Calling: legt Buchungen und Debts selbst an, ändert und verschiebt sie

Beleg-Fotos werden direkt im Chat ausgelesen und automatisch eingetragen

Automatische Abo-Erkennung, mit expliziter Rückfrage bei Unsicherheit (z. B. Klarna/PayPal)

Drei Debt-Kategorien: Abos, Rechnungen mit freien Tags, Raten mit Fortschritts-Gauge

Proaktive Hinweise im Chat: Preiserhöhungen, fällige Rechnungen, ungewöhnliche Ausgaben

Täglicher Cron-Sync für Bank und Gmail, keine manuelle Aktualisierung nötig

Installierbare PWA, Verbindungen jederzeit trennbar in den Einstellungen

Next.js Supabase (Postgres + Auth) Google Gemini Enable Banking (PSD2) Gmail API Progressive Web App
Axis Home
HomeEchter Kontostand, Konten & Boxes, Transaktionen im Blick.
Axis Debts
DebtsAbos, Rechnungen und Raten mit Fortschritts-Gauge.
Axis Chat
ChatKI-Assistent mit Function-Calling, liest auch Belegfotos.
Axis Settings
SettingsBank & Gmail verbinden, trennen, Einkommen setzen.

Screenshots mit frei erfundenen Kontoständen, Namen und Beträgen — keine echten Finanzdaten. Privates Tool für mich und meine Familie, kein öffentlicher Zugang.

02 · Fitness
SET
Ein Trainings-Tracker ohne Ballast — als installierbare App.

Ausgangslage

Ich wollte mein Training nach Splits loggen können — Push/Pull/Legs, eigene Übungen, Sätze mit Gewicht und Wiederholungen — und dabei sauber sehen, ob ich mich von Woche zu Woche steigere.

Lösung

Eine eigene Progressive Web App — installierbar auf dem Homescreen, offlinefähig über einen Service Worker, ohne App-Store-Umweg. Splits und Übungen sind frei konfigurierbar, jeder Satz wird beim Eintippen automatisch (debounced) gespeichert. Auswertung läuft komplett über selbst gezeichnete Canvas-Charts statt einer externen Chart-Bibliothek.

Splits & Übungen frei anlegen, inkl. Bodyweight-Übungen

Satz-Logging mit Gewicht/Wiederholungen, "letztes Training übernehmen"

Volumen-Trend & persönliche Rekorde pro Übung

Streak-Heatmap der letzten vier Trainingswochen

Kalorien- & Makro-Tracking, Mahlzeiten per KI-Freitext geschätzt ("4 Eier mit Ketchup" → automatisch kcal)

Körpergewicht-Verlauf mit 30-Tage-Trend

Vanilla JavaScript Supabase (Postgres + Auth) Canvas API Progressive Web App
TrainingSätze mit Gewicht & Wiederholungen loggen.
DashboardFortschritt, Rekorde und Trainingstage im Blick.
ErnährungMahlzeit per KI-Freitext schätzen lassen.
GewichtKörpergewicht eintragen, Trend verfolgen.
Aufgenommen direkt in der App — kein gestelltes Mockup.
03 · Operations
Meizo
Eine SaaS-Plattform für Einsatzplanung, Zeiterfassung und Abrechnung im Reinigungs-Business.

Ausgangslage

Reinigungs-Betriebe brauchen Einsatzplanung, Zeiterfassung mit Nachweis und eine saubere Lohnabrechnung. Ich wollte eine Software bauen, die das für ein kleines Team abdeckt — inklusive echter DATEV-Anbindung.

Lösung

Eine mandantenfähige SaaS-Plattform mit vier Oberflächen in einem System: Dashboard für den Inhaber, eigene App für die Mitarbeiter, ein Kunden-Portal ohne Login und Verwaltung für den Plattform-Betreiber. Mit Stripe-Abrechnung und automatischem Seat-Sync, ausgelegt auf mehrere Firmen gleichzeitig.

Live-Dashboard: Mitarbeiter, Einsätze und Krankmeldungen auf einen Blick

Einsatzplanung per Drag & Drop, automatischer Ersatz-Dispatch bei Krankmeldung

Zeiterfassung mit GPS & Foto — funktioniert auch offline

Echter DATEV-Export: Soll-Ist-Stunden, Bewegungsdaten, PDF & CSV

Kunden-Portal ohne Login: Nachweise, Checkliste, nächster Termin

Mitarbeiter-App in 7 Sprachen mit Push-Benachrichtigungen

Controlling: Umsatz, Kosten und Marge pro Objekt

Plattform-Admin für mehrere Firmen gleichzeitig

Stripe-Abrechnung mit automatischem Seat-Sync, installierbare PWA

React · Vite TypeScript Supabase (Postgres, Auth, Edge Functions) Stripe Progressive Web App
EinsätzeDashboard mit Live-Übersicht über Mitarbeiter und geplante Einsätze.
KrankmeldungAutomatischer Ersatz-Dispatch — freien Mitarbeiter finden und zuweisen.
ZeiterfassungEin- und Auschecken per GPS in der Mitarbeiter-App.
AbrechnungFertiger CSV-Export mit GPS-verifizierten Stunden für DATEV.

Aufnahmen aus der echten Anwendung — Dashboard, Krankmeldung-Dispatch, Mitarbeiter-App und Abrechnung.

Kontakt
← Zurück zur Startseite
Außerdem
Zwei weitere Experimente, aus der Haupt-Auswahl raus, aber noch da.
02 · Sales
meizoCRM
Ein internes CRM für Kaltakquise-Workflows.

Ausgangslage

Für Kaltakquise per Telefon braucht man einen sehr konkreten Workflow: Leads importieren, anrufen, Status setzen, Wiedervorlagen nicht vergessen. Ich wollte ein CRM bauen, das genau darauf zugeschnitten ist, statt eine allgemeine Lösung anzupassen.

Lösung

Ein internes CRM, exakt auf diesen Ablauf zugeschnitten. Leads lassen sich per CSV importieren (mit Duplikatserkennung), die Pipeline ist ein Kanban-Board mit frei konfigurierbaren, farbcodierten Status-Spalten. Zugriff ist rollenbasiert zwischen Setter und Admin getrennt, abgesichert über eine eigene Session-Middleware.

Kanban-Pipeline mit Drag & Drop, auch touch-fähig

Frei konfigurierbare Status-Spalten mit eigenen Farben

Wiedervorlage-System für fällige Rückrufe

CSV-Import mit automatischer Duplikatserkennung

Rollenbasierter Zugriff: Setter vs. Admin

Dialer mit Warteschlangen-Modi, Tagesziel & Streak-Gamification

Team-Dashboard mit Leaderboard, Conversion & Anrufzeiten-Analyse

E-Mail-Composer mit Live-Vorschau und direktem Gmail-Versand

Admin-Bereich: Nutzerverwaltung, Listen-Import, Aktivitätslog

Next.js (App Router) TypeScript Neon · Serverless Postgres Cookie-Session-Middleware
Klicken zum Interagieren

Vollständiger Nachbau mit Demo-Daten, keine Aufnahmen — jede Seite lässt sich frei durchklicken: Dashboard, Leads, Kanban, Dialer, E-Mails und Admin-Panel (Login oben als Setter oder Admin). Kein Backend, keine echten Kundendaten — Änderungen verschwinden beim Neuladen.

04 · Musik
MOL
Ein eigenes, minimales Interface für Spotify.

Ausgangslage

Ich höre Musik meistens sehr gezielt — suchen, abspielen, weiter. Ich wollte eine Oberfläche bauen, die nur das kann: Suche, Playlists, Player-Steuerung, ohne alles drumherum.

Lösung

Ein reines Frontend, das direkt gegen die Spotify Web API und das Web Playback SDK spricht. Anmeldung läuft über den OAuth-Authorization-Code-Flow mit PKCE — dadurch ist kein eigenes Backend und kein Client Secret nötig, der Login bleibt trotzdem sicher.

Sicherer Login per PKCE, ganz ohne eigenen Server

Songsuche direkt über die Spotify-API

Personalisierte Startseite: "Zuletzt gehört", Alben & Playlists

Vollflächiger Player: Cover, Fortschritt, Shuffle & Repeat

Mini-Player bleibt beim Weiterstöbern aktiv

Kein zusätzlicher Client — läuft komplett im Browser

Vanilla JavaScript Spotify Web API Spotify Web Playback SDK OAuth 2.0 · PKCE

Zum Testen der Live-Demo ist ein Spotify-Premium-Account nötig (Voraussetzung des Web Playback SDK). Ohne Premium zeigt das Video unten die volle Funktionalität mit echtem Ton.

Kompletter DurchlaufZuletzt gehört → suchen → abspielen mit echtem Ton, Mini-Player bleibt beim Durchblättern eines Albums aktiv.
Aufgenommen direkt in der App, mit Ton — kein gestelltes Mockup.