Selfhost Dashboard

Ein selbst-gehostetes, responsives Dashboard für Links, RSS-Feeds und Aktienkurse mit Dark/Light Mode und Drag & Drop.

🚀 Projektstatus

✅ Fertig:

• Next.js 14 Projektstruktur
• TypeScript Konfiguration
• Tailwind CSS Setup
• SQLite Datenbank mit Drizzle ORM
• Dashboard Layout (Header, Sidebar)
• Basis-Styling (Dark/Light Mode)
• API Routes für Links (CRUD)
• Health Check Endpoint

🔄 In Arbeit:

• RSS Feed Integration
• Stock API (Yahoo Finance / Finnhub)
• React Grid Layout für Widgets
• Widget-Komponenten

📋 Anforderungen

• Node.js 18+ (empfohlen: Node.js 20 LTS)
• npm oder yarn
• SQLite (wird automatisch erstellt)

🛠 Installation

1. Dependencies installieren

cd selfhost-dashboard
npm install

2. Datenbank initialisieren

Die SQLite-Datenbank wird automatisch beim ersten Start erstellt:

# Datenbank-Verzeichnis erstellen
mkdir -p data

# Tabellen erstellen (wird beim ersten Request automatisch erstellt)

3. Umgebungskonfiguration (optional)

Erstelle eine .env.local Datei für optionale Einstellungen:

# Datenbank-Pfad (Standard: ./data/dashboard.db)
DATABASE_PATH=./data/dashboard.db

# Aktien-API Provider: "yahoo" (Standard, kein Key nötig) oder "finnhub"
STOCK_API_PROVIDER=yahoo

# Nur nötig, wenn FINNHUB_API_PROVIDER=finnhub
FINNHUB_API_KEY=dein_finnhub_api_key

# Port für Development
PORT=3000

🏃 Entwicklung starten

npm run dev

Das Dashboard ist dann unter http://localhost:3000 verfügbar.

🐳 Docker Deployment

Dockerfile

Ein einfaches Dockerfile ist bereits enthalten:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Docker Compose (empfohlen)

Erstelle eine docker-compose.yml Datei:

version: '3.8'

services:
  dashboard:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ./data:/app/data  # SQLite Datenbank persistieren
    environment:
      - NODE_ENV=production
      - DATABASE_PATH=/app/data/dashboard.db
    restart: unless-stopped

Starten mit Docker

# Build und Start
docker-compose up -d --build

# Stoppen
docker-compose down

# Logs anzeigen
docker-compose logs -f

Das Dashboard ist dann unter http://localhost:3000 verfügbar.

📂 Projektstruktur

selfhost-dashboard/
├── app/
│   ├── api/                    # API Routes
│   │   ├── links/             # Links API (CRUD)
│   │   ├── health/            # Health Check
│   │   └── ...
│   ├── components/
│   │   ├── layout/           # Header, Sidebar, DashboardLayout
│   │   ├── ui/               # LoadingSpinner, Buttons, etc.
│   │   ├── widgets/          # LinkWidget, RssWidget, PortfolioWidget
│   │   └── modals/           # AddLinkModal, AddRssModal, etc.
│   ├── lib/
│   │   ├── db/               # Datenbank (Schema, Client)
│   │   ├── stock-api.ts       # Aktien API Integration
│   │   ├── rss-parser.ts      # RSS Parser
│   │   ├── utils.ts           # Utility Funktionen
│   │   └── cn.ts             # Classname Merge
│   ├── layout.tsx            # Root Layout mit Theme
│   └── page.tsx             # Hauptseite
├── public/
│   └── icons/                # Favicons, etc.
├── data/                    # SQLite Datenbank (wird erstellt)
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── next.config.js
├── postcss.config.js
├── .eslintrc.json
├── drizzle.config.ts
└── README.md

🎯 Features

Kern-Features

• Links – Bookmarks mit Favicons, Tags und Kategorien
• RSS Feeds – Neuigkeiten von deinen Lieblingswebsites
• Portfolio – Aktienkurse mit Trade Republic Kompatibilität

UI/UX

• Dark/Light Mode – Automatisch oder manuell
• Responsive Design – Optimiert für Desktop, Tablet und Mobile
• Drag & Drop – Widgets frei anordnen
• Suche – Globale Suche (Cmd+K)

Technisch

• Next.js 14 – App Router, Server Components
• TypeScript – Type-Sicherheit
• Tailwind CSS – Modernes Styling
• SQLite – Einfache, dateibasierte Datenbank
• Drizzle ORM – Type-sichere Datenbankabfragen

📊 API Endpoints

Endpoint	Methode	Beschreibung
/api/health	GET	Health Check
/api/links	GET	Alle Links abrufen
/api/links	POST	Link erstellen
/api/links/:id	GET	Einzelnen Link abrufen
/api/links/:id	PUT	Link aktualisieren
/api/links/:id	DELETE	Link löschen

🔧 Konfiguration

Trade Republic Integration

Da Trade Republic keine offizielle API hat, funktioniert die Integration so:

1. Du trägst deine Aktien manuell im Dashboard ein:

   • Symbol (z.B. AAPL, TSLA)
   • Anzahl der Anteile
   • Kaufpreis pro Anteil
   • Währung (EUR, USD, etc.)
   • Depotname (z.B. "Trade Republic")

2. Das Dashboard holt die aktuellen Kurse von Yahoo Finance (kein API-Key nötig)

3. Das Dashboard berechnet automatisch:

   • Aktueller Wert (Anteile × aktueller Kurs)
   • Gewinn/Verlust (Wert - Kaufpreis × Anteile)
   • Gewinn/Verlust in %

Aktien-API Provider

Du kannst zwischen zwei Providern wählen:

Provider	API-Key nötig	Rate Limit	Vorteile
Yahoo Finance	❌ Nein	~2000/Stunde	Einfach, zuverlässig
Finnhub	✅ Ja	60/Minute	Offizielle API

Empfehlung: Yahoo Finance (kein Key, höhere Limits)

🐛 Troubleshooting

Datenbank wird nicht erstellt

Stelle sicher, dass das data/ Verzeichnis existiert und beschreibbar ist:

mkdir -p data
chmod 755 data

Node.js Version

Dieses Projekt erfordert Node.js 18 oder höher. Prüfe deine Version:

node --version

Falls nötig, installiere eine neuere Version mit nvm:

nvm install 20
nvm use 20

Port bereits belegt

Ändere den Port in .env.local:

PORT=3001

📝 Roadmap

• Projekt-Setup & Grundgerüst
• Datenbank & API Routes
• Basis UI (Header, Sidebar, Layout)
• Links Widget
• RSS Widget
• Portfolio Widget
• Drag & Drop
• Notizen Widget
• Kalender Widget
• Globale Suche
• Docker Optimierung
• Dokumentation

🤝 Mitwirken

Pull Requests sind willkommen! Bitte halte dich an folgende Richtlinien:

1. TypeScript mit strikten Einstellungen
2. Tailwind CSS für Styling
3. Drizzle ORM für Datenbankabfragen
4. React Hooks statt Class Components
5. Komponenten sollten wiederverwendbar sein

📄 Lizenz

Dieses Projekt ist für den persönlichen Gebrauch bestimmt.

---

Erstellt mit ❤️ und Next.js