🏋️‍♂️ Fitness Tracker - Julius & Philipp

Ein moderner deutscher Fitness Tracker mit Fortschrittsverfolgung und Visualisierung. Gebaut mit TypeScript, Node.js, React und Chart.js.

🌟 Features

📊 Dashboard

• Übersicht über alle Trainingsaktivitäten
• Statistiken zu Trainingseinheiten, Übungen und Wiederholungen
• Letzte Trainingseinheiten auf einen Blick
• Detaillierte Übungsstatistiken

➕ Training hinzufügen

• Benutzerfreundliches Formular für neue Trainingseinheiten
• Auswahl aus vorgefertigten Übungen
• Eingabe von Sätzen, Wiederholungen und Gewicht
• Notizen für zusätzliche Informationen
• Live-Vorschau der eingegebenen Daten

📝 Trainingseinheiten verwalten

• Vollständige Liste aller Trainings
• Filterung nach Übung
• Sortierung nach Datum, Übung oder Wiederholungen
• Gruppierung nach Trainingsdatum
• Detaillierte Trainingsansicht mit Metriken

📈 Fortschrittscharts

• Interaktive Diagramme mit Chart.js
• Wiederholungen über die Zeit verfolgen
• Gewichtsentwicklung visualisieren
• Kombinierte Darstellungen für umfassende Analyse
• Statistiken und Zusammenfassungen

🎯 Unterstützte Übungen

• Brustpresse - Krafttraining für die Brustmuskulatur
• Lat-Zug - Krafttraining für den breiten Rückenmuskel
• Bizeps-Curl - Krafttraining für den Bizeps
• Trizeps-Push Backs - Krafttraining für den Trizeps
• Schulterdrücken - Krafttraining für die Schultern
• Beinpresse - Krafttraining für die Oberschenkel
• Kniebeugen - Krafttraining für Beine und Gesäß

🛠️ Technologie Stack

Backend

• Node.js mit Express.js
• TypeScript für Typsicherheit
• SQLite Datenbank für lokale Speicherung
• CORS für Cross-Origin Requests

Frontend

• React 18 mit TypeScript
• Vite als Build-Tool und Entwicklungsserver
• Chart.js mit react-chartjs-2 für Diagramme
• Lucide React für moderne Icons

Development

• Concurrently für parallele Entwicklung
• Nodemon für automatische Server-Neustarts
• ts-node für TypeScript Ausführung

🚀 Installation und Setup

Voraussetzungen

• Node.js >= 18.0.0
• npm oder yarn

1. Repository klonen

git clone <repository-url>
cd fitness-tracker-de

2. Abhängigkeiten installieren

npm install

3. Entwicklungsserver starten

npm run dev

Dies startet:

• Backend Server auf Port 5000
• Frontend Development Server auf Port 3000
• Automatische Neustarts bei Änderungen

4. Anwendung öffnen

Öffne deinen Browser und gehe zu http://localhost:3000

📝 Verfügbare Scripts

# Development - startet Backend und Frontend gleichzeitig
npm run dev

# Nur Backend starten
npm run dev:server

# Nur Frontend starten
npm run dev:client

# Produktion Build erstellen
npm run build

# Produktion Server starten (nach Build)
npm start

# Frontend Preview nach Build
npm run preview

🗄️ Datenbank

Die Anwendung verwendet SQLite für lokale Datenspeicherung. Die Datenbank wird automatisch initialisiert mit:

Tabellen

• users - Benutzerinformationen (Julius, Philipp)
• exercises - Verfügbare Übungen mit Muskelgruppen
• training_sessions - Alle Trainingseinheiten mit Details

Sample Data

Beim ersten Start werden automatisch Sample-Daten für beide Benutzer erstellt.

🎨 Design

Moderne UI/UX

• Glasmorphism Design mit transparenten Elementen
• Gradiente Farbschemen in Blau und Lila
• Smooth Animationen und Hover-Effekte
• Responsive Design für alle Bildschirmgrößen
• Deutsche Benutzeroberfläche

Layout

• Sidebar Navigation mit Benutzerauswahl
• Tab-basierte Hauptnavigation
• Card-basierte Inhaltsdarstellung
• Grid-Layouts für optimale Platzausnutzung

📱 Responsive Design

Die Anwendung ist vollständig responsive und optimiert für:

• Desktop (1024px+)
• Tablet (768px - 1024px)
• Mobile (320px - 768px)

🔧 API Endpoints

Users

• GET /api/users - Alle Benutzer abrufen
• GET /api/health - API Health Check

Exercises

• GET /api/exercises - Alle Übungen abrufen

Training Sessions

• GET /api/sessions - Alle Trainingseinheiten
• GET /api/sessions/user/:userId - Einheiten eines Benutzers
• POST /api/sessions - Neue Trainingseinheit hinzufügen

Progress

• GET /api/progress/:userId/:exerciseId - Fortschrittsdaten für eine Übung

👥 Benutzer

Julius

• Benutzer-ID: 1
• Avatar: 🧑‍💼
• Sample-Trainingseinheiten vorinstalliert

Philipp

• Benutzer-ID: 2
• Avatar: 👨‍💻
• Sample-Trainingseinheiten vorinstalliert

🔮 Zukünftige Features

• Weitere Übungen hinzufügen
• Trainingsplan-Funktionalität
• Export/Import von Daten
• Kalender-Integration
• Moblie App
• Social Features
• Foto-Upload für Übungen
• Statistik-Dashboard erweitern

🐛 Fehlerbehebung

Häufige Probleme

Port bereits belegt:

# Windows
netstat -ano | findstr :5000
taskkill /PID <PID> /F

# macOS/Linux
lsof -ti:5000 | xargs kill

Datenbank zurücksetzen:

# Lösche fitness_tracker.db und starte den Server neu
rm fitness_tracker.db
npm run dev:server

Dependencies Probleme:

# Cache leeren und neu installieren
rm -rf node_modules package-lock.json
npm install

📄 Lizenz

MIT License - Siehe LICENSE Datei für Details.

👨‍💻 Entwickelt für

Julius & Philipp - Eure persönliche Fitness-Tracking Lösung!

---

Happy Training! 💪