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
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