World Radio 60 : explorer les radios du monde entier depuis votre navigateur 🎧🌍

J’ai récemment terminé un projet personnel que je voulais partager : World Radio 60, un site web qui permet d’écouter et de découvrir des radios du monde entier, avec une interface simple et intuitive.

Pourquoi ce projet ?

Je voulais créer une plateforme où l’utilisateur peut :

• parcourir les radios par pays et voir le drapeau correspondant ;

• filtrer par ville, pays ou nom de radio ;

• écouter un flux audio en direct directement depuis le site ;

• bénéficier d’une navigation fluide et rapide, même avec des centaines de radios.

Stack et choix techniques

Pour ce projet, j’ai utilisé:

• Next.js 13 (App Router) pour le rendu côté serveur et la génération de pages dynamiques.

• React pour construire une interface réactive et interactive.

• TypeScript pour plus de sécurité sur les types et éviter les erreurs courantes.

• API interne pour contourner les problèmes de CORS et récupérer les flux des radios.

• Tailwind CSS pour un style moderne, responsive et rapide à mettre en place.

Comment ça fonctionne ?

1. Le site récupère les lieux (places) depuis l’API Radio.Garden.

2. Les lieux sont regroupés par pays, avec une limite de villes pour optimiser les performances.

3. Pour chaque lieu, les channels sont récupérés via un endpoint interne Next.js.

4. L’utilisateur peut filtrer les radios par pays ou rechercher une station spécifique.

5. Un lecteur audio permet d’écouter le flux en direct.

Optimisations

🔒 Verrou anti-double fetch pour éviter les requêtes infinies en React Strict Mode.

⚡ Lazy loading et limites par pays pour réduire le temps de chargement.

✅ Gestion des erreurs et fallback pour les flux indisponibles.

Résultat

World Radio 60 est maintenant en ligne et permet de parcourir facilement les radios de tous les continents, tout en offrant une interface simple et rapide.

🌐 Découvrez-le ici : https://world-radio-60.vercel.app/