Zum Inhalt springen
Michael Zogot
← Alle Projekte
LiveWerkstatt · Musikplattform für eine Community · 2026

TrackClash

TrackClash ist eine Musikplattform, die ich für eine Online-Community gebaut habe: aufgebaut wie ein Streamingdienst, mit Künstlerseiten, Alben, Covern, Charts und einem durchgehenden Player, dazu ein Spiel, in dem Songs im Duell gegeneinander antreten. Konzept, Design und Umsetzung stammen vollständig von mir. Die App läuft im Browser und lässt sich als App installieren.

Startseite: Jeder Track ist ein Behälter im Pool, die Höhe zeigt die Wiedergaben, der meistgehörte brennt in der Mitte
Startseite: Jeder Track ist ein Behälter im Pool, die Höhe zeigt die Wiedergaben, der meistgehörte brennt in der Mitte
Neue Tracks und Alben, Charts nach Wiedergaben und die Tracks mit dem meisten Schwung der letzten 24 Stunden
Neue Tracks und Alben, Charts nach Wiedergaben und die Tracks mit dem meisten Schwung der letzten 24 Stunden
1-gegen-1-Duell: 8 Sekunden von beiden Tracks hören, dann abstimmen, 10 Stimmen pro Tag
1-gegen-1-Duell: 8 Sekunden von beiden Tracks hören, dann abstimmen, 10 Stimmen pro Tag
Leaderboard: die drei Tracks mit den meisten gewonnenen Duell-Stimmen auf Podesten über dem Lavakrater
Leaderboard: die drei Tracks mit den meisten gewonnenen Duell-Stimmen auf Podesten über dem Lavakrater

22

Releases in den ersten drei Wochen

8 s

Hören, bevor eine Wiedergabe oder Stimme zählt

10

Stimmen pro Konto und Tag

5

Meldungen, bevor ein Track ausgeblendet wird

Ausgangslage

In der Community schreiben viele Mitglieder eigene Songs, oft mit KI erstellt, und es gibt regelmäßig Song-Wettbewerbe. Jeder Wettbewerb lief aber an einem anderen Ort, und nach dem Ende waren die Songs kaum wiederzufinden. Ich wollte einen zentralen Ort für alles: Jeder kann seine Songs hochladen, alle können sie hören, und ein Spiel obendrauf sorgt dafür, dass gemeinsam abgestimmt wird und die besten Songs nach oben steigen.

Entstehung

  1. 01
    Ein Ort für alle SongsStatt verstreuter Beiträge und Wettbewerbe gibt es eine Bibliothek: Jeder Song bleibt auffindbar, über Suche, Genres, Alben und die Seite seines Künstlers.
  2. 02
    Wie ein StreamingdienstBedienung und Aufbau lehnen sich bewusst an die großen Musik-Apps an: Seitenleiste, Player am unteren Rand, der beim Weiterklicken weiterspielt, Favoriten, Alben mit Covern und ein eigenes Profil für jeden Künstler.
  3. 03
    Ein Spiel obendraufIm Duell treten zwei Tracks mit ähnlicher Bewertung gegeneinander an. Abgestimmt werden kann erst, wenn man beide gehört hat, und die Wertung folgt dem Elo-System aus dem Schach. Überraschungssiege bewegen die Wertung stärker.
  4. 04
    Eine eigene BildspracheOberfläche, Spielmetapher und alle Grafiken sind auf die Welt der Community zugeschnitten: Tracks sind Behälter in einem glühenden Pool, Wiedergaben sind Hitze, der meistgehörte Song brennt am hellsten. Die Grafiken und Animationen habe ich mit Bild- und Videomodellen erzeugt.
  5. 05
    Bewusst nur für MitgliederBis auf die Anmeldung und die Seite mit Geschichte, Impressum und Datenschutz ist alles nur nach dem Login erreichbar. So bleibt die Plattform bei der Community, und die Serverlast bleibt klein und planbar.

Was es kann

  1. 1
    ChartsTracks nach Wiedergaben für heute, diese Woche und insgesamt. Eine Wiedergabe zählt erst nach 8 Sekunden Hören.
  2. 2
    1-gegen-1-DuellZwei Tracks, ein Pool: Je 8 Sekunden Hören füllen die Seite eines Tracks, erst dann wird abgestimmt. 10 Stimmen pro Konto und Tag.
  3. 3
    LeaderboardTracks und Künstler nach gewonnenen Duell-Stimmen, für heute, diese Woche und insgesamt, die ersten drei auf einem Podest.
  4. 4
    Künstlerseiten und AlbenJeder Künstler hat eine eigene Seite mit Tracks, Alben, Duell-Bilanz und verlinktem X-Profil. Tracks lassen sich umbenennen, mit neuem Cover versehen, Alben zuordnen oder löschen.
  5. 5
    Suche und GenresSuche nach Titel oder Künstler, Filter nach zehn Genres, Sortierung nach Wiedergaben, Wertung oder Datum. Jede Suche hat eine teilbare Adresse.
  6. 6
    Teilen auf XJeder Track lässt sich mit einem fertigen Beitrag auf X teilen. Geteilte Links zeigen eine eigene Vorschaukarte.
  7. 7
    Installierbare AppAuf iPhone, Android und dem Desktop als App installierbar, mit eigenem Symbol und einer Offline-Seite, die sich von selbst neu lädt, sobald die Verbindung zurück ist.
  8. 8
    Schnell für alleServer und Datenbank laufen in derselben Region in Europa. Charts und Bestenlisten teilen sich alle Besucher über einen kurzen Cache, und jeder Klick zeigt sofort einen Ladezustand.

Sicherheit & Recht

  1. 1
    Identität über XAnmeldung nur mit einem X-Konto. Name, Bild und Handle kommen ausschließlich aus dem X-Profil und lassen sich in der App nicht ändern. So kann sich niemand als ein anderer Künstler ausgeben.
  2. 2
    Meldung bei fremden SongsLädt jemand einen fremden Song hoch, kann jedes Mitglied ihn melden: fremde Aufnahme, Urheberrechtsverstoß oder kein Original. Nach fünf Meldungen ist der Track überall ausgeblendet, bis ein Moderator ihn wiederherstellt oder auf die Wall of Shame setzt.
  3. 3
    Geprüfte UploadsDateien gehen direkt in den Speicher, unter zufälligem Namen und nur in den eigenen Ordner. Bevor ein Track erscheint, prüft der Server Besitz, Größe und die tatsächlichen Bytes der Datei. Getarnte Dateien werden gelöscht.
  4. 4
    Fair gezähltEin Hörer bringt einem Track höchstens drei Wiedergaben pro Tag. Eigene Tracks tauchen im Duell nicht auf, und dieselbe Paarung bewertet niemand zweimal. Alle Regeln prüft der Server, nicht nur die Oberfläche.
  5. 5
    Geschützte SchnittstellenJede Schnittstelle prüft zuerst die Anmeldung und akzeptiert nur exakt definierte Eingaben. Dazu Ratenbegrenzung pro Nutzer und Sicherheits-Header auf jeder Antwort.
  6. 6
    DatenschutzNur technisch nötige Cookies, Besucherzählung ohne Cookies und ohne Profil. Impressum und Datenschutzerklärung sind ohne Login lesbar, auf Wunsch wird das Konto mit allen Daten gelöscht.

Technik

  • Next.js 16 (App Router)
  • TypeScript
  • Tailwind CSS 4
  • Zustand
  • Prisma 7
  • Turso (libSQL)
  • Auth.js v5 mit X
  • Vercel Blob
  • zod
  • PWA mit Service Worker
  • Higgsfield (Grafik und Video)
Nächstes WerkzeugWisperfy · Diktat für macOS, on-device
Weiter →