BRETT

Ein Imageboard-artiges Upload- und Diskussions-Tool, gebaut mit Nuxt 4 und shadcn-vue. Nutzer können Dateien oder URLs hochladen, in Threads kommentieren, mit Discord-artigen Reactions antworten und aus über einem Dutzend Themes wählen.

Features

Uploads: Drag & Drop (Seiten-Dropzone + Upload-Popover), Datei- oder URL-Upload, Thumbnails für Bilder, eingebetteter Plyr-Videoplayer, YouTube-Embeds und Link-Preview-Cards
Threads & Kommentare: Jeder Upload ist ein Thread mit Kommentarfunktion, Discord-Style-Reactions (Toggle, Zähler, Tooltips) und Live-Updates per WebSocket
Auth & Rollen: Session-Cookie-Login (30 Tage), der erste registrierte Nutzer wird automatisch Admin; Admin-Panel mit Rollenverwaltung und pro Rolle konfigurierbaren Berechtigungen (admin.access, roles.manage, users.manage, comment.delete, upload.delete) — die admin-Rolle darf immer alles
Favoriten & Notifications: Uploads favorisieren, Benachrichtigungs-Glocke mit Live-Events
Themes: 15+ Themes (Standard, Discord, Cyberpunk, Spring, Terminal, Infoseer, Homebrew, Florense, Kawi Green, Clo.nz, Clawmorphism, Realmorphism, Amber, Neo, Neo Pink, Neo Mint), umgeschaltet über data-theme auf <html>, persistiert per Cookie
Layouts: Umschaltbares Bento-/Uniform-Grid für die Upload-Übersicht

Tech-Stack

Bereich	Technologie
Framework	Nuxt 4 / Nitro, Vue 3 (`<script setup>` + TS)
UI	shadcn-vue (`shadcn-nuxt`), Reka UI, Tailwind CSS v4, Lucide-Icons, vue-sonner
Datenbank	MariaDB 11 + Drizzle ORM
Realtime	Nitro WebSocket (`crossws`)
Medien	`@nuxt/image`, Plyr
State	Nuxt `useState`-Composables, VueUse

Projektstruktur

app/
  assets/css/tailwind.css   # Tailwind v4 Entry + alle Theme-Token ([data-theme="…"])
  components/               # App-Komponenten (Header, Dropzone, Tiles, Comments, …)
    ui/                     # shadcn-vue Basis-Komponenten
  composables/              # useAuth, useTheme, useLiveComments, useCommentReactions, …
  layouts/ middleware/ plugins/ pages/
    index.vue               # Upload-Grid / Startseite
    thread/[id].vue         # Thread-Detailseite mit Kommentaren
    admin.vue user/[id].vue settings.vue login.vue register.vue
server/
  api/                      # Nitro-Endpoints (auth, uploads, comments, notifications, admin, …)
  db/schema.ts              # Drizzle-Schema (users, sessions, uploads, comments,
                            #   comment_reactions, favorites, link_previews,
                            #   notifications, roles, user_roles)
  db/migrations/            # Generierte SQL-Migrationen
  plugins/migrate.ts        # Führt Migrationen beim Server-Start aus (Dev)
  routes/_ws.ts             # WebSocket-Route für Live-Events
  utils/                    # auth, db, roles, uploads, notifications, linkPreview
scripts/migrate.ts          # Manueller Migrations-Runner (npm run db:migrate)
shared/utils/               # Gemeinsame Utilities (Client & Server)
public/uploads/             # Upload-Ziel (gitignored)
docker-compose.yml          # MariaDB-Container

Setup

Voraussetzungen: Node.js ≥ 20, Docker (für die mitgelieferte MariaDB) oder eine eigene MySQL/MariaDB-Instanz.

# 1. Datenbank starten
docker compose up -d

# 2. Umgebung konfigurieren
cp .env.example .env   # enthält DATABASE_URL, passt zum Docker-Setup

# 3. Abhängigkeiten installieren
npm install

# 4. ffmpeg-Binary nachinstallieren (wird für Sprachnachrichten → MP3 gebraucht;
#    der Download läuft über das postinstall-Skript von ffmpeg-static, das je
#    nach npm-Konfiguration ggf. geblockt ist)
node node_modules/ffmpeg-static/install.js

# 5. Dev-Server starten (Migrationen laufen automatisch)
npm run dev

Die App läuft auf http://localhost:3000. Der erste registrierte Account erhält automatisch die Admin-Rolle und kann danach im Admin-Panel weitere Rollen (moderator, …) anlegen und vergeben.

Ohne Docker

Eigene MariaDB/MySQL-Instanz bereitstellen und DATABASE_URL in .env anpassen:

DATABASE_URL=mysql://user:pass@host:3306/datenbank

NPM-Scripts

Befehl	Zweck
`npm run dev`	Dev-Server mit HMR, Auto-Migrationen
`npm run build`	Production-Build
`npm run preview`	Build lokal ausführen
`npm run db:generate`	Neue Drizzle-Migration aus Schema-Änderung erzeugen
`npm run db:migrate`	Migrationen manuell anwenden
`npm run db:studio`	Drizzle Studio (DB-GUI)

Entwicklung

Schema ändern: server/db/schema.ts anpassen → npm run db:generate → Migration committen. Im Dev-Betrieb wendet server/plugins/migrate.ts sie beim Start automatisch an.
Neues Theme hinzufügen: [data-theme="…"]-Block mit den CSS-Variablen in app/assets/css/tailwind.css anlegen, den Namen in der ThemeName-Union in app/composables/useTheme.ts ergänzen und einen Eintrag in app/components/ThemeSelector.vue hinzufügen. Themes können auch die shadow-*-Tokens überschreiben (Glow-, Offset- oder Flach-Schatten) sowie font-sans/font-heading/font-mono; --font-logo bleibt bewusst theme-unabhängig.
Konventionen: Semantische Tokens statt hartcodierter Farben (primary, accent, muted …), rounded-md/rounded-sm skalieren über --radius mit dem Theme. Details stehen in AGENTS.md.
Health-Check: GET /api/health meldet den DB-Verbindungsstatus.

5.4 KiB Raw Blame History