eliashenrich/tj_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
6 commits 2 branches 0 tags 188 KiB
Find a file
Exact
eliashenrich 74617d196c Current state
2025-09-12 14:58:39 +02:00
app Current state 2025-09-12 14:58:39 +02:00
components Current state 2025-09-12 14:58:39 +02:00
lib Current state 2025-09-10 13:50:11 +02:00
public/brand Current state 2025-09-10 13:50:11 +02:00
types Current state 2025-09-12 14:58:39 +02:00
.env.example Initial commit 2025-09-10 11:24:01 +02:00
.gitignore Initial commit 2025-09-10 11:24:01 +02:00
AGENTS.md Compute exit points on server 2025-09-11 09:56:19 +02:00
next-env.d.ts Initial commit 2025-09-10 11:24:01 +02:00
next.config.mjs Initial commit 2025-09-10 11:24:01 +02:00
package-lock.json Updated UI 2025-09-10 11:49:02 +02:00
package.json Updated UI 2025-09-10 11:49:02 +02:00
postcss.config.js Initial commit 2025-09-10 11:24:01 +02:00
README.md Initial commit 2025-09-10 11:24:01 +02:00
tailwind.config.ts Initial commit 2025-09-10 11:24:01 +02:00
tsconfig.json Initial commit 2025-09-10 11:24:01 +02:00

README.md

Trader Joes – UI Dashboard

Kurzüberblick

  • Next.js 14 + React 18 + Tailwind + leichte shadcn-UI (Card)
  • PostgreSQL-Anbindung via pg und API-Route /api/strategies
  • Dashboard rendert Strategien als Karten, Polling alle 10s (konfigurierbar)

Schnellstart

  1. .env anlegen (oder .env.example kopieren):
    • Entweder DATABASE_URL=postgres://user:pass@host:5432/db
      • Hinweis: Sonderzeichen im Passwort URL-encoden (z. B. @ -> %40)
    • Oder Einzelwerte setzen: PGHOST, PGPORT, PGUSER, PGPASSWORD, PGDATABASE
    • optional: POLL_INTERVAL_MS=10000 oder NEXT_PUBLIC_POLL_INTERVAL_MS=10000
    • optional: PGSSL=true (bei SSL)
  2. Abhängigkeiten installieren:
    • npm install
  3. Entwicklung starten:

Struktur

  • app/page.tsx: Startseite mit Strategien-Grid
  • components/strategy-cards.tsx: UI + Polling via SWR
  • app/api/strategies/route.ts: DB-Zugriff, liefert JSON aus Tabelle strategy
  • lib/db.ts: pg-Pool (ENV: DATABASE_URL, optional PGSSL)
  • lib/config.ts: Polling-Intervall aus ENV
  • components/ui/card.tsx: shadcn-Card Komponente

Hinweise zur DB

  • Erwartet eine Tabelle strategy. Es werden alle Spalten geladen (select *).
  • UI nutzt folgende Felder falls vorhanden: id, name, description, status, is_active, updated_at.
  • Unbekannte Schemas werden bestmöglich angezeigt (fallbacks für Titel/Status/Zeitstempel).

Anpassungen

  • Polling anpassen: POLL_INTERVAL_MS oder NEXT_PUBLIC_POLL_INTERVAL_MS
  • Komponenten/Styles unter components/ und app/globals.css