SaaS-Fallstudie

TopFloor-Trends

Eine Full-Stack-Plattform, die aus einem langen Video eine Woche lang Kurzform-Beiträge generiert, diese in allen Netzwerken plant, in denen der Creator veröffentlicht, und parallel dazu die bezahlte Kampagne aufbaut – ohne das Dashboard verlassen zu müssen.

  • BrancheCreator and marketing SaaS
  • BenutzerCreators, marketers and agencies
  • AutomatisierungQueue processed every 15 minutes
  • DienstleistungenProduct Design, Development, AI
TopFloor-Trends: Automatisierung von Inhalten durch KI

Überblick

TopFloor Trends ist eine Content-Management-Plattform für Creator und Marketingfachleute. Hier können Sie an einem Ort lange Videos in kurze Clips schneiden, die Vorschaubilder gestalten, die Beiträge für alle Plattformen in die Warteschlange stellen und bezahlte Kampagnen parallel zu den organischen Kampagnen schalten.

Die Arbeit deckt den gesamten Stack ab: eine KI-Pipeline, die ein Quellvideo auswertet und Segmente vorschlägt, die es wert sind, herausgeschnitten zu werden, eine Planungswarteschlange, die alle fünfzehn Minuten durch einen Cron-Job gesteuert wird, ein Thumbnail-Studio, das auf Eingabeaufforderungen und Vorlagen basiert, sowie einen Google-Ads-Assistenten, der anhand einer Kurzbeschreibung in weniger als einer Minute eine Live-Kampagne erstellt.

Jede dieser Integrationen unterliegt den Ratenbeschränkungen, dem Authentifizierungsmodell und dem Upload-Protokoll eines anderen Anbieters – genau darauf entfiel der größte Teil der technischen Arbeit, und darum geht es auch in dem Abschnitt ganz unten auf dieser Seite.

  • Next.js 15
  • React 19
  • Tailwind CSS
  • Firebase
  • NextAuth
  • OpenAI API
  • Google Ads API
  • YouTube API
  • TikTok API
  • Spotify API
  • Stripe Payments
  • Vercel Cron

Projektvideo

topfloor-trendsEin Video ist fertig. Eine Woche voller Beiträge ist vorbei.

Ein Überblick über „TopFloor Trends“ – von einer eingefügten YouTube-URL über eine geplante Woche mit Clips bis hin zu einer laufenden Google-Ads-Kampagne.

Kernfunktionen

  • Erstellung von Clips mithilfe künstlicher Intelligenz

    Fügen Sie eine YouTube-URL ein, und das Modell analysiert das Video und gibt anschließend die Segmente zurück, die sich zum Ausschneiden eignen, zusammen mit Themen und Zeitstempeln zur weiteren Verfeinerung.

  • Plattformübergreifende Terminplanung

    Eine Warteschlange, über die Beiträge auf TikTok, YouTube Shorts und Instagram Reels veröffentlicht werden, wobei der gesamte Inhaltskalender auf einen Blick ersichtlich ist.

  • KI-Thumbnail-Studio

    Miniaturansichten auf Grundlage einer Vorgabe und eines optionalen Referenzbildes im Querformat, Hochformat oder im quadratischen Format, erstellt anhand von Vorlagen, die das Markenbild einheitlich gestalten.

  • Google Ads-Assistent

    Ein Leitfaden, der die Kampagne – Werbemittel, Anzeigengruppen, Budget, Zeitplan – zusammenfasst, anstatt einer Konsole, die für hauptberufliche Media-Einkäufer konzipiert ist.

  • Ein Dashboard

    Organische Zugriffe und bezahlte Kampagnen werden am selben Ort, über denselben Zeitraum und anhand derselben Kennzahlen erfasst.

Die Herausforderung

Ausschnitt erstellen, Titel vergeben, Vorschaubild erstellen, Termin planen – und dann ein anderes Tool öffnen und das Ganze für die nächste Plattform noch einmal wiederholen.

Kreative und Marketingfachleute verloren ihre Zeit an die mechanische Seite des Publizierens. Die Tools gab es zwar, aber jedes war auf einen einzigen Schritt beschränkt: ein Editor, der einen Clip schneiden, aber nicht veröffentlichen konnte; ein Planungswerkzeug, das nichts über die neben den Inhalten geschalteten Anzeigen wusste; eine Anzeigenkonsole, die für Menschen entwickelt wurde, die beruflich Medien einkaufen, statt für diejenigen, die das Video erstellt haben. Jede Übergabe zwischen diesen Tools bedeutete, dass jemand etwas aus einem Tab kopieren und in einen anderen einfügen musste.

  • Wiederholung von Hand

    Ausschneiden, Erstellen von Vorschaubildern und Planen – jedes Mal einzeln, pro Beitrag, pro Plattform.

  • Isolierte Tools

    Redakteure, Planer und Anzeigen-Dashboards, die nicht miteinander kommunizierten, sodass der Arbeitsablauf auf Kopieren und Einfügen basierte.

  • Keine einheitliche Sichtweise

    Es gab keine Übersicht darüber, wie sich organische Inhalte und bezahlte Kampagnen im Vergleich zueinander entwickelten.

Unsere Lösung

Ein einziger Prozess – vom Rohmaterial bis zur Live-Kampagne.

Wir haben den gesamten Prozess an einem Ort integriert. Die KI analysiert das Quellvideo und schlägt Clips vor, sodass der Redakteur lediglich die Schnittstellen anpassen muss, anstatt nach ihnen suchen zu müssen. Das Thumbnail-Studio und die Planungswarteschlange befinden sich in derselben Bibliothek, sodass ein Clip von der Erstellung bis zur Veröffentlichung gelangt, ohne jemals exportiert zu werden. Und der Zugriff auf Google Ads erfolgt über einen Assistenten, der nach einem Briefing fragt und die Kampagne zusammenstellt – und nicht über eine Konsole, die davon ausgeht, dass derjenige, der sie ausfüllt, dies täglich tut.

KI-basierte Inhaltsanalyse

Die Auswahl der Clips und die Erstellung der Miniaturansichten erfolgen modellgesteuert, sodass der mühsame Teil der Arbeit bereits vorgeschlagen wird, anstatt darauf gewartet zu werden, dass er erledigt wird.

Integrierte Plattformen

YouTube, TikTok und Google Ads in einem einzigen Dashboard – zur Verwaltung und Verbreitung der Inhalte.

Ein Assistent, keine Konsole

Ein vereinfachter Google-Ads-Ablauf, der die zu verwendenden Materialien vorschlägt und die Einrichtung der Kampagne von einem Nachmittag auf weniger als eine Minute verkürzt.

So funktioniert es

Wiederverwendung von Inhalten mithilfe von KI

Users paste a YouTube URL to start an AI analysis that suggests the short-form clips worth cutting. The editor beside it is for fine-tuning start and end points and picking a platform-specific aspect ratio before anything is processed.

Der Bildschirm „Inhalte wiederverwenden“ mit einer YouTube-URL im Upload-Feld und darunter aufgelisteten neun generierten Clips, die jeweils eine Vorschau, einen Zeitplan, eine Veröffentlichungsoption, eine TikTok-Option und einen Download-Link bieten.

Zentrale Terminplanung und Bibliothek

A central library holds every generated clip with filtering and search over it. The scheduler queues posts across multiple platforms from the same list, so the whole content calendar reads at a glance rather than one platform at a time.

Die Planungswarteschlange, in der die Anzahl der in Bearbeitung befindlichen, geplanten, hochgeladenen, veröffentlichten und fehlgeschlagenen Clips über einer durchsuchbaren Tabelle mit neun Clips in der Warteschlange sowie deren Quellvideo und Status angezeigt wird.

KI-Thumbnail-Studio

The studio generates thumbnails from a plain prompt and an optional reference image, with templates for landscape, portrait and square. It is the piece that keeps a channel visually consistent without booking a designer for every upload.

Das Thumbnail-Studio mit einem Eingabefeld, einer Funktion zum Hochladen von Referenzbildern und einer Vorlagenauswahl auf der linken Seite sowie einer Live-Vorschau mit Optionen für Größe und Qualität auf der rechten Seite.

Wirkung & Ergebnisse

Eine automatisierte Pipeline und eine Warteschlange, die Daten speichert.

Die Plattform wurde mit einer durchgängigen Lösung zur Wiederverwendung von Inhalten, einem Planungssystem, das auch bei Steuerung durch einen Cron-Job einwandfrei funktioniert, und einem Anzeigenablauf ausgeliefert, der so einfach ist, dass ihn sogar der Ersteller des Videos selbst ausführen kann.

Erstellung einer Google Ads-Kampagne
Erfolgreich geplante Beiträge
Vorbereitungszeit pro Video
Ausfallrate von Cron-Jobs

Systemarchitektur

Übergeordnete Architektur

Übersicht über die Architektur. Der Browser des Benutzers greift auf ein Next.js 15 App Router-Frontend zu, das über das Client-SDK mit Firebase, für die Anmeldung bei Google, Spotify und TikTok mit NextAuth sowie über REST mit Next-API-Routen kommuniziert. Diese API-Routen rufen die APIs von Stripe, OpenAI, Spotify, TikTok, YouTube und Google Ads sowie das Firebase Admin SDK auf. Ein separater Vercel-Cron-Job wird alle fünfzehn Minuten für die Route „process-youtube-queue“ ausgeführt.
Alle Anmeldedaten von Drittanbietern werden hinter den API-Routen gespeichert, niemals im Browser – und die Veröffentlichungswarteschlange wird nicht durch eine Anfrage, sondern über Cron auf einem eigenen Pfad gesteuert.

Entity-Relationship-Diagramm

Entity-Relationship-Diagramm der Firestore-Sammlungen. Ein Benutzerdokument ist mit Anzeigenkonten, YouTube-Verbindungen, TikTok-Verbindungen, Anzeigen-Assistenten-Sitzungen und YouTube-Wiederverwendungsaufträgen verknüpft; Anzeigenkonten verweisen auf ein Dokument mit den MCC-Einstellungen für Google Ads, und Stripe-Zahlungen sind mit dem Benutzer verknüpft.
Ein Benutzer ist Eigentümer seiner Plattformverbindungen, seiner Umnutzungsaufträge und seiner Anzeigen-Assistenten-Sitzungen – wodurch sich Kontingente pro Benutzer und die Aktualisierung von Tokens überschaubar gestalten lassen.

Was zu lösen war

Latenz bei der Wiederverwendung von Videos

Solution: Eine asynchrone Job-Warteschlange mit paralleler Clip-Erstellung und inkrementeller Bereitstellung, sodass die Ergebnisse sofort nach Fertigstellung bereitgestellt werden und nicht erst, wenn der langsamste Job abgeschlossen ist. Ein Fallback-Pfad über FFmpeg deckt die Fälle ab, in denen dies immer noch nicht schnell genug ist.

API-Kontingente und Zeitüberschreitungen

Solution: Die Zeitlimits für Uploads werden plattformspezifisch angepasst, und jeder ausgehende Aufruf wird durch einen adaptiven Backoff-Mechanismus gesteuert, der die Anfragerate dynamisch reguliert, anstatt das Tageskontingent bereits am Nachmittag aufzubrauchen.

Sicherheit bei parallel laufenden Cron-Jobs

Solution: Transaktionssperren in der Datenbank. Ein Worker beansprucht eine Aufgabe atomar, bevor er sie bearbeitet, sodass zwei sich überschneidende Cron-Läufe nicht beide dasselbe Element verarbeiten können.

Zwei Authentifizierungsmodelle für Google Ads

Solution: Eine Dual-Mode-Architektur, bei der Tokens je nachdem, ob es sich um ein Konto auf Agentur-Ebene (MCC) oder um ein eigenes Konto des Benutzers (BYO) handelt, unterschiedlich beschafft werden, wobei diese Entscheidung zur Laufzeit und nicht bereits bei der Konfiguration getroffen wird.

Doppelte Kampagnennamen

Solution: Vor der Erstellung wird eine Duplikatsprüfung über GAQL durchgeführt. Im Falle einer Kollision fügt das System ein eindeutiges Suffix hinzu und versucht es erneut, anstatt einen API-Fehler anzuzeigen, auf den der Benutzer nicht reagieren kann.

Verschiedene Upload-Modi bei TikTok

Solution: Ein Upload-Modul, das sowohl das „Chunked“- als auch das „Pull-from-URL“-Protokoll unterstützt, mit Backoff-Abfrage, Aufgabenabbruch und Wiederaufnahme fehlgeschlagener Uploads.

Fragen

Das Hauptziel bestand darin, eine einheitliche SaaS-Plattform zu schaffen, um den Zeitaufwand und die Komplexität für Content-Ersteller und Marketingfachleute drastisch zu reduzieren. Wir wollten die Wiederverwendung von Inhalten automatisieren, die plattformübergreifende Planung optimieren und die Erstellung von Werbekampagnen mithilfe von KI vereinfachen.

Sind Sie bereit, den mühsamen Teil zu automatisieren?

Lassen Sie uns Ihre Content-Plattform aufbauen.