WICHTIGER HINWEIS: Das Strandrestaurant Badezeit ist aufgrund eines Brandes derzeit geschlossen. Die Wiedereröffnung ist für 2025 geplant.
Dies ist die offizielle Website des Strandrestaurant Badezeit - einem authentischen deutschen Strandrestaurant am Westerland Beach auf Sylt. Das Projekt umfasst sowohl eine öffentliche Website als auch ein umfassendes Restaurantmanagement-System.
- Name: Strandrestaurant Badezeit
- Adresse: Dünenstraße 3, 25980 Westerland, Sylt, Deutschland
- Inhaber: Norbert Mangelsen
- Telefon: +49 4651 834020
- E-Mail: info@badezeit.de
- Website: www.badezeit.de
- Status: Geschlossen aufgrund Brand, Wiedereröffnung 2025
- Framework: Next.js 16.0.1 mit App Router + Turbopack
- React: Version 19.1.0 (stable)
- TypeScript: Vollständige strict mode Typisierung
- Styling: Tailwind CSS 4.x mit shadcn/ui Komponenten
- Icons: Lucide React
- Animationen: Framer Motion + tw-animate-css
- UI-Komponenten: shadcn/ui (Radix UI primitives)
- Theming: 5 OKLCH-Farbschemata (Coral, Ocean, Forest, Sunset, Midnight)
- Datenbank: PostgreSQL (Supabase) mit Connection Pooling (PgBouncer)
- ORM: Prisma 6.18.0 (mit prisma.config.ts)
- Authentifizierung: Supabase Auth mit SSR-Integration
- Email: React Email mit Resend Integration
- Formulare: React Hook Form mit Server Actions und Zod-Validierung
- Export: ExcelJS (Excel-Export) + jsPDF (PDF-Generation)
- State Management: TanStack Query v5 für Server-State
- Architecture: Next.js 16 ohne Middleware - Auth in Data Access Layer
- Plattform: Vercel (Next.js optimiert)
- CDN: Vercel Edge Network
- Bilder: ImageKit.io CDN
- Domain: badezeit.de
- Node.js 18.x oder höher
- npm oder yarn
- PostgreSQL Datenbank (empfohlen: Supabase)
- Git
git clone https://github.com/[username]/badezeit-sylt.git
cd badezeit-syltnpm installErstellen Sie eine .env.local Datei im Hauptverzeichnis:
# Database (WICHTIG: Verwenden Sie Connection Pooler für Vercel/Produktion)
# Development (Direct Connection - Port 5432):
DATABASE_URL="postgresql://postgres:[PASSWORD]@db.xxx.supabase.co:5432/postgres"
# Production/Vercel (Connection Pooler - Port 6543):
# DATABASE_URL="postgresql://postgres.xxx:[PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
# Supabase Authentication
NEXT_PUBLIC_SUPABASE_URL="https://xxx.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGc..."
# Email (Resend)
RESEND_API_KEY="re_..."
RESEND_FROM_EMAIL="noreply@badezeit.de"
# Analytics (optional)
NEXT_PUBLIC_GA_ID=""- Verwenden Sie IMMER den Connection Pooler (Port 6543) mit
?pgbouncer=true - Niemals Direct Connection (Port 5432) in serverless Umgebungen
- Siehe
VERCEL_DATABASE_CONFIG.mdfür detaillierte Anleitung
# Prisma Client generieren
npm run db:generate
# Schema in Datenbank übertragen
npm run db:push
# Beispieldaten hinzufügen (optional)
npm run db:seednpm run devDie Anwendung ist nun unter http://localhost:3000 erreichbar.
npm run dev # Entwicklungsserver mit Turbopack (Port 3000)
npm run build # Produktions-Build erstellen
npm run start # Produktionsserver starten
npm run lint # ESLint ausführen
npm run type-check # TypeScript Typprüfungnpm run db:generate # Prisma Client generieren
npm run db:push # Schema-Änderungen in DB übertragen
npm run db:seed # Datenbank mit Beispieldaten füllen (inkl. 5 Kategorien, 10 Menüitems)
npm run db:studio # Prisma Studio öffnen
npm run db:reset # Datenbank zurücksetzen und neu seeden# Admin Panel Funktionen
# 1. Starte Entwicklungsserver
npm run dev
# 2. Navigiere zu /dashboard/speisekarte für Menümanagement
# 3. Navigiere zu /dashboard/analytics für Export-Funktionen
# 4. Teste alle Tab-Navigationen im Speisekarte-BereichDas Admin-Panel wurde vollständig neu gestaltet mit modernem, flüssigem und responsive Design.
- Kollapierbarer Sidebar: 80px ↔ 280px (Desktop)
- Mobile Hamburger-Menü: Touch-optimiert für Smartphones
- Smooth Animations: Framer Motion für flüssige Übergänge
- Dark Mode Support: Vollständige Unterstützung aller 5 Themes
- Breadcrumbs: Dynamische Navigation mit aktuellem Pfad
- Command Menu: Globale Suche (Cmd+K / Ctrl+K)
- Role-based Access: Automatische Filterung nach Benutzerrolle
- Collapsible Sub-items: Einstellungen mit Untermenü
📍 Allgemein
- Restaurant-Informationen (Name, Beschreibung, Website)
- Regional-Einstellungen (Sprache, Zeitzone, Währung)
- Datums- und Zeitformate
- Kontaktinformationen (Telefon, E-Mail, Adresse)
🎨 Branding
- Logo- und Favicon-Upload
- Farbschema (Primär-, Sekundär-, Akzentfarbe)
- Visuelle Identität
- Color Picker Integration
🔔 Benachrichtigungen
- E-Mail-Benachrichtigungen (An/Aus)
- SMS-Benachrichtigungen (An/Aus)
- Absender-E-Mail konfigurieren
- Template-Verwaltung (geplant)
🛡️ System
- Benutzerstatistiken (Total, Admins, Manager, Staff)
- Wartungsmodus-Schalter
- Automatische Backups (Häufigkeit konfigurierbar)
- Backup herunterladen/hochladen
- Datenaufbewahrung
- Mobile-First: Optimiert für Touch-Geräte
- WCAG-konform: Barrierefreie Bedienelemente
- Konsistente Typografie: Inter Font-Family
- Spacing System: Konsistente Abstände (4px Basis)
- Card-based Layout: Übersichtliche Gruppierung
// Migriert von package.json zu prisma.config.ts
export default defineConfig({
seed: {
command: 'tsx prisma/seed.ts',
},
generator: {
provider: 'prisma-client-js',
output: '../node_modules/@prisma/client',
},
})- Klare Trennung zwischen Server und Client Components
- Optimale Performance durch selective hydration
- Suspense boundaries für besseres Loading UX
- Dynamische Imports für große Komponenten
- Code-Splitting nach Routen
- Optimierte Bundle-Größe
badezeit-sylt/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── login/ # Login-Seite (Supabase Auth)
│ │ ├── actions/ # Server Actions
│ │ │ └── contact.ts # Kontaktformular-Action
│ │ ├── api/ # API Routes
│ │ │ ├── availability/ # Verfügbarkeitsprüfung
│ │ │ ├── reservations/ # Reservierungen API
│ │ │ ├── customers/ # Kunden API (GDPR-konform)
│ │ │ ├── menu/ # Speisekarten API
│ │ │ ├── gallery/ # Galerie API
│ │ │ ├── settings/ # System-Einstellungen
│ │ │ └── dashboard/ # Dashboard-Metriken
│ │ ├── dashboard/ # Admin-Panel (Vollständig implementiert)
│ │ │ ├── layout.tsx # Dashboard Layout mit Navigation
│ │ │ ├── page.tsx # Dashboard-Übersicht
│ │ │ ├── reservierungen/ # Reservierungsmanagement
│ │ │ │ ├── page.tsx # Reservierungsliste
│ │ │ │ ├── neu/ # Neue Reservierung
│ │ │ │ ├── [id]/ # Reservierungsdetails
│ │ │ │ └── components/ # Reservierungs-Komponenten
│ │ │ ├── kunden/ # Kundenverwaltung (CRM)
│ │ │ │ ├── page.tsx # Kundenliste
│ │ │ │ ├── [id]/ # Kundendetails
│ │ │ │ └── components/ # Kunden-Komponenten
│ │ │ ├── speisekarte/ # **NEU: Vollständiges Menümanagement**
│ │ │ │ ├── page.tsx # Haupt-Menüseite mit Tab-Navigation
│ │ │ │ └── components/
│ │ │ │ ├── tabs-navigation.tsx # Tab-Navigation
│ │ │ │ ├── category-manager.tsx # Kategorienverwaltung
│ │ │ │ ├── item-manager.tsx # Gerichteverwaltung
│ │ │ │ ├── allergen-manager.tsx # **NEU: EU-14 Allergenmanagement**
│ │ │ │ ├── photo-manager.tsx # **NEU: Bilderverwaltung**
│ │ │ │ └── menu-settings-manager.tsx # **NEU: 6-Tab Einstellungen**
│ │ │ └── analytics/ # **NEU: Analytics mit Export**
│ │ │ ├── page.tsx # Analytics Dashboard
│ │ │ └── components/
│ │ │ └── export-manager.tsx # **NEU: PDF/Excel Export**
│ │ ├── globals.css # Globale Styles & Design System
│ │ ├── layout.tsx # Root Layout
│ │ ├── page.tsx # Homepage
│ │ ├── kontakt/ # Kontakt-Seite
│ │ ├── ueber-uns/ # Über uns Seite
│ │ ├── speisekarte/ # Öffentliche Speisekarte
│ │ ├── galerie/ # Bildergalerie
│ │ └── reservierung/ # Online-Reservierungssystem
│ ├── components/ # React Komponenten
│ │ ├── ui/ # shadcn/ui Base Components
│ │ │ ├── button.tsx # Button-Komponente
│ │ │ ├── form.tsx # Formular-Komponenten
│ │ │ ├── dialog.tsx # Modal-Dialoge
│ │ │ ├── table.tsx # Tabellen-Komponente
│ │ │ ├── lightbox.tsx # Bildergalerie Lightbox
│ │ │ └── switch.tsx # **NEU: Radix UI Switch-Komponente**
│ │ ├── layout/ # Layout-Komponenten
│ │ │ ├── header.tsx # Website-Header
│ │ │ ├── footer.tsx # Website-Footer
│ │ │ ├── public-layout.tsx # Öffentliches Layout
│ │ │ ├── dashboard-layout.tsx # Admin-Layout
│ │ │ └── breadcrumbs.tsx # Navigation
│ │ └── providers/ # React Context Provider
│ │ └── query-provider.tsx # TanStack Query
│ ├── hooks/ # Custom React Hooks
│ │ ├── use-reservations.ts # Reservierungs-Hook
│ │ ├── use-customers.ts # Kunden-Hook
│ │ ├── use-availability.ts # Verfügbarkeits-Hook
│ │ ├── use-menu.ts # Speisekarten-Hook
│ │ ├── use-gallery.ts # Galerie-Hook
│ │ ├── use-settings.ts # System-Settings Hook
│ │ └── use-dashboard-metrics.ts # Dashboard-Daten
│ ├── utils/ # Utility Functions
│ │ └── supabase/ # Supabase Helpers
│ │ ├── client.ts # Browser Client
│ │ ├── server.ts # Server Client (SSR)
│ │ └── middleware.ts # Session Management Helper
│ └── lib/ # Core Utilities & Konfiguration
│ ├── db.ts # Prisma Client Setup mit Connection Pooling
│ ├── auth.ts # Supabase Auth Utilities & Role Management
│ ├── utils.ts # Utility-Funktionen
│ ├── restaurant-utils.ts # Restaurant-spezifische Utils
│ ├── email/ # E-Mail System
│ │ ├── send-email.ts # Resend Integration
│ │ └── templates/ # React Email Templates
│ │ ├── reservation-confirmation.tsx
│ │ ├── reservation-reminder.tsx
│ │ ├── reservation-cancellation.tsx
│ │ ├── newsletter-welcome.tsx
│ │ └── staff-invitation.tsx
│ └── validations/ # Zod Schema-Validierung
│ ├── customer.ts # Kunden-Validierung
│ ├── reservation.ts # Reservierungs-Validierung
│ ├── menu.ts # Speisekarten-Validierung
│ ├── table.ts # Tisch-Validierung
│ ├── user.ts # Benutzer-Validierung
│ ├── gallery.ts # Galerie-Validierung
│ └── dashboard.ts # Dashboard-Validierung
├── prisma/
│ ├── schema.prisma # Vollständiges DB-Schema
│ ├── seed.ts # Beispieldaten
│ └── migrations/ # Datenbank-Migrationen
├── docs/ # Technische Dokumentation
│ ├── README.md # Dokumentations-Übersicht
│ ├── ARCHITECTURE.md # System-Architektur
│ ├── DATABASE.md # Datenbank-Schema
│ ├── API.md # API-Dokumentation
│ ├── COMPONENTS.md # Komponenten-Guide
│ ├── DEPLOYMENT.md # Deployment-Guide
│ └── MAINTENANCE.md # Wartungshandbuch
├── VERCEL_DATABASE_CONFIG.md # Anleitung für Vercel DB Connection Pooler
├── TECHNICAL_AUDIT_REPORT.md # Technischer Audit-Bericht
├── prisma.config.ts # Prisma 6.18 Konfiguration
├── tailwind.config.js # Tailwind CSS Konfiguration
├── components.json # shadcn/ui Konfiguration
├── tsconfig.json # TypeScript Konfiguration
├── eslint.config.mjs # ESLint Konfiguration
├── next.config.ts # Next.js 16 Konfiguration (Turbopack)
└── package.json # Dependencies & Scripts
📝 Hinweis zu Next.js 16:
- Kein
middleware.tsmehr - Next.js 16 verwendet Proxy-Pattern - Authentifizierung in Data Access Layer (src/lib/auth.ts)
- Session Management in Supabase Helpers (src/utils/supabase/)
## 🌐 Website-Features
### Öffentliche Seiten
- **Homepage**: Restaurant-Präsentation mit Bildern und Informationen
- **Über uns**: Authentische Informationen über Norbert Mangelsen und das Team
- **Speisekarte**: Maritime Küche und Strandrestaurant-Klassiker
- **Galerie**: Bilder vom Restaurant, Essen und Ambiente
- **Kontakt**: Standort, Öffnungszeiten und Kontaktformular
- **Reservierung**: Online-Tischreservierungssystem
### Besondere Features
- **Zweisprachig**: Deutsch (primär) und Englisch
- **Mobile-First**: Responsive Design für alle Geräte
- **GDPR-konform**: Datenschutz und Einverständniserklärungen
- **SEO-optimiert**: Meta-Tags und strukturierte Daten
- **Performance**: Optimierte Bilder und Lazy Loading
## 💼 Admin-Dashboard
Das umfassende Restaurantmanagement-System bietet folgende Module:
### 📊 Dashboard-Übersicht
- **Kernmetriken**: Heutige Reservierungen, Umsätze, Auslastung
- **Schnellaktionen**: Neue Reservierung, Kundensuche, Tischübersicht
- **Echtzeit-Updates**: Live-Status aller Tische und Reservierungen
- **Rollenbasierte Ansichten**: Angepasste Inhalte je nach Benutzerrolle
### 📅 Reservierungsmanagement
- **Reservierungskalender**: Tages-, Wochen- und Monatsansicht
- **Tischbelegung**: Visueller Grundriss mit Echtzeit-Status
- **Kundeninformationen**: Vollständige CRM-Integration
- **Status-Management**: PENDING, CONFIRMED, SEATED, COMPLETED, CANCELLED
- **E-Mail-Automation**: Bestätigungen, Erinnerungen, Stornierungen
- **Sonderanfragen**: Anlässe, Diätvorschriften, besondere Wünsche
### 👥 Kundenverwaltung (CRM)
- **Kundenprofile**: Vollständige Kontaktdaten und Präferenzen
- **Besuchshistorie**: Detaillierte Reservierungs- und Ausgabenhistorie
- **Notizen-System**: Wichtige Informationen und Präferenzen
- **GDPR-Compliance**: Einverständniserklärungen und Datenschutz
- **VIP-Status**: Besondere Kennzeichnung für Stammkunden
- **Statistiken**: Gesamtbesuche, durchschnittliche Gruppengröße, Gesamtausgaben
### 🪑 Tischmanagement
- **Tischkonfiguration**: Kapazität, Standort, Eigenschaften
- **Grundriss-Editor**: Visuelle Anordnung mit X/Y-Koordinaten
- **Standortkategorien**: Terrasse Meerblick, Terrasse Standard, Innenbereich
- **QR-Code-System**: Automatische QR-Codes für kontaktlose Speisekarten
- **Verfügbarkeitsstatus**: Aktiv/Inaktiv, Wartungsmodus
### 🍽️ Speisekartenmanagement
**Vollständig implementiertes Admin-System mit:**
- **Tab-basierte Navigation**: 5 Hauptbereiche (Gerichte, Kategorien, Allergene, Bilder, Einstellungen)
- **Kategoriemanagement**: CRUD-Operationen mit hierarchischer Struktur
- **Gerichteverwaltung**: Vollständige Menüitemverwaltung mit Preisen und Beschreibungen
- **EU-14 Allergen-Compliance**: Vollständige Allergenkennzeichnung (Gluten, Milch, Eier, Nüsse, Fisch, Schalentiere, Soja, Sellerie, Senf, Sesam, Sulfite, Lupinen, Weichtiere, Erdnüsse)
- **Fotomanagement**: Direkte Integration mit gallery_images Tabelle
- **Menü-Einstellungen**: 6 Konfigurationsbereiche (Anzeige, Preise, Sprache, Layout, Öffentlich, System)
- **Echtzeit-Datenbankintegration**: Live-Verbindung zu Supabase PostgreSQL
- **Formular-Validierung**: React Hook Form mit Zod-Schemas
- **Mehrsprachigkeit**: Deutsch (primär) und Englisch
- **Beispieldaten**: 5 Kategorien und 10 Menüitems bereits eingepflegt
### 📈 Analytics & Berichte
**Vollständig implementiertes Analytics-System:**
- **Dashboard-Metriken**: Live-Reservierungsstatistiken, Umsätze, Trends
- **Export-Manager**: PDF- und Excel-Export mit professioneller Formatierung
- **PDF-Generation**: jsPDF mit AutoTable für strukturierte Reports
- **Excel-Export**: ExcelJS (sicher, keine Vulnerabilities) mit mehreren Arbeitsblättern
- **Umfassende Berichte**: Zusammenfassung, Tageswerte, Leistungskennzahlen
- **Konfigurierbare Exports**: Anpassbare Inhalte und Zeiträume
- **Performance-Analyse**: RevPASH, Auslastung, Durchschnittswerte
- **Deutsche Formatierung**: Korrekte Datums- und Währungsformate
- **Kundensegmentierung**: VIP-Kunden, Stammkunden, Neukunden
- **GDPR-konforme Auswertungen**: Anonymisierte Datenanalyse
### ⚙️ Systemeinstellungen
**Vollständig funktionale Einstellungsverwaltung:**
- **Betriebszeiten**: Flexible Öffnungszeiten-Konfiguration mit Formularvalidierung
- **Reservierungsregeln**: Vorlaufzeiten, maximale Gruppengröße mit React Hook Form
- **E-Mail-Templates**: Anpassbare Kommunikationsvorlagen
- **Systemparameter**: Zeitzone, Sprache, Währung mit Echtzeit-Updates
- **Benutzerrollen**: ADMIN, MANAGER, STAFF, KITCHEN mit granularen Berechtigungen
- **TanStack Query Integration**: Optimierte Datenabfragen und Cache-Management
- **Validierung**: Zod-Schemas für alle Einstellungsformulare
- **Sofortiges Feedback**: Toast-Benachrichtigungen für Aktionen
### 🔒 Sicherheit & Compliance
- **Rollenbasierte Zugriffskontrolle**: Granulare Berechtigungen
- **GDPR-Compliance**: Vollständige Datenschutz-Integration
- **Audit-Logs**: Nachverfolgung aller Systemaktivitäten
- **Datensicherung**: Automatische Backups und Recovery
- **Entwicklungsmodus**: Automatische Deaktivierung ohne Auth-Keys
## 🔧 Technische Details
### Neue Admin Panel Architektur
**Vollständig implementierte Features:**
- **Tab-basierte Navigation**: Moderne UX mit 5 Hauptbereichen
- **Form Management**: React Hook Form mit Zod-Validierung für alle Formulare
- **State Management**: TanStack Query für optimierte Server-State-Verwaltung
- **Export-System**: jsPDF + XLSX für professionelle Berichte
- **Real-time Updates**: Live-Datenbankverbindung zu Supabase
- **Component Library**: Radix UI Primitives mit custom Styling
### Client Components vs Server Components
Das Projekt nutzt Next.js 15 App Router mit strategischer Komponentenverteilung:
- **Server Components**: Standard für Performance (Dashboard-Seiten, APIs)
- **Client Components**: Interaktive Features (alle Admin-Formulare, Export-Manager)
- **Neue Client Components**: Switch, TabsNavigation, AllergenManager, PhotoManager, MenuSettingsManager, ExportManager
### Authentifizierung & Authorization
- **Supabase Auth**: Vollständiges SSR-Auth-System
- **Session Management**: Supabase SSR Helpers für Server/Client
- **Rollenbasiert**: ADMIN, MANAGER, STAFF, KITCHEN
- **Route Protection**: Auth-Prüfung in Data Access Layer (src/lib/auth.ts)
- **Demo-Modus**: Login mit demouser@badezeit.de / badezeit00
- **Next.js 16 Pattern**: Keine Middleware - Auth direkt in Route Handlers
### Formular-Handling
- **React Hook Form**: Performante Formularverarbeitung mit Validierung
- **Zod Schemas**: Typsichere Laufzeit-Validierung für alle Formulare
- **Server Actions**: Sichere serverseitige Verarbeitung
- **Toast Feedback**: Sofortiges Benutzer-Feedback mit Sonner
- **GDPR-konform**: Einverständniserklärungen für alle Formulare
### Export-System
**PDF-Generation (jsPDF):**
- Professionelle Dokumentenerstellung mit AutoTable
- Deutsche Formatierung für Datum und Währung
- Multi-Page-Support mit automatischem Umbruch
- Tabellen mit Styling und korrekter Ausrichtung
**Excel-Export (ExcelJS):**
- Sichere Alternative zu xlsx (keine Sicherheitslücken)
- Multi-Sheet-Arbeitsmappen mit Styling
- Automatische Spaltenbreitenoptimierung
- Formatierte Zahlen, Datumswerte und Formeln
- TypeScript-first Design
- Strukturierte Datenorganisation
### Datenbankintegration
Das vollständig integrierte Prisma-Schema umfasst:
- **Menüdaten**: 5 Beispielkategorien, 10 Menüitems mit Allergenen
- **Gallery-Integration**: Direkte Verbindung zu gallery_images
- **Allergen-Compliance**: EU-14 Allergenstandard vollständig implementiert
- **Settings-Management**: Persistente Konfigurationen
- **GDPR-Compliance**: Einverständniserklärungen und Audit-Logs
## 🔒 Sicherheit & Datenschutz
### GDPR-Compliance
- Explizite Einverständniserklärungen
- Datenminimierung
- Recht auf Vergessenwerden
- Transparente Datenverarbeitung
### Sicherheitsmaßnahmen
- TypeScript für Typsicherheit
- Zod für Laufzeit-Validierung
- Server Actions für sichere Formulare
- Umgebungsvariablen für sensible Daten
## 🚀 Deployment
### Vercel Deployment
```bash
# 1. Vercel CLI installieren
npm i -g vercel
# 2. Projekt verknüpfen
vercel link
# 3. Umgebungsvariablen setzen (WICHTIG!)
vercel env add DATABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY
vercel env add RESEND_API_KEY
# ... weitere Variablen
# 4. Deployment
vercel --prod
DATABASE_URL (Connection Pooler erforderlich!):
# ❌ FALSCH (Direct Connection - funktioniert NICHT in Vercel):
DATABASE_URL="postgresql://postgres:[PASSWORD]@db.xxx.supabase.co:5432/postgres"
# ✅ RICHTIG (Connection Pooler - für Vercel/Serverless):
DATABASE_URL="postgresql://postgres.xxx:[PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"Weitere erforderliche Variablen:
NEXT_PUBLIC_SUPABASE_URL- Supabase Project URLNEXT_PUBLIC_SUPABASE_ANON_KEY- Supabase Anonymous KeyRESEND_API_KEY- Email-Versand (optional)
📖 Siehe: VERCEL_DATABASE_CONFIG.md für detaillierte Schritt-für-Schritt Anleitung
- Projekt: Strandrestaurant Badezeit Website
- Restaurant: Norbert Mangelsen, info@badezeit.de
- Status: Wiedereröffnung 2025
- Restaurant-Informationen aktualisieren:
/src/app/ueber-uns/page.tsx - Kontaktdaten ändern:
/src/app/kontakt/page.tsx - Speisekarte aktualisieren:
/dashboard/speisekarte- Vollständiges Admin-Interface - Allergene verwalten:
/dashboard/speisekarte(Allergene-Tab) - Menübilder verwalten:
/dashboard/speisekarte(Bilder-Tab) - Analytics exportieren:
/dashboard/analytics(Export-Manager) - Menüeinstellungen ändern:
/dashboard/speisekarte(Einstellungen-Tab) - Bilder hinzufügen: ImageKit CDN + Galerie-Management
Build-Fehler:
- TypeScript:
npm run type-check - Build lokal testen:
npm run build
Datenbank-Probleme:
- Prisma Studio:
npm run db:studio - Schema-Probleme:
npx prisma generate - "Application error" in Produktion: DATABASE_URL prüfen (muss Connection Pooler Port 6543 sein!)
- "too many clients": Connection Pooler verwenden, nicht Direct Connection
Authentifizierung:
- Supabase URL/Keys in Vercel Environment Variables prüfen
- Demo-Login: demouser@badezeit.de / badezeit00
- Session-Probleme: Browser-Cookies löschen
Export-Probleme:
- Browser-Konsole prüfen
- ExcelJS/jsPDF Kompatibilität testen
- Memory-Limits bei großen Exporten beachten
Weitere:
- Formular-Validierung: Zod-Schema-Fehler in Browser-Konsole
- Switch-Komponente fehlt:
npm install @radix-ui/react-switch - Seeding-Fehler:
npm run db:resetfür kompletten Neustart
Dieses Projekt ist urheberrechtlich geschützt und ausschließlich für das Strandrestaurant Badezeit bestimmt.
Strandrestaurant Badezeit - Authentische maritime Küche am Westerland Beach, Sylt Wiedereröffnung 2025