Erstes lauffähiges Grundgerüst: Monorepo, Fastify-API, React-Startseite, Docker

.gitignore

@@ -1,5 +1,15 @@
 node_modules/
 dist/
+build/
+*.log
 .env
+.env.local
 *.db
+*.db-journal
+*.sqlite
+*.sqlite3
 .DS_Store
+.vscode/*
+!.vscode/extensions.json
+*.tsbuildinfo
+coverage/

README.md

@@ -1,12 +1,82 @@
 # LaunchPad
 
-LaunchPad is a modern Homelab launcher.
+Ein moderner, minimalistischer Homelab-Launcher – inspiriert von Raycast, Spotlight, Arc
+und Linear. Tippe wenige Buchstaben, finde sofort den gewünschten Dienst, drücke Enter.
 
-## Planned stack
+Kein überladenes Dashboard. Keine Kacheln. Im Mittelpunkt steht eine extrem schnelle Suche.
 
-- React + Vite + TypeScript
-- Fastify
-- SQLite + Drizzle
-- Docker Compose
+## Quickstart (Docker)
 
-Sprint 1 contains the initial project scaffold.
+```bash
+git clone <repo-url> LaunchPad
+cd LaunchPad
+docker compose up -d --build
+```
+
+- Frontend: http://localhost:8080
+- Backend / Health-API: http://localhost:3001/api/health
+
+## Quickstart (lokale Entwicklung)
+
+Voraussetzungen: Node.js ≥ 20, pnpm ≥ 9.
+
+```bash
+pnpm install
+pnpm dev:backend   # startet Fastify auf :3001
+pnpm dev:frontend  # startet Vite auf :5173 (proxyt /api zum Backend)
+```
+
+## Projektstruktur
+
+```
+LaunchPad
+│
+├── apps
+│   ├── frontend   React + Vite + TypeScript + TailwindCSS
+│   └── backend    Fastify + TypeScript + Drizzle ORM + SQLite
+│
+├── packages
+│   ├── shared     gemeinsame Typen (Device, Service) + Such-Ranking-Logik
+│   └── ui         gemeinsame UI-Komponenten (SearchInput, StatusBadge)
+│
+├── docker         zusätzliche Docker-Hilfsdateien
+├── docs           Projektdokumentation
+├── pnpm-workspace.yaml
+├── docker-compose.yml
+└── tsconfig.base.json
+```
+
+## Stand dieses Commits
+
+Dieser erste Commit liefert ein lauffähiges Grundgerüst:
+
+- ✅ pnpm-Monorepo mit `apps/*` und `packages/*`
+- ✅ Fastify-Backend mit `/api/health`-Endpunkt
+- ✅ SQLite-Datenbank (better-sqlite3) inkl. Schema für `devices`, `services`, `categories`
+  (Drizzle ORM), automatisch angelegt beim Start
+- ✅ React-Startseite mit Suchfeld, Dark-/Light-Mode und Live-Statusanzeige des Backends
+- ✅ Tastaturkürzel `/` und `Strg+K` zum Fokussieren der Suche
+- ✅ Docker-Compose-Setup: `docker compose up -d --build` startet Frontend + Backend
+- ✅ Persistentes Docker-Volume für die SQLite-Datenbank
+
+Noch **nicht** enthalten (folgt in den nächsten Commits):
+
+- Scanner (FritzBox, DNS, HTTP/HTTPS, Portscan, Softwareerkennung)
+- CRUD-API für Geräte/Dienste/Kategorien
+- Fuzzy-Suche im Frontend gegen echte Daten (Ranking-Logik existiert bereits in
+  `packages/shared`, ist aber noch nicht ans UI angebunden)
+- Adminbereich, Plugin-System, PWA-Manifest, TanStack Router/Query, shadcn/ui, Zod, RHF
+
+Siehe [`docs/ROADMAP.md`](./docs/ROADMAP.md) für die geplante Reihenfolge.
+
+## Deployment auf dem Server (xlc-launchpad)
+
+```bash
+cd /opt/LaunchPad
+git pull
+docker compose up -d --build
+```
+
+## Branching
+
+Entwicklung erfolgt ausschließlich auf `dev`. `main` bleibt der stabile Branch.

apps/backend/Dockerfile

@@ -0,0 +1,43 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-alpine AS base
+RUN corepack enable
+WORKDIR /app
+
+# ---- deps: gesamten Workspace-Kontext installieren -------------------------
+FROM base AS deps
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml* ./
+COPY packages/shared/package.json packages/shared/package.json
+COPY packages/ui/package.json packages/ui/package.json
+COPY apps/backend/package.json apps/backend/package.json
+COPY apps/frontend/package.json apps/frontend/package.json
+# better-sqlite3 braucht Build-Tools für den nativen Modulbau
+RUN apk add --no-cache python3 make g++
+RUN pnpm install --frozen-lockfile || pnpm install
+
+# ---- build: Backend + Shared bauen ------------------------------------------
+FROM deps AS build
+COPY packages/shared packages/shared
+COPY apps/backend apps/backend
+RUN pnpm --filter @launchpad/shared build
+RUN pnpm --filter @launchpad/backend build
+# nur Production-Dependencies fürs Runtime-Image behalten
+RUN pnpm deploy --filter @launchpad/backend --prod /app/deploy
+
+# ---- runtime: schlankes Laufzeit-Image --------------------------------------
+FROM node:20-alpine AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+ENV DATABASE_PATH=/data/launchpad.db
+ENV PORT=3001
+ENV HOST=0.0.0.0
+
+COPY --from=build /app/deploy/ ./
+COPY --from=build /app/apps/backend/dist ./dist
+COPY --from=build /app/packages/shared/dist ./node_modules/@launchpad/shared/dist
+
+RUN mkdir -p /data
+VOLUME ["/data"]
+EXPOSE 3001
+
+CMD ["node", "dist/index.js"]

apps/backend/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/db/schema.ts",
+  out: "./drizzle",
+  dialect: "sqlite",
+  dbCredentials: {
+    url: process.env.DATABASE_PATH ?? "./data/launchpad.db",
+  },
+});

apps/backend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@launchpad/backend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc -p tsconfig.json",
+    "start": "node dist/index.js",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "db:generate": "drizzle-kit generate",
+    "db:push": "drizzle-kit push"
+  },
+  "dependencies": {
+    "@launchpad/shared": "workspace:*",
+    "@fastify/cors": "^9.0.1",
+    "better-sqlite3": "^11.3.0",
+    "drizzle-orm": "^0.33.0",
+    "fastify": "^4.28.1"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.11",
+    "@types/node": "^20.14.15",
+    "drizzle-kit": "^0.24.2",
+    "pino-pretty": "^11.2.2",
+    "tsx": "^4.19.1",
+    "typescript": "^5.5.4"
+  }
+}

apps/backend/src/db/client.ts

@@ -0,0 +1,70 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import * as schema from "./schema.js";
+
+const databasePath = process.env.DATABASE_PATH ?? "./data/launchpad.db";
+
+// Stellt sicher, dass das Verzeichnis für die SQLite-Datei existiert
+// (relevant im Docker-Volume /data).
+const dir = dirname(databasePath);
+if (dir !== "." && !existsSync(dir)) {
+  mkdirSync(dir, { recursive: true });
+}
+
+const sqlite = new Database(databasePath);
+sqlite.pragma("journal_mode = WAL");
+sqlite.pragma("foreign_keys = ON");
+
+export const db = drizzle(sqlite, { schema });
+
+/**
+ * Legt die Tabellen an, falls sie noch nicht existieren.
+ * Für den ersten Commit reicht ein einfaches "CREATE TABLE IF NOT EXISTS",
+ * spätere Commits ersetzen dies durch echte Drizzle-Migrationen (drizzle-kit).
+ */
+export function ensureSchema(): void {
+  sqlite.exec(`
+    CREATE TABLE IF NOT EXISTS devices (
+      id TEXT PRIMARY KEY,
+      hostname TEXT NOT NULL,
+      ip TEXT NOT NULL,
+      mac TEXT,
+      manufacturer TEXT,
+      model TEXT,
+      online INTEGER NOT NULL DEFAULT 0,
+      source TEXT NOT NULL,
+      last_scan TEXT,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+
+    CREATE TABLE IF NOT EXISTS services (
+      id TEXT PRIMARY KEY,
+      device_id TEXT NOT NULL REFERENCES devices(id) ON DELETE CASCADE,
+      display_name TEXT NOT NULL,
+      category TEXT,
+      favorite INTEGER NOT NULL DEFAULT 0,
+      "order" REAL NOT NULL DEFAULT 0,
+      alias TEXT NOT NULL DEFAULT '[]',
+      icon TEXT,
+      hostname TEXT NOT NULL,
+      url TEXT NOT NULL,
+      https INTEGER NOT NULL DEFAULT 0,
+      port INTEGER NOT NULL,
+      favicon TEXT,
+      description TEXT,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+
+    CREATE TABLE IF NOT EXISTS categories (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      "order" REAL NOT NULL DEFAULT 0,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+  `);
+}

apps/backend/src/db/schema.ts

@@ -0,0 +1,60 @@
+import { sqliteTable, text, integer, real } from "drizzle-orm/sqlite-core";
+
+/**
+ * Ein physisches/logisches Gerät im Netzwerk (z. B. per FritzBox-Scan gefunden).
+ */
+export const devices = sqliteTable("devices", {
+  id: text("id").primaryKey(),
+  hostname: text("hostname").notNull(),
+  ip: text("ip").notNull(),
+  mac: text("mac"),
+  manufacturer: text("manufacturer"),
+  model: text("model"),
+  online: integer("online", { mode: "boolean" }).notNull().default(false),
+  source: text("source").notNull(), // fritzbox | dns | http | https | portscan | manual
+  lastScan: text("last_scan"), // ISO-8601
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});
+
+/**
+ * Ein Dienst, der auf einem Gerät läuft (z. B. Frigate, Portainer, Gitea ...).
+ * Benutzeränderungen (displayName, category, favorite, order, alias, icon)
+ * dürfen von Scans NIEMALS überschrieben werden – siehe README/Spezifikation.
+ */
+export const services = sqliteTable("services", {
+  id: text("id").primaryKey(),
+  deviceId: text("device_id")
+    .notNull()
+    .references(() => devices.id, { onDelete: "cascade" }),
+
+  // vom Benutzer gepflegt, wird von Scans nicht überschrieben
+  displayName: text("display_name").notNull(),
+  category: text("category"),
+  favorite: integer("favorite", { mode: "boolean" }).notNull().default(false),
+  order: real("order").notNull().default(0),
+  alias: text("alias").notNull().default("[]"), // JSON-Array als String
+  icon: text("icon"),
+
+  // von Scans aktualisierbar
+  hostname: text("hostname").notNull(),
+  url: text("url").notNull(),
+  https: integer("https", { mode: "boolean" }).notNull().default(false),
+  port: integer("port").notNull(),
+  favicon: text("favicon"),
+  description: text("description"),
+
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});
+
+/**
+ * Frei definierbare Kategorien (Erstellen/Löschen/Umbenennen/Sortieren per Drag & Drop).
+ */
+export const categories = sqliteTable("categories", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  order: real("order").notNull().default(0),
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});

apps/backend/src/index.ts

@@ -0,0 +1,41 @@
+import Fastify from "fastify";
+import cors from "@fastify/cors";
+import { ensureSchema } from "./db/client.js";
+import { healthRoutes } from "./routes/health.js";
+
+const PORT = Number(process.env.PORT ?? 3001);
+const HOST = process.env.HOST ?? "0.0.0.0";
+
+async function main() {
+  const app = Fastify({
+    logger: {
+      level: process.env.LOG_LEVEL ?? "info",
+      transport:
+        process.env.NODE_ENV !== "production"
+          ? { target: "pino-pretty", options: { colorize: true } }
+          : undefined,
+    },
+  });
+
+  await app.register(cors, {
+    origin: process.env.CORS_ORIGIN ?? true,
+  });
+
+  ensureSchema();
+
+  await app.register(healthRoutes);
+
+  app.get("/", async () => {
+    return { name: "LaunchPad API", status: "running" };
+  });
+
+  try {
+    await app.listen({ port: PORT, host: HOST });
+    app.log.info(`LaunchPad backend läuft auf http://${HOST}:${PORT}`);
+  } catch (err) {
+    app.log.error(err);
+    process.exit(1);
+  }
+}
+
+main();

apps/backend/src/routes/health.ts

@@ -0,0 +1,15 @@
+import type { FastifyInstance } from "fastify";
+import type { HealthStatus } from "@launchpad/shared";
+
+const startedAt = Date.now();
+
+export async function healthRoutes(app: FastifyInstance): Promise<void> {
+  app.get("/api/health", async (): Promise<HealthStatus> => {
+    return {
+      status: "ok",
+      timestamp: new Date().toISOString(),
+      uptimeSeconds: Math.round((Date.now() - startedAt) / 1000),
+      version: "0.1.0",
+    };
+  });
+}

apps/backend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["node"]
+  },
+  "include": ["src"]
+}

apps/frontend/Dockerfile

@@ -0,0 +1,30 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-alpine AS base
+RUN corepack enable
+WORKDIR /app
+
+# ---- deps --------------------------------------------------------------
+FROM base AS deps
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml* ./
+COPY packages/shared/package.json packages/shared/package.json
+COPY packages/ui/package.json packages/ui/package.json
+COPY apps/backend/package.json apps/backend/package.json
+COPY apps/frontend/package.json apps/frontend/package.json
+RUN pnpm install --frozen-lockfile || pnpm install
+
+# ---- build ---------------------------------------------------------------
+FROM deps AS build
+COPY packages/shared packages/shared
+COPY packages/ui packages/ui
+COPY apps/frontend apps/frontend
+RUN pnpm --filter @launchpad/shared build
+RUN pnpm --filter @launchpad/ui build
+RUN pnpm --filter @launchpad/frontend build
+
+# ---- runtime: nginx --------------------------------------------------------
+FROM nginx:1.27-alpine AS runtime
+COPY apps/frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/apps/frontend/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

apps/frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>LaunchPad</title>
+  </head>
+  <body class="bg-white dark:bg-black">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/frontend/nginx.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # PWA / SPA: alle unbekannten Routen auf index.html zurückführen
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API-Anfragen an den Backend-Container weiterleiten
+    location /api/ {
+        proxy_pass http://backend:3001/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location ~* \.(?:css|js|svg|png|jpg|jpeg|gif|ico|woff2?)$ {
+        expires 7d;
+        add_header Cache-Control "public, max-age=604800, immutable";
+    }
+}

apps/frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@launchpad/frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.json --noEmit && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 5173",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@launchpad/shared": "workspace:*",
+    "@launchpad/ui": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
+  }
+}

apps/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/frontend/src/App.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from "react";
+import { SearchInput, StatusBadge } from "@launchpad/ui";
+import type { HealthStatus } from "@launchpad/shared";
+
+type Theme = "light" | "dark";
+
+function useTheme(): [Theme, () => void] {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === "undefined") return "dark";
+    const stored = window.localStorage.getItem("launchpad-theme");
+    if (stored === "light" || stored === "dark") return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    window.localStorage.setItem("launchpad-theme", theme);
+  }, [theme]);
+
+  const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
+  return [theme, toggle];
+}
+
+function useBackendHealth() {
+  const [health, setHealth] = useState<HealthStatus | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function check() {
+      try {
+        const res = await fetch("/api/health");
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data: HealthStatus = await res.json();
+        if (!cancelled) {
+          setHealth(data);
+          setError(false);
+        }
+      } catch {
+        if (!cancelled) setError(true);
+      }
+    }
+
+    check();
+    const interval = setInterval(check, 10_000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  return { health, error };
+}
+
+export default function App() {
+  const [theme, toggleTheme] = useTheme();
+  const [query, setQuery] = useState("");
+  const { health, error } = useBackendHealth();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
+      const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
+      if (isSlash || isCmdK) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === "Escape") {
+        inputRef.current?.blur();
+        setQuery("");
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const isOnline = !error && health?.status === "ok";
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 dark:from-black dark:to-neutral-950">
+      <button
+        onClick={toggleTheme}
+        aria-label="Theme wechseln"
+        className="fixed right-6 top-6 rounded-full border border-black/10 p-2 text-black/60
+          transition-colors hover:bg-black/5 dark:border-white/10 dark:text-white/60 dark:hover:bg-white/5"
+      >
+        {theme === "dark" ? "☀️" : "🌙"}
+      </button>
+
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="text-4xl font-semibold tracking-tight text-black dark:text-white">
+          LaunchPad
+        </h1>
+        <p className="text-black/50 dark:text-white/50">
+          Tippe, um deine Homelab-Dienste sofort zu öffnen.
+        </p>
+      </div>
+
+      <div className="w-full max-w-xl">
+        <SearchInput
+          ref={inputRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Dienst suchen … z. B. „frigate“"
+          hint="⌘K"
+          autoFocus
+        />
+      </div>
+
+      <div className="flex flex-col items-center gap-1">
+        <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
+        {health ? (
+          <span className="text-xs text-black/30 dark:text-white/30">
+            v{health.version} · läuft seit {health.uptimeSeconds}s
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/index.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}

apps/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/frontend/tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: "class",
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          "Inter",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "sans-serif",
+        ],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

apps/frontend/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

apps/frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: process.env.BACKEND_URL ?? "http://localhost:3001",
+        changeOrigin: true,
+      },
+    },
+  },
+});

backend/README.md

@@ -1 +0,0 @@
-# Backend (Fastify)

docker-compose.yml

@@ -1,14 +1,31 @@
-version: "3.9"
-
 services:
   backend:
-    build: ./backend
+    build:
+      context: .
+      dockerfile: apps/backend/Dockerfile
+    container_name: launchpad-backend
+    restart: unless-stopped
+    environment:
+      - DATABASE_PATH=/data/launchpad.db
+      - PORT=3001
+      - HOST=0.0.0.0
+      - NODE_ENV=production
+    volumes:
+      - launchpad-data:/data
     ports:
       - "3001:3001"
 
   frontend:
-    build: ./frontend
-    ports:
-      - "3000:3000"
+    build:
+      context: .
+      dockerfile: apps/frontend/Dockerfile
+    container_name: launchpad-frontend
+    restart: unless-stopped
     depends_on:
       - backend
+    ports:
+      - "8080:80"
+
+volumes:
+  launchpad-data:
+    name: launchpad-data

docker/README.md

@@ -0,0 +1,8 @@
+# docker/
+
+Die eigentlichen Dockerfiles liegen bei ihren Apps (`apps/backend/Dockerfile`,
+`apps/frontend/Dockerfile`), die Orchestrierung im root-`docker-compose.yml`.
+
+Dieses Verzeichnis ist für gemeinsam genutzte Docker-Hilfsdateien vorgesehen,
+z. B. zukünftige `docker-compose.override.yml` für lokale Entwicklung, oder
+gemeinsame Healthcheck-/Entrypoint-Skripte für Scanner-Plugins.

docs/ROADMAP.md

@@ -0,0 +1,47 @@
+# Roadmap
+
+Geplante Reihenfolge der nächsten Commits, aufbauend auf dem lauffähigen
+Grundgerüst aus Commit 1.
+
+## Commit 2 — Geräte- & Dienste-API
+
+- REST-Endpunkte (Fastify) für `GET/POST/PATCH/DELETE` auf `devices` und `services`
+- Zod-Validierung der Request-Bodies
+- Repository-Layer über Drizzle statt Rohschema-Zugriff
+
+## Commit 3 — Suche im Frontend
+
+- Anbindung von `rankServices` aus `packages/shared` an echte Backend-Daten
+- TanStack Query für Datenhaltung, TanStack Router für Adminbereich vs. Startseite
+- Tastatur-Navigation (Pfeiltasten, Enter öffnet Dienst)
+
+## Commit 4 — Kategorien & Favoriten
+
+- Kategorien: Erstellen, Löschen, Umbenennen, Drag & Drop-Sortierung
+- Favoriten-Toggle, Favoriten erscheinen zuerst
+
+## Commit 5 — Scanner
+
+- FritzBox-Scanner (TR-064/UPnP)
+- DNS-, HTTP-, HTTPS-Scanner
+- Optionaler Portscanner mit definierter Portliste
+- Titel- und Favicon-Auslesen
+- Softwareerkennung (Home Assistant, Synology DSM, Frigate, Portainer, Grafana,
+  Proxmox, Immich, Paperless, Gitea, Vaultwarden, Jellyfin, Nextcloud, Pi-hole,
+  AdGuard, Unifi, …)
+- "Jetzt scannen"-Button; niemals automatische Scans
+- Scans überschreiben niemals Displayname, Kategorie, Favorit, Reihenfolge, Alias, Icon
+
+## Commit 6 — Adminbereich
+
+- Menüpunkte: Dashboard, Geräte, Dienste, Scanner, Kategorien, Plugins,
+  Einstellungen, Logs
+
+## Commit 7 — PWA
+
+- Manifest, Service Worker, Offline-Grundfunktion, Installierbarkeit
+
+## Commit 8 — Plugin-System
+
+- Plugin-Schnittstelle zum Registrieren von Scannern, Import von Geräten,
+  Erweitern von Menüs, Bereitstellen von Icons

frontend/README.md

@@ -1 +0,0 @@
-# Frontend (React/Vite)

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "launchpad",
+  "version": "0.1.0",
+  "private": true,
+  "description": "LaunchPad – ein schneller, minimalistischer Homelab-Launcher",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "pnpm --parallel --filter ./apps/* dev",
+    "dev:backend": "pnpm --filter @launchpad/backend dev",
+    "dev:frontend": "pnpm --filter @launchpad/frontend dev",
+    "build": "pnpm --filter @launchpad/shared build && pnpm --filter @launchpad/ui build && pnpm --filter @launchpad/backend build && pnpm --filter @launchpad/frontend build",
+    "build:shared": "pnpm --filter @launchpad/shared build",
+    "build:ui": "pnpm --filter @launchpad/ui build",
+    "build:backend": "pnpm --filter @launchpad/backend build",
+    "build:frontend": "pnpm --filter @launchpad/frontend build",
+    "typecheck": "pnpm -r typecheck",
+    "lint": "pnpm -r lint"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.4"
+  },
+  "packageManager": "pnpm@9.7.0"
+}

packages/shared/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@launchpad/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.4"
+  }
+}

packages/shared/src/index.ts

@@ -0,0 +1,99 @@
+/**
+ * @launchpad/shared
+ *
+ * Gemeinsame Typen und Logik, die sowohl vom Backend (apps/backend)
+ * als auch vom Frontend (apps/frontend) verwendet werden.
+ */
+
+export interface Device {
+  id: string;
+  hostname: string;
+  ip: string;
+  mac: string | null;
+  manufacturer: string | null;
+  model: string | null;
+  online: boolean;
+  source: DeviceSource;
+  lastScan: string | null; // ISO-8601 Zeitstempel
+}
+
+export type DeviceSource = "fritzbox" | "dns" | "http" | "https" | "portscan" | "manual";
+
+export interface Service {
+  id: string;
+  deviceId: string;
+  displayName: string;
+  hostname: string;
+  url: string;
+  https: boolean;
+  port: number;
+  category: string | null;
+  icon: string | null;
+  favicon: string | null;
+  description: string | null;
+  favorite: boolean;
+  alias: string[];
+  order: number;
+}
+
+export interface HealthStatus {
+  status: "ok" | "error";
+  timestamp: string;
+  uptimeSeconds: number;
+  version: string;
+}
+
+/**
+ * Ranking-Stufen für die Suche, gemäß Spezifikation:
+ * 1. Displayname beginnt mit Suchtext
+ * 2. Alias beginnt mit Suchtext
+ * 3. Hostname beginnt mit Suchtext
+ * 4. Displayname enthält Suchtext
+ * 5. Alias enthält Suchtext
+ * 6. Beschreibung enthält Suchtext
+ *
+ * Niedrigere Werte sind relevanter. `null` bedeutet: kein Treffer.
+ */
+export function rankService(service: Service, query: string): number | null {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return null;
+
+  const displayName = service.displayName.toLowerCase();
+  const hostname = service.hostname.toLowerCase();
+  const description = (service.description ?? "").toLowerCase();
+  const alias = service.alias.map((a) => a.toLowerCase());
+
+  if (displayName.startsWith(q)) return 1;
+  if (alias.some((a) => a.startsWith(q))) return 2;
+  if (hostname.startsWith(q)) return 3;
+  if (displayName.includes(q)) return 4;
+  if (alias.some((a) => a.includes(q))) return 5;
+  if (description.includes(q)) return 6;
+
+  return null;
+}
+
+/**
+ * Sortiert und filtert eine Liste von Diensten anhand des Suchtexts.
+ * Favoriten werden bei gleichem Rang bevorzugt, danach die definierte Reihenfolge.
+ */
+export function rankServices(services: Service[], query: string): Service[] {
+  const q = query.trim();
+
+  if (q.length === 0) {
+    return [...services].sort((a, b) => {
+      if (a.favorite !== b.favorite) return a.favorite ? -1 : 1;
+      return a.order - b.order;
+    });
+  }
+
+  return services
+    .map((service) => ({ service, rank: rankService(service, q) }))
+    .filter((entry): entry is { service: Service; rank: number } => entry.rank !== null)
+    .sort((a, b) => {
+      if (a.rank !== b.rank) return a.rank - b.rank;
+      if (a.service.favorite !== b.service.favorite) return a.service.favorite ? -1 : 1;
+      return a.service.order - b.service.order;
+    })
+    .map((entry) => entry.service);
+}

packages/shared/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@launchpad/ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "typescript": "^5.5.4"
+  }
+}

packages/ui/src/SearchInput.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
+  hint?: string;
+}
+
+/**
+ * Zentrales Sucheingabefeld im Raycast/Spotlight-Stil.
+ * Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ hint, className = "", ...props }, ref) => {
+    return (
+      <div
+        className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
+          px-5 py-4 shadow-lg backdrop-blur-md transition-colors
+          focus-within:border-black/20 dark:border-white/10 dark:bg-white/5
+          dark:focus-within:border-white/20 ${className}`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-5 w-5 shrink-0 text-black/40 dark:text-white/40"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          ref={ref}
+          type="text"
+          autoComplete="off"
+          spellCheck={false}
+          className="w-full bg-transparent text-lg text-black outline-none placeholder:text-black/30
+            dark:text-white dark:placeholder:text-white/30"
+          {...props}
+        />
+        {hint ? (
+          <span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
+            text-black/40 dark:border-white/10 dark:text-white/40">
+            {hint}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = "SearchInput";

packages/ui/src/StatusBadge.tsx

@@ -0,0 +1,21 @@
+export interface StatusBadgeProps {
+  online: boolean;
+  label?: string;
+}
+
+/**
+ * Kleiner Statuspunkt (online/offline), z. B. für den Backend-Health-Check
+ * oder später für einzelne Dienste.
+ */
+export function StatusBadge({ online, label }: StatusBadgeProps) {
+  return (
+    <span className="inline-flex items-center gap-2 text-sm text-black/60 dark:text-white/60">
+      <span
+        className={`h-2 w-2 rounded-full ${
+          online ? "bg-emerald-500" : "bg-red-500"
+        }`}
+      />
+      {label ?? (online ? "Online" : "Offline")}
+    </span>
+  );
+}

packages/ui/src/index.ts

@@ -0,0 +1,5 @@
+export { SearchInput } from "./SearchInput.js";
+export type { SearchInputProps } from "./SearchInput.js";
+
+export { StatusBadge } from "./StatusBadge.js";
+export type { StatusBadgeProps } from "./StatusBadge.js";

packages/ui/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"]
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"

tsconfig.base.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": false
+  }
+}