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.




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
- 01Ein 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.
- 02Wie 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.
- 03Ein 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.
- 04Eine 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.
- 05Bewusst 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
- 1ChartsTracks nach Wiedergaben für heute, diese Woche und insgesamt. Eine Wiedergabe zählt erst nach 8 Sekunden Hören.
- 21-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.
- 3LeaderboardTracks und Künstler nach gewonnenen Duell-Stimmen, für heute, diese Woche und insgesamt, die ersten drei auf einem Podest.
- 4Kü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.
- 5Suche und GenresSuche nach Titel oder Künstler, Filter nach zehn Genres, Sortierung nach Wiedergaben, Wertung oder Datum. Jede Suche hat eine teilbare Adresse.
- 6Teilen auf XJeder Track lässt sich mit einem fertigen Beitrag auf X teilen. Geteilte Links zeigen eine eigene Vorschaukarte.
- 7Installierbare 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.
- 8Schnell 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
- 1Identitä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.
- 2Meldung 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.
- 3Geprü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.
- 4Fair 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.
- 5Geschützte SchnittstellenJede Schnittstelle prüft zuerst die Anmeldung und akzeptiert nur exakt definierte Eingaben. Dazu Ratenbegrenzung pro Nutzer und Sicherheits-Header auf jeder Antwort.
- 6DatenschutzNur 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)