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

3.2 KiB Raw Blame History