Werte Next.js - Gesundheitsdaten Tracking

Eine moderne Next.js-Anwendung zur Erfassung und Verwaltung von Gesundheitsdaten, basierend auf dem ursprünglichen Werte-Projekt.

Features

• ✅ Eingabeformular für Gesundheitsdaten:

  • Datum und Zeit
  • Blutzucker (mg/dl)
  • Mahlzeiten-Informationen
  • Gewicht (kg)
  • Blutdruck (systolisch/diastolisch in mmHg)
  • Puls

• ✅ Anzeige der letzten 10 Einträge mit Löschfunktion

• ✅ Responsive Design mit Tailwind CSS

• ✅ TypeScript für Type-Safety

• ✅ MySQL-Datenbankanbindung (Docker-Container)

• ✅ Anmeldung per Passkey (WebAuthn) alternativ zu Benutzername/Passwort

Anmeldung & Passkeys

Benutzer und bcrypt-Passworthashes stehen in AUTH_USERS (Format name:hash,name2:hash2), die Session ist ein JWT-Cookie (AUTH_SECRET).

Zusätzlich kann sich jeder Benutzer per Passkey anmelden (Fingerabdruck, Gesichtserkennung oder Geräte-PIN). Das Passwort bleibt als Alternative bestehen.

• Registrieren: nach der Anmeldung im Tab Einstellungen → „Passkey hinzufügen". Der Passkey wird dem angemeldeten Benutzer zugeordnet; mehrere Geräte sind möglich.
• Anmelden: auf der Login-Seite „Mit Passkey anmelden".
• Speicherung: Tabelle passkeys (siehe create_table.sql); sie wird beim ersten Zugriff automatisch angelegt, falls der DB-Benutzer CREATE-Rechte hat.
• Konfiguration: RP_ID (nur der Host), RP_ORIGIN (volle URL), RP_NAME. Lokal sind localhost / http://localhost:3000 voreingestellt.
• Wichtig: WebAuthn funktioniert nur über HTTPS oder auf localhost.

Technologie-Stack

• Framework: Next.js 16.x (App Router)
• Sprache: TypeScript
• Styling: Tailwind CSS
• Datenbank: MySQL 5.6 (Docker)
• ORM: mysql2

Voraussetzungen

• Node.js 18.x oder höher
• Docker (für MySQL-Container)
• Die MySQL-Datenbank muss bereits laufen (siehe docker-compose.yml im übergeordneten Verzeichnis)

Installation

1. Dependencies installieren:

   npm install
   

2. Umgebungsvariablen konfigurieren: Die Datei .env.local ist bereits mit den korrekten Datenbankzugangsdaten angelegt:

   DB_HOST=mydbase_mysql
   DB_USER=root
   DB_PASS=SFluorit
   DB_NAME=RXF
   

3. Datenbank prüfen: Stelle sicher, dass die MySQL-Datenbank läuft und die Tabelle RXF.Werte_BZG existiert.

Entwicklung

Development-Server starten:

npm run dev

Die Anwendung ist dann unter http://localhost:3000 erreichbar.

Produktion

Lokale Produktion

Build erstellen:

npm run build

Produktions-Server starten:

npm start

Docker Deployment

Für das Deployment auf einem externen Server ist die Anwendung vollständig containerisiert. Alle Details zur Installation und Verwaltung finden Sie in der DEPLOYMENT.md.

Kurzanleitung:

# Docker-Container bauen und starten
docker-compose up -d --build

# Status prüfen
docker-compose ps

# Logs anschauen
docker-compose logs -f

Die Anwendung ist dann unter http://<server-ip>:3000 erreichbar.

Projekt-Struktur

werte_next/
├── app/
│   ├── api/
│   │   └── werte/
│   │       ├── route.ts          # GET/POST API für Einträge
│   │       └── [id]/
│   │           └── route.ts      # DELETE API für einzelne Einträge
│   ├── layout.tsx                # Root Layout
│   ├── page.tsx                  # Hauptseite
│   └── globals.css               # Globale Styles
├── components/
│   ├── WerteForm.tsx             # Eingabeformular
│   └── WerteList.tsx             # Liste der letzten Einträge
├── lib/
│   └── db.ts                     # Datenbankverbindung
├── types/
│   └── werte.ts                  # TypeScript-Typen
├── .env.local                    # Umgebungsvariablen (lokal, gitignored)
└── package.json

API-Endpunkte

GET /api/werte

Holt die letzten N Einträge aus der Datenbank.

Query Parameters:

• limit (optional): Anzahl der Einträge (Standard: 10)

Response:

{
  "success": true,
  "data": [...]
}

POST /api/werte

Erstellt einen neuen Eintrag.

Request Body:

{
  "Datum": "2026-02-21",
  "Zeit": "14:30",
  "Zucker": 120,
  "Essen": "nüchtern",
  "Gewicht": 75.5,
  "DruckS": 130,
  "DruckD": 85,
  "Puls": 72
}

DELETE /api/werte/[id]

Löscht einen Eintrag anhand der ID.

Design

Das Design orientiert sich am ursprünglichen Werte-Projekt:

• Hintergrundfarbe: #FFFFDD (hellgelb)
• Eingabebereich: #CCCCFF (hellblau)
• Buttons: #85B7D7 (blau)
• Schriftarten: Arial, Verdana, Helvetica

Unterschiede zum Original

• Modernes Framework: Next.js statt PHP
• TypeScript: Type-Safety für bessere Wartbarkeit
• React: Komponentenbasierte Architektur
• API Routes: RESTful API statt direkter PHP-Skripte
• Vereinfachte Features: Fokus auf Eingabe und letzte 10 Einträge (Listen- und Statistik-Tabs wurden weggelassen wie gewünscht)

Bekannte Einschränkungen

• Die Tabs "Liste" und "Statistik" aus dem Original wurden bewusst nicht implementiert
• Die jqGrid-Funktionalität wurde durch eine einfache Tabelle ersetzt

Support

Bei Fragen oder Problemen: rxf@gmx.de

Lizenz

Private Nutzung