← Alle Artikel
EventsNext.js 16SVG

Event-Management: Gäste-Portal, SVG-Raumplaner und DJ-Interface

17. März 2026 · 10 Min. Lesezeit

MeinEvent ist eine Event-Management-Plattform für Hochzeiten, Geburtstage und Firmenfeiern. 15 Dashboard-Module, ein Gäste-Portal das Besucher lieben, ein DJ-Interface für die Musik und ein professioneller SVG-Raumplaner für Sitzordnungen.

Dashboard: 15 Module

Organisatoren haben Zugriff auf diese Module pro Event:

ModulFunktion
ÜbersichtKPIs: Zusagen, Absagen, Ausstehend, Budget
GästelisteEinladungen, RSVP-Status, Diätpräferenzen
FotosGalerie mit Likes (Supabase Storage)
MusikMusikwünsche und Voting-Ergebnisse
GästebuchNachrichten mit optionalen Bildern
AblaufplanTimeline der Event-Aktivitäten
MenükarteMenüoptionen mit Diät-Filtern
SitzplanSVG-Raumplaner mit Drag-and-Drop
BudgetAusgaben tracken und kategorisieren
AufgabenTo-Do-Liste mit Deadlines
DienstleisterKontakte, Verträge, Angebote
KommunikationNachrichten an alle Gäste
ExportDaten als CSV/Excel exportieren
AnalyticsEchtzeit-Statistiken
EinstellungenEvent-Details, Branding, QR-Code

Gäste-Portal: 9 Tabs

Gäste betreten das Portal über einen 6-stelligen Event-Code oder QR-Code – ohne Account. Das mobile-optimierte Portal bietet:

  • Home – Event-Banner, Countdown, Quick-Actions
  • RSVP – Zusage/Absage mit Begleitpersonen und Diätinfos
  • Fotos – Bilder hochladen und andere liken
  • Musik – Songs vorschlagen und für andere voten
  • Gästebuch – Nachrichten hinterlassen
  • Ablauf – Tagesablauf mit Uhrzeiten
  • Menü – Was gibt's zu essen?
  • Anfahrt – Maps-Integration
  • Info – Dresscode, Geschenkwünsche, FAQ

SVG-Raumplaner

Der Raumplaner ist ein high-fidelity SVG-basiertes System:

  • 1:1 Rastereinheiten: 100 Einheiten = 1 Meter (50cm/1m Dual-Raster)
  • Wände als Vektorsegmente mit groupId für synchronisierten Gruppentransport
  • Parametrische Raumvorlagen – proportionserhaltend bei verschiedenen Maßen
  • Magnetisches Endpoint-Snapping für saubere Verbindungen
  • Tische mit individuellen Stühlen (JSONB configuration für Stuhlpositionen)
  • Gäste zuweisen: Drag-and-Drop von der Gästeliste auf Stühle

DJ-Interface

Ein extra Portal für DJs und Musiker (/dj). Zugang über den event_code. Zeigt die Live-Musikwünsche mit Voting-Ergebnissen. Dark Mode optimiert für abgedunkelte Partyumgebungen.

SaaS-Architektur

  • Admin-Dashboard (/admin) – Plattform-weite Eventübersicht, User-Statistiken, Stripe-Monitoring
  • Stripe: „Single Event" (einmalig) vs. „Pro" (Subscription)
  • OAuth: Google + GitHub Login
  • Demo-Modus: Vollständiger Showcase ohne Account

Tech Stack

  • Frontend: Next.js 16 (App Router), TypeScript, Tailwind CSS v4, Shadcn/UI
  • Backend: Supabase (PostgreSQL + Auth + Storage + Realtime)
  • Payments: Stripe (Checkout + Subscriptions + Webhooks)
  • E-Mail: Custom SMTP (Nodemailer) + React Email
  • Animationen: Framer Motion
  • QR-Codes: qrcode.react

→ Projekt ansehen: MeinEvent – Projektdetails

→ Live: meinevent.app