Proud Commerce Blog

Wer Internet-Radio hört, kennt das: Werbebanner über dem Player, Zwangspausen vor dem Abspielen oder mitten im Lieblingssender, kein vernünftiger Verlauf, keine saubere Song-Erkennung — und auf dem Auto-Display passiert sowieso nichts. Unser Kollege Stefan hat sich mit diesen Lücken nicht abfinden wollen und in seiner Freizeit eine eigene Radio-App gebaut, die genau diese Punkte adressiert: Radio Adfree, mittlerweile verfügbar für iOS und Android, mit voller CarPlay- und Android-Auto-Integration. Und wer hört schon nicht gerne beim Programmieren Radio? ;-) Vom fremden Open-Source-Projekt zum eigenen Stack Den Anfang machte im Dezember 2024 ein Fork des Open-Source-Projekts React Radio, ursprünglich ein Kursprojekt aus dem ReactJS-Kurs der SoftUni. Solide Grundlage, aber mit Grenzen: Supabase als Backend, Netlify Edge Functions für die Metadaten — alles SaaS-Lösungen, die nicht in die eigene Infrastruktur passten und auf Dauer nicht skalieren würden. Über die Weihnachtsferien baute Stefan die komplette Backend-Schicht um: Supabase wurde durch eine eigene MariaDB-Instanz ersetzt, die Edge Functions durch ein dockerisiertes Express-Backend, und die Rust-API für die Stream-Metadaten zog später auch mit auf den eigenen Server. Aus dem Kursprojekt wurde so binnen zwei Wochen ein eigener Web-Player auf eigener Infrastruktur — und nebenbei entstand ein zentraler Baustein, der bis heute trägt: ein Proxy, der die teils unsauber gepflegten Sender-URLs aus der offenen radio-browser.info-Datenbank prüft, bereinigt und dem Player verlässlich zur Verfügung stellt. Warum es eine Native App brauchte Browser-Player stoßen schnell an Grenzen: Background-Audio funktioniert nicht zuverlässig, Lock-Screen-Steuerung ist kaum gestaltbar, CarPlay und Android Auto liegen ohnehin außer Reichweite. Der konkrete Auslöser war ausgerechnet der Audio-Visualizer: In Chrome und Firefox bewegte er sich passend zur Musik, in Safari blieb er stumm, weil Safari bei fremden Audio-Streams keinen Zugriff auf die nötigen Audiodaten gibt. Kein Bug, sondern eine prinzipielle Browser-Grenze. Am 7. Januar 2025, zwölf Tage nach dem Fork, entstand der erste Commit der nativen App — auf Basis von Expo, React Native und TypeScript. Die saubere Trennung von Player- und Metadaten-State aus dem Web-Projekt wanderte direkt mit, ebenso die Proxy-Architektur. Der Web-Player bzw. das Express-Backend dahinter dient bis heute als Backend für die App. Was Radio Adfree heute kann Über 40.000 Sender weltweit aus der offenen radio-browser.info-Community Werbefrei und ohne Zwangspausen — keine Banner, keine eingeworfenen Spots Eingebaute Song-Erkennung via ShazamKit (iOS und Android), mit kompletter Hör-Historie Filter für Songs, die man nicht mehr hören möchte Komplette Podcast-Integration Audio-Player für lokale Dateien wie MP3 etc. Direkte Sprünge zu Spotify, Apple Music und YouTube für jeden erkannten Song Aufnahme von Streams als MP3 inklusive Metadaten CarPlay und Android Auto mit Lock-Screen-Steuerung auf beiden Plattformen Chromecast- und AirPlay-Unterstützung Mehrsprachig in acht Sprachen, Light- und Dark-Theme Premium-Features über In-App-Purchase via RevenueCat Was KI heute übernimmt — und was nicht Über weite Teile der Entwicklung hat Stefan bewusst ohne KI-Unterstützung gearbeitet, um die Architektur einer großen Cross-Platform-App komplett selbst zu durchdringen statt sich auf Modell-Output zu verlassen. Mit jedem Monat hat sich das Verhältnis aber verschoben: Im späten Projekt-Verlauf hat Claude Code zunehmend Standardaufgaben übernommen, während die Detailentscheidungen — und besonders die Feinarbeit an der Server-Infrastruktur, dem App-Store-Setup und nativen Plattform-Eigenheiten — beim Menschen geblieben sind. Manche Dinge will man ohne KI-Hilfe ohnehin nicht mehr anfassen, etwa das Aufsetzen eines Android-Auto-Emulators in Android Studio. Was wir mitnehmen Side-Projects dieser Größenordnung sind selten verschwendete Zeit. Aus Radio Adfree ergeben sich eine Reihe konkreter Erkenntnisse, die für weitere Mobile- oder auch bestehende E-Commerce-Projekte relevant werden können: praktische Erfahrung mit React Native und Expo in Production, mit nativen Modulen wie ShazamKit, mit CarPlay- und Android-Auto-Integrationen, mit RevenueCat-Subscriptions sowie mit dem Backend-Proxy-Pattern für unzuverlässige Drittanbieter-APIs, AppStore- und PlayStore-Setup, Integration von Chromecast und AirPlay und nicht zuletzt die Vermarktung u.a. über die Website zur App mit SEO, Blog-Beiträgen usw. — vieles Themen, die in der ein oder anderen Form sicher auch in Projekte für unsere Kunden mit einfließen werden. Glückwunsch an Stefan zum Release — und viel Spaß beim Radio hören. App Store: https://apps.apple.com/us/app/radio-adfree/id6741609871 Google Play: https://play.google.com/store/apps/details?idde.beffy.radiohero Webseite: https://www.radio-adfree.de

Unser Steckbrief:

Wir bauen und betreuen Online-Shops:

E-Commerce ist mehr als das Shop-Frontend:

Jedes Projekt ist anders:

Proud Commerce Blog

Schlagwort: react

Radio Adfree — Vom Weihnachts-Fork zur Native App für iOS und Android

Why you should use Web Components now (english)