enterspots.com - Technische Dokumentation

Vollständige technische Übersicht für Entwickler - Architektur, APIs, Datenbank-Schema und Implementierungsdetails. Deine Plattform für "YOUR ADVERTISING ON THE LED BOARDS OF THE BIGGEST ARENAS" – erstelle professionelle Werbevideos für deutsche Arenen und Stadien. Einfach, schnell, professionell – keine Erfahrung nötig. Wähle aus professionell gestalteten Templates, optimiert für LED-Boards in deutschen Arenen. Perfekt für Werbetreibende, Agenturen und Marketing-Profis.

Projektübersicht

Projekt-Informationen

Projektname: enterspots.com (Video Rendering Plattform für LED-Boards)
Version: Aktueller Entwicklungsstand (Dezember 2025)
Lizenz: Proprietary
Repository: Private Git Repository (Vite + React + Supabase)
Hauptentwickler: enterspots Engineering
Letzte Aktualisierung: 18. Dezember 2025

Kernfunktionalitäten

  • Template-basiertes Projekt- & Rendering-Management (nexrender)
  • Supabase Auth, Storage, Realtime (Export-Status)
  • Asset-Bibliothek mit Upload, URL-Import & Google-Fonts-Katalog
  • Brand-Kit-Import via Edge Function data-scrapper
  • Credit- und Subscription-System mit Stripe-Billing
  • Export-Sharing & Download über signierte Links
  • Admin-Dashboards für Nutzer, Projekte, Templates, Render-Jobs
  • Maintenance/Landing-Mode-Steuerung per Edge Function
  • Optionaler Background-Removal (BodyPix/remove.bg)
  • Mehrsprachigkeit (de/en) und Theme-Support

Technologie-Stack

  • Frontend: React 18 + TypeScript, gebündelt mit Vite 6
  • UI: Radix UI, Tailwind Utility-Klassen, class-variance-authority
  • Routing: React Router 6 mit Helmet
  • State/Theming: React Context + Custom Hooks, next-themes
  • i18n: i18next + react-i18next (de/en)
  • Backend: Supabase (Postgres, Auth, Storage, Realtime, Edge Functions)
  • Rendering: Nexrender/After Effects Worker (Scripts unter nexrender-scripts/worker2)
  • Payments: Stripe über Supabase Edge Functions
  • ML/AI: TensorFlow.js BodyPix + optional remove.bg API; KI-Proxies (Mistral/Gemini/Groq)
  • Tools: Terser-Minifizierung, manuelle Rollup-Chunks, Sitemap-Prebuild

Systemarchitektur

Architektur-Diagramm

Frontend Layer Modernes JavaScript-Framework UI-Komponenten & Styling API Gateway & Edge Functions Auth Service Payment Integration User Management Asset Service File Processing Storage Management Rendering Service Video Rendering Engine Professional Tools Cloud Database (PostgreSQL + Storage + Auth) External Services: Payment, Fonts, Media, CDN

Frontend-Architektur

Framework: Modernes JavaScript-Framework
Language: TypeScript
Build Tool: Moderne Build-Pipeline
State Management: Context-basiertes System
Routing: Client-side Routing
Styling: Utility-first CSS Framework
UI Components: Moderne Komponenten-Bibliothek
Internationalisierung: Multi-Language Support

Backend-Architektur

Platform: Cloud-basierte Backend-Plattform
Database: Relationale Datenbank
Authentication: Moderne Auth-Services
Storage: Cloud Storage
Functions: Serverless Functions
Real-time: Real-time Datenbank-Features
API: REST-basierte APIs

Frontend-Implementierung

Frontend-Komponenten-Struktur

Echte Struktur (src/)
📁 components (UI, FEATURES, PROJECTS, EXPORTS, ADMIN, BRANDKIT)
📁 pages (LandingPage, AccountDashboard, ExportsAndShares, UserBookingPage, PartnerPage, ProductsHelp …)
📁 contexts (AuthContext, FontContext, ExportCompletionContext)
📁 hooks (useAppData, useBrandKits, useUnsavedChanges, useDynamicFavicon, use-toast)
📁 services (renderService, stripeService, dynamicPackageService, uploadService, storageStatsService)
📁 lib (supabase Client, utils, storageUtils, tensorflow-init, partnerService)
📁 locales (de/en, i18n-Initialisierung)
📁 app & types (Supabase-Typen, Subscription-Typen, globale Types)

Hinweis: Nur aggregierte Struktur, proprietäre Details bleiben ausgeblendet.

Hauptkomponenten

  • App-Routing via AppRoutes & MainLayout (Theme, Navigation)
  • Projekt-Detailfluss (ProjectDetail, ProjectForm, Template-Auswahl)
  • Asset- & Upload-Komponenten (z.B. ImageUploadField, Video/Audio/PDF-Handling)
  • Brand-Kit-Formular & Daten-Importer (Edge Function data-scrapper)
  • Export-Liste, Export-Sharing & ExportCompletionModal mit Realtime
  • Admin-Views (Templates, Nutzer, Projekte, Render-Jobs, Analytics)
  • Landing-, Partner-, Buchungs- und Hilfeseiten (statische Routen)

Komponentennamen aus dem Code übernommen; sensible Details bleiben ausgeblendet.

State Management & Hooks

  • AuthContext (Supabase Session, Rollen)
  • FontContext (Google-Fonts-Katalog & Auswahl)
  • ExportCompletionContext (Realtime-Export-Modal)
  • useAppData (Projekte, Templates, Maintenance-Status, Realtime)
  • useBrandKits / useDynamicFavicon / useUnsavedChanges
  • Toast-System (use-toast + Sonner), Theme via next-themes

Hooks und Contexts entsprechen dem aktuellen Code-Stand.

Routing & Navigation

Routing-System:
  • React Router 6 (BrowserRouter)
  • Routen: /products-help (statisch), sonst Wildcard auf App
  • Rollen-/Session-Checks über AuthContext in geschützten Views
  • Helmet für Meta-Tags, i18n für Texte

Routing-Setup laut src/main.tsx und components/ROUTING/AppRoutes.tsx.

State Management

State Management:
  • Context + lokale State Hooks
  • Realtime-Updates über Supabase Channels (Exports)
  • Persistenz für gezeigte Exporte via LocalStorage
  • Theme-Persistenz über next-themes

Implementierung deckt sich mit AppContent und den Contexts.

Asset Upload System

Unterstützte Dateitypen:
Images: PNG, JPEG, GIF, SVG
Videos: MP4, QuickTime, AVI, WebM
Dokumente: PDF (Preview-Unterstützung)
Upload-Funktionalität:
  • Drag & Drop und klassische Upload-Buttons
  • URL-basierter Import (inkl. Download über Edge Function)
  • Supabase Storage mit signierten URLs
  • Progress-Tracking & Storage-Limits (Prüfung vor Render)
  • Google-Fonts-Katalog aus Supabase Storage (basic/google_fonts.json)

Upload-Logik gem. ImageUploadField, uploadService und Supabase Storage.

Typography System

Font-Integration:
  • Google Fonts JSON aus Supabase Storage
  • Lazy Loading & Caching im Frontend
  • Font-String-Aufbereitung für After Effects (Render-Pipeline)
  • Custom Fonts via Upload/Storage möglich
  • Brand-Kit-Integration inkl. Farb-/Logo-Extraktion

Siehe useFonts, renderService (Font-Handling) und Brand-Kit-Komponenten.

Backend-Implementierung

Backend Services & Edge Functions

Supabase-Backend mit Postgres, Auth, Storage, Realtime und Edge Functions:

  • Stripe Billing: create-stripe-checkout, get-stripe-products/-prices, get-stripe-invoices-and-transactions, stripe-webhook
  • Credits: credits-management, reserve-credits, release-credits, dynamic-credits-management, cleanup-stale-reservations
  • Rendering/Proxy: external-api-proxy (Jobs, KI-Proxies, Google Fonts, Nexrender Secret)
  • Exports & Sharing: export-share (create/download Tokens)
  • Content/Branding: data-scrapper, download-image
  • System: get-maintenance-mode, get-landing-page-display-mode, request-early-access, get-package-prices
  • Admin: admin-get-users, admin-update-user-role/-status, admin-delete-user, delete-user

Edge-Functions laut Ordner supabase/functions; sensible Keys/Responses bleiben geschützt.

Rendering Service

Rendering-Pipeline:
  • Nexrender/After Effects Worker über Edge Function external-api-proxy/jobs
  • Template-Assets (AEP/AEPX) + sortierte Layer/Fonts für AE
  • Storage-Limit-Check vor Preview/Export (storageUtils.validateRenderExport)
  • Job-Start mit Supabase Session (Bearer) und optional Debug-Logging (VITE_DEBUG_RENDER)
  • Realtime-Status via Supabase Channel exports-<userId> (abschaltbar mit VITE_DISABLE_REALTIME)
  • Fallback: Polling & lokale Duplikats-Prävention (LocalStorage-Tracking)

Payment Integration

Payment Processing:
  • Stripe Checkout & Billing über Edge Functions
  • Dynamische Produkte/Preise (create-dynamic-product, create-dynamic-checkout)
  • Credit-Reservierung/Freigabe gekoppelt an Stripe-Status
  • Invoice/Transactions Abruf (get-stripe-invoices-and-transactions)
  • Webhook-Handling (stripe-webhook)

Provider: Stripe; Supabase Service Role nur in Edge Functions.

External API Integrations

External API Integrationen:
  • KI-Proxies über external-api-proxy/gemini (Mistral > Gemini > Groq Fallback)
  • Google Fonts API (Edge), Fonts-Katalog in Supabase Storage
  • Remove.bg (optional, Frontend) & BodyPix im Browser
  • Brand-Daten-Scraping (data-scrapper) & Remote-Download (download-image)
  • Security: Auth-Bearer Pflicht, Secrets nur serverseitig (Service Role)

Alle externen Aufrufe laufen über Edge Functions oder nutzen signierte URLs.

API-Dokumentation

Authentifizierungs-System

Supabase Auth + RLS bilden die Basis für alle API-Aufrufe.

  • E-Mail/Passwort via Supabase Auth
  • JWT-basierte Session (Client: @supabase/supabase-js)
  • Context-gestütztes Session/Rollen-Handling im Frontend
  • RLS-Policies in Postgres schützen alle Tabellen

Alle Edge Functions verlangen Bearer-Tokens; Service-Role-Schlüssel wird nur serverseitig genutzt.

Asset Management

Assets liegen in Supabase Storage, Metadaten in Postgres.

  • Uploads mit Progress + Storage-Limit-Prüfung
  • URL-/Remote-Import via Edge Function download-image
  • Google-Fonts-Katalog aus Supabase Storage (JSON)
  • Suche/Filterung und Metadaten in assets
  • Signierte URLs für Previews/Downloads

Implementierung in uploadService.ts, ImageUploadField und Supabase Storage Policies.

Rendering-System

Rendering läuft über Nexrender Worker, angesteuert durch Supabase Edge Function.

  • Job-Anlage via external-api-proxy/jobs mit Supabase Session
  • Template-Assets inkl. Fonts/Color Mapping für After Effects
  • Realtime-Status: Channel exports-... ; Fallback Polling
  • Export-Download & Sharing über Edge Function export-share
  • Credit-Reservierung vor Start, Freigabe bei Fehlern

Siehe renderService.ts und Supabase Function external-api-proxy.

Brand Kit System

Automatische Brand-Extraktion + manuelle Pflege.

  • Website-Scraping via Edge Function data-scrapper
  • Logo/Icon Download über download-image
  • Google-Fonts-Integration inkl. Gewicht/Style-Mapping
  • Speicherung in brand_kits + brand_kit_assets
  • Integration in Templates (Farben/Fonts) und Previews

Logik in BrandKitForm, useBrandKits und den genannten Edge Functions.

Backend Services & APIs

Edge-Functions (Supabase) bilden die API-Oberfläche:

  • Zahlungen: Stripe Checkout/Products/Invoices, Webhooks
  • Credits: Reservieren, Freigeben, dynamische Pakete
  • Rendering & AI Proxy: external-api-proxy (Jobs, KI, Fonts)
  • Exports: Erstellen & Teilen per Token (export-share)
  • System: Maintenance/Landing Mode, Early Access Requests
  • Admin: User/Project Management, Rollen/Status

Alle Endpunkte erfordern Supabase Auth; Service Role bleibt serverseitig.

Datenbank-Schema

Datenbank-Struktur (Übersicht)

Die folgende Übersicht zeigt die Hauptentitäten des Systems. Spezifische Feldnamen, Beziehungen und Constraints sind vereinfacht dargestellt.

Tabelle Beschreibung Hauptfelder
profiles Benutzer-Profile id, email, full_name, role, theme_preference, ████████████████_id, package_id
projects Video-Projekte id, user_id, template_id, name, configuration (jsonb), status, created_at
assets Medien-Assets id, user_id, folder_id, filename, type, size, metadata, storage_path
templates Video-Templates id, name, category_id, slug, settings (jsonb), preview_url, is_active
purchased_exports Rendering-Exports id, user_id, project_id, status, zip_path, format_details, created_at
brand_kits Markenidentitäten id, user_id, company, website, font, font_color, created_at
brand_kit_assets Brand Kit Assets id, brand_kit_id, type, name, value, crop_data, original_value_url
credits Credit-Konten id, user_id, amount, type, format, resolution, reserved_amount
credit_transactions Credit-Transaktionen id, user_id, amount, type, credit_type, description, project_id
packages Abonnement-Pakete id, name, ████████_product_id, ████████_price_id, features (jsonb)
categories Template-Kategorien id, name, slug, description_de, description_en, export_formats (jsonb)
export_formats Export-Formate id, format_name, width, height, codec, fps, duration, category
export_share_links Export-Sharing-Links id, export_id, █████, expires_at, created_by
arenas Arenen & Kategorien id, name, location, address, timezone, is_category, parent_category_id
arena_boards LED-Boards id, arena_id, name, pixel_width, pixel_height, aspect_ratio, price_per_minute
arena_events Veranstaltungen id, arena_id, event_name, event_type, start_time, end_time, status
board_bookings Board-Buchungen id, user_id, event_id, board_id, project_id, video_url, status, price
arena_api_keys API-Schlüssel id, arena_id, name, █████, ██████████, permissions, rate_limit_per_hour
api_logs API-Logs id, api_key_id, endpoint, method, request_data, response_status, execution_time_ms
contact_inquiries Kontaktanfragen id, first_name, last_name, email, subject, message, status, priority
partner_inquiries Partner-Anfragen id, company_name, contact_name, email, phone, message, status
notifications Benachrichtigungen id, user_id, type, title, message, read, created_at

Datenbank-Beziehungen

Datenbank-Beziehungen:
  • Benutzer haben mehrere Projekte
  • Projekte haben mehrere Assets
  • Projekte sind mit Templates verknüpft
  • Benutzer können mehrere Brand Kits haben
  • Komplexe Many-to-Many Beziehungen für Kollaboration

Spezifische Join-Tabellen, Foreign Keys und Constraints sind proprietär.

Row Level Security (RLS)

Sicherheitsrichtlinien:
  • Benutzer-spezifische Datenisolation
  • Rollenbasierte Zugriffskontrolle
  • Projekt-basierte Berechtigungen
  • Admin-Rechte-Management
  • Multi-Tenant-Sicherheit

Spezifische RLS-Policy-Implementierungen sind geschützt.

Deployment & Infrastructure

Build & Deployment Pipeline

Frontend Build (Vite):
  • TypeScript-Compilation + React-Bundling
  • Rollup manualChunks (Radix/UI) + dedupe React
  • Terser mit drop_console/drop_debugger, Target esnext
  • OptimizeDeps: TensorFlow Backends + BodyPix
  • Sitemap-Generation als Prebuild-Script (npm run generate-sitemap)
  • Preview via npm run preview; Dev via npm run dev
Build & Deployment:
  • Supabase Edge Functions via Supabase CLI (siehe Ordner supabase/functions)
  • SQL-Migrationen unter supabase/migrations, Basisschema supabase_schema.sql
  • Nexrender-Worker-Skripte separat unter nexrender-scripts/worker2 ausrollen
  • Keine PWA/Service-Worker im aktuellen Build

Details laut vite.config.ts und npm Scripts; Infrastruktur-Setup bleibt intern.

Environment Configuration

Frontend (.env / Vite):
  • VITE_SUPABASE_URL
  • VITE_SUPABASE_ANON_KEY
  • VITE_STRIPE_PUBLISHABLE_KEY
  • VITE_GOOGLE_FONTS_API_KEY (optional, Warnflagge: VITE_WARN_MISSING_GOOGLE_FONTS)
  • VITE_REMOVE_BG_API_KEY (optional, für remove.bg)
  • VITE_DISABLE_REALTIME (optional, z.B. Tests)
  • VITE_DEBUG_RENDER (optional Debug-Logging für Render-Service)
Backend (Edge Functions):
  • SUPABASE_URL / SUPABASE_ANON_KEY / SUPABASE_SERVICE_ROLE_KEY
  • STRIPE_SECRET_KEY / STRIPE_WEBHOOK_SECRET
  • GOOGLE_FONTS_API_KEY
  • MISTRAL_API_KEY / GEMINI_API_KEY / GROQ_API_KEY (KI-Proxies)
  • NEXRENDER_API_SECRET (Rendering Proxy)
  • CLEANUP_SECRET (für cleanup-stale-reservations)
  • SITE_URL (Stripe Success/Cancel Redirects)

Performance Optimierungen

  • Code-Splitting via manualChunks (Radix/UI)
  • Terser-Minifizierung + Entfernen von Konsole/Debugger
  • Lazy Loads in Feature-Komponenten, dedup React
  • Supabase Storage Signierung statt öffentlicher Buckets
  • Realtime optional abschaltbar für Low-Bandwidth-Setups

Monitoring & Analytics

  • Supabase Logs/Dashboards für Edge Functions und DB
  • Frontend-Logging (konsole) optional per VITE_DEBUG_RENDER
  • Render-Job Status Monitoring im Admin-Bereich
  • API-Response Monitoring über Supabase Log Explorer
  • Weitere APM/Analytics können extern angebunden werden

Security Measures

Frontend Security:
  • Keine Secrets im Frontend-Bundle (nur Anon-Key)
  • Supabase Session Tokens im Memory/LocalStorage
  • Sanitizing im Render-Proxy (Pfadbereinigung)
  • Theme/Display Modes ohne Inline-Skripte
Backend Security:
  • Row Level Security (RLS) auf allen Kern-Tabellen
  • JWT-Validierung in Edge Functions (Supabase Client)
  • Secrets nur serverseitig (Service Role, Stripe Keys, KI Keys)
  • CORS-Handling in Edge Functions
  • Fehlermeldungen werden im Proxy bereinigt (keine Pfade)

Detaillierte Features

Brand Kit Generator

Funktionalität:
  • Automatische Extraktion via Edge Function data-scrapper
  • Farbpaletten- & Icon/Logo-Erkennung (Download über download-image)
  • Font-Erkennung aus CSS + Google-Fonts-Katalog
  • Manuelle Pflege der Brand-Kit-Felder
  • Übernahme der Brand-Daten in Templates/Projekte
Technologie: Supabase Edge Functions, Frontend-Verarbeitung (JS/TS)

Asset Library

Funktionalität:
  • Ordnerstruktur für Assets (Supabase Storage + DB)
  • Drag & Drop Upload
  • URL-Import (externe Services, externe URLs)
  • Batch-Upload mit Progress
  • Asset-Vorschau (Bilder, Videos, PDFs)
  • Asset-Suche & Filterung
  • Storage-Statistiken
Unterstützte Formate: JPEG, PNG, GIF, SVG, PDF, MP4, QuickTime, AVI, WebM

Video Rendering Pipeline

Funktionalität:
  • Nexrender/After Effects Integration über Edge Function
  • Konfigurierbare Layer/Assets (Sortierung für AE)
  • Preview/Export mit Credit-Prüfung
  • Progress-Tracking (Realtime-Channel) + Polling-Fallback
  • Export-Download & Sharing mit Token
Formate: Standard-Videoformate entsprechend Template/Export-Formaten

Credit & Subscription System

Funktionalität:
  • Dynamisches Credit-Management (Edge Functions)
  • Credit-Reservierung/Freigabe an Render-Status gekoppelt
  • Stripe-Checkout & Billing (Produkte/Preise dynamisch)
  • Package-basierte Subscriptions + Transactions/Invoices
  • Credit-Transaktions-Historie in credit_transactions
  • Automatische Freigabe bei Fehlern oder Cleanup
Integration: Stripe Webhooks + Supabase Functions + DB Trigger

Background Removal

Funktionalität:
  • BodyPix (TensorFlow.js) für Segmentierung im Browser
  • Optionaler remove.bg Call bei konfiguriertem API-Key
  • Fallback/Checks bei fehlendem Key
  • WebGL-Backend, CPU-Fallback
Technologie: TensorFlow.js Backends, optional externer remove.bg Service

Admin Dashboard

Funktionalität:
  • User Management (Rollen/Status, Delete)
  • Template-Verwaltung & Projekteinsicht
  • Render-Job Monitoring (Status, Polling/Realtime)
  • Storage Overview + Credits
  • System Settings (Maintenance/Landing Mode)
  • Contact/Partner Inquiries Übersicht
Berechtigungen: Role-based Access Control (Admin, Moderator, User)

Partner API

Funktionalität:
  • Tabellen für Arenen/Boards/Bookings vorbereitet
  • API-Key-Management & Logging als Datenmodell vorhanden
  • Aktuell intern/prototypisch – keine öffentliche API-Doku
Status: Internes/Prototyp-Feature (noch nicht öffentlich ausgerollt)

Real-time Updates

Funktionalität:
  • Supabase Realtime Channel für Export-Status
  • Export-Completion Modal bei Statuswechsel (finished)
  • Deaktivierbar via VITE_DISABLE_REALTIME für Tests
  • Lokale Deduplikation angezeigter Exporte
Technologie: Supabase Realtime (WebSocket), optional Polling