Referenz
Lucky-Fitness – öffentliches Frontend mit Echtzeit-Features & API-Anbindung
Referenz:
Lucky-Fitness – öffentliches Frontend mit Echtzeit-Features & API-Anbindung
Das öffentliche Frontend unter luckyfitness.de wurde vollständig mit Symfony umgesetzt und ist direkt an die Verwaltungs-API angebunden. Alle Inhalte der Studios, Seiten, Bilder und Einstellungen werden in Echtzeit über API Platform bezogen.
Kundennutzen:
Moderne Online-Präsenz für dynamische Fitnessmarke:
Das Lucky-Fitness-Frontend kombiniert technische Effizienz mit maximaler redaktioneller Freiheit. Dank API-Anbindung werden Inhalte in Echtzeit gesteuert – mit voller Kontrolle über Darstellung, SEO und Live-Daten. Ideal für wachsende Studio-Ketten, die ihre Marke professionell im Web präsentieren wollen.
Details:
– Zentrale Seitenpflege mit SEO-Fokus und API-Sync –
Ansicht:
Die Seite zeigt die zentrale Übersicht aller verwalteten Seiteninhalte im öffentlichen Frontend – gegliedert in::
- Typ (z.B. public oder studio)
- Seitenname
- SEO-Einstellungen: no-follow, no-index
- Social-Media-Markierungen (FB, X)
- Seitentitel und kurzer SEO-Content
- API-Statusanzeige (grün = synchronisiert)
Beschreibung:
Für das öffentliche React-Frontend von LuckyFitness.de entwickelte ich eine skalierbare Seitenverwaltung mit direkter API-Anbindung. Die SEO-relevanten Felder wie Titel, Meta-Description, Indexing-Verhalten und Open Graph-Optionen lassen sich für jede Seite zentral pflegen – sowohl für allgemeine Inhalte als auch für Standortseiten. Jede Änderung wird live an das Frontend übertragen, wodurch eine stets aktuelle und suchmaschinenoptimierte Darstellung gewährleistet ist. Die Komponente wurde vollständig von mir konzipiert, entwickelt und in das API-System integriert.
Funktionsbeschreibung:
Diese Übersicht ermöglicht die zentrale Pflege aller SEO-relevanten Inhalte im Frontend – sowohl global (z.B. Startseite, Impressum) als auch lokal (Studio-Unterseiten).
Funktionen:
- Pflege von SEO-Metadaten (Titel, Description)
- Aktivierung/Deaktivierung von noindex/nofollow
- Zuordnung zu Studio- oder öffentlichen Seiten
- Sichtbarkeit für Social Media (Open Graph für Facebook/X)
- Automatische API-Synchronisation mit dem öffentlichen React-Frontend
- Validierung und API-Synchronisierung direkt beim Speichern
Vereinheitlichung der Darstellung & SEO-Wartung bei vielen Standorten
– Redaktionelles Startseiten-Carousel mit Drag & Drop –
Ansicht:
Die Ansicht zeigt die redaktionelle Verwaltung des Startseiten-Carousels von LuckyFitness.de.
Zu sehen sind mehrere Slider-Einträge mit:
- Vorschaubild
- Titel & Untertitel (z.B. „Dein Körper – dein Training“, „Muskeln aufbauen“, „Grenzen überschreiten“)
- Buttons: Bearbeiten (grün), Löschen (rot)
- Drag & Drop-Icon zum Umordnen
Beschreibung:
Für die visuelle Hauptbühne auf der Startseite entwickelte ich ein intuitives Carousel-Modul, das komplett über das CMS gepflegt werden kann. Slides lassen sich hinzufügen, bearbeiten oder löschen – inklusive Vorschaubild, Text und Reihenfolge per Drag & Drop. Die Einträge sind sofort mit dem React-Frontend synchronisiert, was eine schnelle und gezielte Kampagnensteuerung ermöglicht. Das Carousel ist mobil optimiert und nahtlos in die Seite integriert. Die gesamte Umsetzung – von Datenmodell bis Frontend-Integration – stammt von mir.
Funktionsbeschreibung:
Mit dieser Oberfläche können Redakteur:innen die Inhalte des Startseiten-Carousels komplett eigenständig pflegen.
Funktionen:
- Slider hinzufügen, bearbeiten, löschen
- Titel & Bild pro Slide definieren
- Drag & Drop zur Reihenfolgeanpassung
- Direkte API-Verknüpfung zum React-Frontend (Slider ist live synchronisiert)
- Möglichkeit, das Carousel temporär zu deaktivieren (z.B. bei Sonderaktionen)
Ideal für Kampagnen, Slogans, Trainingsangebote oder saisonale Banner.
– Live-Auslastung im Frontend – visuell und API-gesteuert –
Ansicht:
Diese Seite zeigt die technischen Einstellungen für das Frontend von LuckyFitness.de, insbesondere:
- Live-Auslastung („Clubconnector“)
- API-Key, Endpoint-URL, Update-Intervall (z.B. 60 Sekunden)
- Visualisierung per Live-PieChart
- Anzeige der letzten Aktualisierungszeit (optional)
- PieChart-Konfiguration
- Farben für aktive/inaktive Zonen
- Tooltip-Texte & Platzierung
- Start-/Endwinkel, Innenradius
Beschreibung:
Für das React-Frontend von LuckyFitness.de entwickelte ich eine Lösung zur Anzeige der aktuellen Studioauslastung – basierend auf Live-Daten von Clubconnector. Die Anzeige erfolgt als dynamisches PieChart, dessen Farben, Tooltips und Formatierungen vollständig konfigurierbar sind. Admins können Update-Intervalle, API-Keys und Anzeigeoptionen direkt im Backend anpassen. Diese Funktion verbessert nicht nur die Benutzerfreundlichkeit auf der Website, sondern trägt auch zur Besuchssteuerung und Mitgliederzufriedenheit bei. Die gesamte Integration – von der API-Anbindung bis zur interaktiven Darstellung – stammt vollständig aus meiner Entwicklung.
Funktionsbeschreibung:
Diese Komponente steuert die Live-Datenanzeige zur Studioauslastung, kombiniert mit individuellen Visualisierungen.
Funktionen:
- Konfiguration des Live-Datenimports über „Clubconnector“-API
- Anzeige von Studioauslastung in Echtzeit auf der Website (Pie-Chart)
- Anpassung von Farben, Tooltips, Beschriftung und Darstellung
- Modular aufgebaut – auch verwendbar für andere Live-Daten (z.B. Kursauslastung, Gerätebelegung)
Übersichtliche Slider-Konfiguration für verschiedene Seitentypen
– Carousel-Slides individuell gestalten –
Ansicht:
Diese Seite zeigt die Bearbeitung eines einzelnen Carousel-Slides auf der Startseite von LuckyFitness.de.
Bearbeitbare Felder:
- First Title (z.B. „LuckyFitness.de“)
- Headline
- Subtitle (optionaler Untertitel)
- Extra CSS (z.B. object-position für Bildfokus)
- Höhe des Sliders (in vh)
- Intervall für die Slide-Anzeige (z.B. 10000ms)
- Bildvorschau mit Austausch-Button
Beschreibung:
Für das flexible Carousel auf der Startseite von LuckyFitness.de habe ich eine intuitive Eingabemaske geschaffen, mit der sich jeder Slide individuell gestalten lässt. Titel, Bild, Höhe, Anzeigeintervall und sogar CSS-Eigenschaften können pro Slide definiert werden. Dadurch entstehen gezielte visuelle Botschaften – perfekt für Kampagnen oder saisonale Themen. Alle Änderungen werden direkt ins React-Frontend übertragen und sofort sichtbar gemacht. Diese Komponente habe ich vollständig umgesetzt – mit Fokus auf Designfreiheit, einfache Bedienbarkeit und schnelle Wirkung.
Funktionsbeschreibung:
Dieses Modul erlaubt die gezielte Pflege einzelner Slider-Elemente im Startseiten-Carousel.
Funktionen:
- Visuelle Gestaltung direkt im CMS
- Unterstützung von HTML in Textfeldern
- Individuelle Stylingoptionen über CSS-Eingabefeld
- Steuerung von Anzeigeintervall und Bildhöhe
- Austauschbare Bildinhalte mit Vorschau
Ideal für gezielte Kampagnen, Studio-Werbung oder Branding.
– Startseiten-Slider mit responsivem Verhalten und Live-Steuerung –
Ansicht:
Die Ansicht zeigt die vollständige Konfigurationsmaske für den Startseiten-Slider im öffentlichen Frontend von LuckyFitness.de.
Einstellbare Parameter:
- Verhalten: autoplay, arrows, rewind, drag, keyboard, pagination, lazyLoad, pause on hover/focus
- Slider-Typ: Splide
- Geschwindigkeit, Intervall, Slides pro Seite/Bewegung
- Responsives Verhalten über Breakpoints (1400, 1100, 700 px) mit individuellen Layouts
- Padding, Gaps, Slides per Page
Beschreibung:
Für das öffentliche LuckyFitness-Frontend entwickelte ich ein konfigurierbares Slider-Modul für die Startseite. Admins können das Verhalten des Sliders detailliert steuern: Animationen, Geschwindigkeit, Autoplay, Intervall, Pausenverhalten, Navigationstypen – alles ohne Code. Zusätzlich können Breakpoints für Mobil-, Tablet- und Desktop-Ansichten hinterlegt werden, inkl. Slides-per-Page, Gaps und Padding. Das System ist API-gestützt und sofort live – ideal für dynamische Inhalte und Kampagnen. Die Umsetzung erfolgte vollständig durch mich – modular, flexibel und nahtlos integriert ins CMS und React-Frontend.
Funktionsbeschreibung:
Mit dieser Komponente können Administrator:innen das Verhalten des Startseiten-Sliders visuell und technisch exakt anpassen.
Eigenschaften:
- Vollständige Steuerung der Slider-Logik (Autoplay, Pause, Keyboard-Navigation etc.)
- Responsives Verhalten über definierte Breakpoints
- Padding & Abstand pro Bildschirmgröße
- API-gesteuerte Integration ins öffentliche Frontend (z.B. React oder Vue)
- Echtzeit-Aktualisierung ohne Codezugriff
Besonders nützlich für saisonale Kampagnen, Studioaktionen oder regionale Promotion-Elemente.
– Detaillierte SEO- & Social-Media-Steuerung für Seiten –
Ansicht:
Diese Seite erlaubt die Bearbeitung aller SEO- und Social-Media-relevanten Felder für eine einzelne Seite – in diesem Fall die Startseite von LuckyFitness.de.
Folgende Felder und Optionen sind enthalten:
- no-index / no-follow (Schalter)
- SEO-Titel, Prefix/Suffix und Beschreibung
- Open Graph-Einstellungen (FB/X)
- OG-Type, Titel, Beschreibung
- OG-Bild (z.B. Logo oder Bildausschnitt, 1200×627px)
- Facebook-App-ID & Admins
- Twitter/X Card-Typ, Site, Creator
Beschreibung:
Zur gezielten Optimierung jeder einzelnen Seite habe ich ein konfigurierbares Modul entwickelt, das alle relevanten SEO- und Open-Graph-Daten zentral verwaltet. Die Daten beeinflussen sowohl die Suchmaschinendarstellung (Google-Snippets) als auch die Vorschau bei der Verlinkung auf Social-Media-Plattformen wie Facebook oder X (Twitter). Jede Änderung wird automatisch über die API an das öffentliche Frontend übertragen. Das macht die Lösung besonders effizient für Plattformen mit vielen Seiten oder Standorten. Die Komponente wurde vollständig von mir umgesetzt – mit Fokus auf Sichtbarkeit, Branding und automatisierte Integration.
Funktionsbeschreibung:
Mit dieser Komponente kann jede Seite des Frontends gezielt suchmaschinenoptimiert und social-media-kompatibel gemacht werden.
Funktionen:
- Optimierte Vorschau in Google (Title, Description)
- Darstellung von Link-Vorschauen bei Facebook & X (Twitter) über OG-Daten
- Steuerung, ob eine Seite indexiert oder gecrawlt werden darf
- Verwaltung der SEO-Daten zentral über das Backend
Echtzeit-Synchronisation der Änderungen über die API ins öffentliche React-Frontend
Datenschutz
Kontakt
E-Mail:
kontakt@wiecker.eu
LinkedIn:
Profil ansehen
GitHub:
Profil ansehen
Standort:
Wernigerode, Deutschland