Homelab Dashboard

Ein modernes, responsives Dashboard für die Verwaltung von Homelab-Diensten, gebaut mit Next.js 15, TypeScript und Tailwind CSS.

Features

✨ Moderne Benutzeroberfläche

• Elegantes Dark/Light Mode Design
• Responsive Grid-Layout für alle Bildschirmgrößen
• Smooth Animations und Übergänge

🎯 Service-Management

• Service-Karten mit Name, Beschreibung und Status
• Farbcodierter Status-Indikator (Online, Warnung, Offline)
• Direkte Links zu Services
• Pulsierender Status-Punkt für visuelle Rückmeldung

📱 Mobile-First Design

• Optimiert für Smartphones, Tablets und Desktop
• Touch-freundliche Buttons
• Flexibles Grid-System

Installation & Setup

Voraussetzungen

• Node.js 18+ installiert
• npm oder yarn

Schritt 1: Dependencies installieren

npm install

Schritt 2: Entwicklungsserver starten

npm run dev

Der Server läuft dann unter http://localhost:3000

Projekt-Struktur

homelab-dashboard/
├── app/
│   ├── components/
│   │   ├── Header.tsx          # Header-Komponente
│   │   └── ServiceCard.tsx      # Service-Karten-Komponente
│   ├── globals.css             # Globale Tailwind Styles
│   ├── layout.tsx              # Root Layout
│   └── page.tsx                # Startseite
├── lib/
│   └── data.ts                 # Mock-Daten und Service-Typen
├── tailwind.config.ts          # Tailwind Konfiguration
├── postcss.config.js           # PostCSS Konfiguration
├── next.config.js              # Next.js Konfiguration
├── tsconfig.json               # TypeScript Konfiguration
└── package.json                # Abhängigkeiten

Dienste hinzufügen/bearbeiten

Bearbeite die Datei src/data/services.ts:

export const services: Service[] = [
  {
    id: 'unique-id',
    name: 'Dein Service',
    description: 'Was macht dieser Service?',
    category: 'Infrastruktur', // oder Smart Home, Medien, Dokumente
    status: 'online', // online | warning | offline
    url: 'http://localhost:8000',
    icon: '🖥️', // Optional - ein Emoji für visuelles Feedback
  },
  // ... weitere Services
];

Verfügbare Kategorien

• Infrastruktur: Server, Netzwerk, Monitoring
• Smart Home: Home Automation und IoT
• Medien: Medienserver und Downloading
• Dokumente: Dateispeicher und Code-Repositories

Verfügbare Commands

• npm run dev - Entwicklungsserver starten
• npm run build - Produktions-Build erstellen
• npm start - Produktions-Server starten
• npm run lint - Linter ausführen

Status-Indikatoren

Status	Farbe	Beschreibung
Online	🟢 Grün	Service läuft einwandfrei
Warnung	🟡 Gelb	Service läuft, aber mit Performance-Problemen
Offline	🔴 Rot	Service ist nicht erreichbar

Docker Deployment

Lokaler Start ohne Docker

npm install
npm run dev

Lokaler Start mit Docker

# Build und starte mit docker-compose
docker-compose up --build

# Oder manuell:
docker build -t homelab-dashboard .
docker run -p 3000:3000 homelab-dashboard

Build-Befehl

npm run build

Run-Befehl

npm start

Docker Compose Nutzung

# Start im Hintergrund
docker-compose up -d

# Stoppen
docker-compose down

# Logs anzeigen
docker-compose logs -f homelab-dashboard

Unraid Volume-Mappings

Für Unraid empfiehlt es sich, die Konfigurationsdateien als Volumes zu mounten:

• config.json: /mnt/user/appdata/homelab-dashboard/config.json → /app/config.json
• services.json: /mnt/user/appdata/homelab-dashboard/services.json → /app/src/data/services.json

Dadurch können Konfigurationen außerhalb des Containers verwaltet werden.

Konfiguration

Services bearbeiten

Bearbeite src/data/services.json für JSON-basierte Konfiguration oder src/data/services.ts für TypeScript-basierte Konfiguration.

App-Konfiguration

Bearbeite config.json im Projektroot, um Titel, Beschreibung und andere Einstellungen anzupassen:

{
  "title": "Mein Homelab Dashboard",
  "subtitle": "Live-Status aller verwalteten Dienste",
  "description": "Live-Monitoring-Dashboard für mein Homelab",
  "servicesFile": "src/data/services.json",
  "refreshInterval": 30000,
  "categories": [
    "Infrastruktur",
    "Smart Home",
    "Medien",
    "Dokumente"
  ]
}

Environment Variables

Kopiere .env.example zu .env und passe die Werte an:

• PORT: Port für den Server (Standard: 3000)
• HOSTNAME: Hostname binding (Standard: 0.0.0.0)

Ports

• 3000: Haupt-HTTP-Port der Anwendung | Warning | 🟡 Orange | Service hat Probleme, läuft aber | | Offline | 🔴 Rot | Service ist nicht erreichbar |

Styling & Anpassungen

Das Projekt nutzt Tailwind CSS für Styling. Eigene Farben und Konfiguration können in tailwind.config.ts angepasst werden.

Browser-Unterstützung

Das Dashboard funktioniert auf modernen Browsern:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Lizenz

MIT