117 lines
3.2 KiB
Markdown
117 lines
3.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Schritt 2: Entwicklungsserver starten
|
|
|
|
```bash
|
|
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](src/data/services.ts):
|
|
|
|
```typescript
|
|
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](tailwind.config.ts) angepasst werden.
|
|
|
|
## Browser-Unterstützung
|
|
|
|
Das Dashboard funktioniert auf modernen Browsern:
|
|
- Chrome/Edge 90+
|
|
- Firefox 88+
|
|
- Safari 14+
|
|
|
|
## Lizenz
|
|
|
|
MIT
|