Tracking Success

Challenge

Building healthy habits requires consistent tracking and visible progress. Existing apps are either too complex (fitness-focused), too simple (checkbox-only) or just ugly. With Tracking Success, I built exactly the app I need. Focused yet flexible. New metrics can be configured anytime via the frontend.

Approach

Full-stack TypeScript/Python app with a mobile-first card-swipe interface:

1. Data Model — Flexible MetricConfig + MetricEntry supports boolean, float, and time-based metrics with configurable goals. Custom metrics via YAML import/export.
2. Backend — FastAPI with async SQLAlchemy 2.0, PostgreSQL. Pure calculation functions (compute_sleep, compute_fasting, compute_weight_loss) separated from DB logic for testability. JWT auth with password reset. Streak engine walks backwards counting consecutive successful days.
3. Frontend — React 18 + TypeScript + Tailwind. Mobile-first card-swipe UI with framer-motion animations. Success/failure animations, streak milestone celebrations (3, 7, 14, 30, 60, 90, 183, 365 days). Line charts via Recharts with 7d/30d/all-time toggle.
4. Infrastructure — Docker Compose (Postgres + Backend + Frontend), Traefik, Let's Encrypt, Hetzner VPS.

Results

• Fully deployed production app, used daily
• 11 tracked metrics covering sleep, exercise, fasting, weight, mood, focus
• Streak system with milestone animations reinforcing consistency
• Mobile-optimized card-swipe interface for quick daily input

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