Portfolio
Tracking Success
Persönlicher Metriken-Tracker — React, FastAPI, PostgreSQL. Card-Swipe-UI mit Streaks und Charts.
Herausforderung
Gewohnheiten aufzubauen erfordert konsequentes Tracking und sichtbaren Fortschritt. Bestehende Apps sind entweder zu komplex (fitness-fokussiert) oder zu simpel (nur Checkboxes) oder hässlich. Mit Tracking Success habe ich genau die App die ich brauche. Fokussiert und trotzdem flexibel. Neue Metriken können jederzeit einfach konfiguriert werden über das Frontend.
Ansatz
Full-Stack-TypeScript/Python-App mit einer Mobile-First-Card-Swipe-Oberfläche:
- Datenmodell — Flexibles
MetricConfig+MetricEntryunterstützt boolesche, Gleitkomma- und zeitbasierte Metriken mit konfigurierbaren Zielen. Eigene Metriken via YAML-Import/Export. - Backend — FastAPI mit async SQLAlchemy 2.0, PostgreSQL. Reine Berechnungsfunktionen (
compute_sleep,compute_fasting,compute_weight_loss) getrennt von der DB-Logik für Testbarkeit. JWT-Auth mit Passwort-Reset. Streak-Engine zählt rückwärts aufeinanderfolgende erfolgreiche Tage. - Frontend — React 18 + TypeScript + Tailwind. Mobile-First-Card-Swipe-UI mit Framer-Motion-Animationen. Erfolg/Fehlschlag-Animationen, Streak-Meilenstein-Feiern (3, 7, 14, 30, 60, 90, 183, 365 Tage). Liniendiagramme via Recharts mit 7T/30T/Gesamtzeit-Umschaltung.
- Infrastruktur — Docker Compose (Postgres + Backend + Frontend), Traefik, Let's Encrypt, Hetzner VPS.
Ergebnisse
- Vollständig deployedes Produktions-App, täglich genutzt
- 11 getrackte Metriken für Schlaf, Sport, Fasten, Gewicht, Stimmung, Fokus
- Streak-System mit Meilenstein-Animationen, die Konsistenz verstärken
- Mobile-optimierte Card-Swipe-Oberfläche für schnelle tägliche Eingabe
Tech Stack
- Backend: Python 3.12, FastAPI, SQLAlchemy 2.0 (async), PostgreSQL 16
- Frontend: React 18, TypeScript, Vite, Tailwind, Framer Motion, Recharts
- Infra: Docker Compose, Traefik, Hetzner Cloud, GitHub Actions