Macro Tracker (Full Stack)

Ein ganzheitlicher Macro-Tracker mit KI-unterstützter Bilderkennung für Nährwerte. 100% Vibecoded - ich hatte keine Lust für nen "Premium" Dienst zu zahlen, vor allem weil Google Gemini sehr gnädige Rate Limits hat.

Desktop Ansicht

Mobile Ansicht

Kamera-Overlay (Mobile)

Backend: Express + TypeScript + Prisma (SQLite) + Google Gemini API (Extraktion aus Lebensmittel-Fotos) Frontend: React + Vite + (Utility-Klassen) + Mobile Kamera UI

Tageslogik: "Heute" = alle Einträge seit lokalem Mitternacht (kein Cron nötig).

Inhaltsverzeichnis

1. Features
2. Architektur / Struktur
3. Schnellstart (Dev)
4. Umgebung & Konfiguration
5. API Endpunkte (Kurzüberblick)
6. Deployment (Produktiv, PM2 + Cloudflare Tunnel (optional))
7. Sicherheitshinweise
8. Lizenz

1. Features

• Manuelle Eingabe von Lebensmitteln (Protein, Kohlenhydrate, Fett, optional Kalorien)
• Automatische Kalorienberechnung (4/4/9-Regel) falls nicht angegeben
• Fotoanalyse (multipart Upload) → KI (Gemini) extrahiert geschätzte Makros
• Tagesübersicht mit Summen & Ziel-Prozentanzeige (Übererfüllung farblich markiert)
• Mobile Kamera UI (nur auf mobilen Geräten sichtbar)
• Konfigurierbare Ziele (Protein / Carbs / Fat / Calories)
• Leichtgewichtige Architektur (kein Auth bisher, Fokus auf Single-User / Demo)

2. Struktur

backend/    Express API + Prisma Schema
frontend/   React Single Page App (Vite)
setup.sh    Automatisiertes Deployment / Build & PM2 Start

3. Schnellstart (Entwicklung)

Voraussetzungen: Node.js >= 18, npm.

Backend Dev:

cd backend
cp .env.example .env   # GEMINI_API_KEY setzen
npm install
npx prisma migrate dev --name init
npm run dev

Frontend Dev (separates Terminal):

cd frontend
cp .env.example .env   # oder VITE_API_URL anpassen
npm install
npm run dev

Standard-Dev-Ports (Vite): Ausgabe in der Konsole (z.B. http://localhost:5173). API Default-Port kann per PORT in backend/.env überschrieben werden (Fallback in Code: 28992).

4. Umgebung & Konfiguration

Wichtige Variablen:

backend/.env:
	GEMINI_API_KEY=...   # Erforderlich für Fotoanalyse
	DATABASE_URL=file:./dev.db
	PORT=28992           # Production / Setup Script nutzt 28992

frontend/.env:
	VITE_API_URL=https://<dein-api-host>/api

Wenn VITE_API_URL fehlt → Fallback auf http://localhost:28992/api.

5. API Endpunkte (Kurz)

GET    /api/entries/today          # Heutige Einträge + Totals + Goal
POST   /api/entries/manual         # { name, protein, carbs, fat, calories? }
POST   /api/entries/image          # multipart: image
DELETE /api/entries/:id            # Löscht Eintrag
GET    /api/goals/:userId          # Zielwerte
POST   /api/goals/upsert           # Ziel erstellen/aktualisieren
POST   /api/estimate               # BMR / Kalorien-Schätzung basierend auf Eingaben
GET    /api/users                  # User-Liste

Kalorienberechnung: Nicht angegeben → protein*4 + carbs*4 + fat*9.

6. Deployment (Produktiv)

Automatisiert via setup.sh (PM2 + Build). Nutzt Ports 28992 (API) & 28993 (Web).

./setup.sh

Script erledigt:

1. Prüft Node Version & installiert pm2 (falls nötig)
2. Legt fehlende .env Dateien an (überschreibt NICHT bestehende)
3. Installiert Dependencies (backend + frontend)
4. Prisma Generate & Migrations (deploy)
5. Build (backend + frontend)
6. Start mit PM2:
   • macro-api → backend/dist/index.js (PORT=28992)
   • macro-web → pm2 serve frontend/dist 28993 --spa

Logs ansehen:

pm2 logs macro-api
pm2 logs macro-web

Neustart / Status:

pm2 restart macro-api
pm2 restart macro-web
pm2 ls

Cloudflare Tunnel (Beispiel)

cloudflared tunnel --url http://localhost:28993   # Frontend
cloudflared tunnel --url http://localhost:28992   # API

Subdomains kannst du im Cloudflare Dashboard mappen.

Benutzerverwaltung (Entwicklung)

Da es keine UI für die Benutzerverwaltung gibt, ist der einfachste Weg, Benutzer direkt in der Datenbank mit Prisma Studio zu verwalten.

1. Prisma Studio starten: Führe im backend Verzeichnis folgenden Befehl aus:

   npx prisma studio

2. Browser öffnen: Prisma Studio wird automatisch in deinem Browser geöffnet.
3. Benutzer verwalten: Im Studio kannst du das User Modell auswählen, um:
   • Neue Benutzer hinzuzufügen (Add record).
   • Bestehende Benutzer zu bearbeiten (z.B. den Namen ändern).
   • Benutzer zu löschen.

Jeder Benutzer benötigt einen eindeutigen Namen. Die ID wird automatisch generiert.

7. Sicherheit

• GEMINI_API_KEY NIEMALS im Frontend exponieren
• Keine Auth implementiert → Production nur hinter geschütztem Zugang / Single-User nutzen
• Eingaben werden serverseitig validiert (Zod) – trotzdem Basic Hardening (Rate Limits, Auth) für echtes Public Deployment ergänzen

8. Lizenz

Siehe LICENSE (MIT).

---

Beiträge / Issues willkommen. Viel Spaß beim Tracken!