Salut la communauté 👋
Je suis ravi de vous présenter IPTV-60, un projet web personnel sur lequel j'ai récemment travaillé.
L'objectif de ce projet est de proposer une interface web moderne pour regarder des chaînes IPTV en ligne directement depuis un navigateur, tout en facilitant la recherche et la gestion des chaînes favorites.
Le projet s'appuie sur React, Next.js et Hls.js, avec des données provenant de l'API publique IPTV-org.
L'idée était de créer une expérience simple, rapide et intuitive permettant de parcourir des chaînes de télévision disponibles en ligne, de les filtrer par pays ou catégorie et de retrouver facilement ses chaînes favorites.
🚀 Les principales fonctionnalités d'IPTV-60
📺 Lecture de chaînes IPTV en direct
IPTV-60 permet de lire les flux vidéo compatibles directement depuis le navigateur grâce au protocole HLS (HTTP Live Streaming) et à la bibliothèque Hls.js.
L'utilisateur peut ainsi sélectionner une chaîne et lancer la lecture directement depuis l'interface.
⭐ Gestion des chaînes favorites
Les utilisateurs peuvent ajouter ou supprimer leurs chaînes préférées en un seul clic.
Les favoris sont sauvegardés localement grâce à LocalStorage, ce qui permet de conserver ses préférences entre les différentes sessions.
🔎 Recherche et filtres
Pour faciliter la navigation parmi les nombreuses chaînes disponibles, IPTV-60 propose différents filtres permettant notamment de rechercher des chaînes selon :
- 🌍 Le pays
- 📺 La catégorie
- 🔎 Le nom de la chaîne
Cette organisation permet de trouver rapidement le contenu recherché.
♾️ Infinite Scroll et chargement progressif
Afin d'améliorer les performances et d'éviter de charger toutes les chaînes en même temps, l'application utilise un système de chargement progressif avec Infinite Scroll.
Cette approche permet d'afficher les chaînes progressivement au fur et à mesure de la navigation.
🌍 Informations sur les chaînes
Chaque chaîne peut être présentée avec différentes informations :
- Le logo de la chaîne
- Le nom de la chaîne
- Le pays d'origine
- Le drapeau du pays
- La catégorie
Cela permet d'obtenir une interface plus visuelle et intuitive.
💬 Support des sous-titres
Le lecteur prend également en charge les flux proposant des sous-titres, lorsque ceux-ci sont disponibles dans le flux vidéo.
🛠️ Technologies utilisées
Pour développer IPTV-60, j'ai utilisé plusieurs technologies modernes du développement web :
- React — Construction de l'interface utilisateur
- Next.js — Framework React et architecture de l'application
- Hls.js — Lecture des flux vidéo HLS
- JavaScript / TypeScript — Logique applicative
- React Hooks — Gestion de l'état et des interactions
- LocalStorage — Sauvegarde des chaînes favorites
- IPTV-org API — Récupération des données des chaînes, logos et flux IPTV
Cette stack permet de construire une application web moderne, performante et facilement accessible depuis un navigateur.
💡 Pourquoi avoir créé IPTV-60 ?
Regarder la télévision en ligne peut rapidement devenir compliqué lorsque les chaînes sont réparties entre différentes plateformes et services.
Avec IPTV-60, je voulais créer une expérience plus centralisée et intuitive :
Une interface simple pour parcourir des chaînes IPTV, rechercher du contenu et retrouver rapidement ses chaînes favorites.
Le projet m'a également permis de travailler sur plusieurs problématiques intéressantes liées au streaming vidéo dans une application web, notamment la gestion des flux HLS, le chargement progressif des données et l'amélioration de l'expérience utilisateur.
🖥️ Aperçu du projet
Voici quelques captures d'écran de l'interface IPTV-60 :
🌐 Tester IPTV-60 en ligne
Vous pouvez découvrir et tester gratuitement le projet directement depuis votre navigateur :
👉 https://iptv-60.onrender.com/
Aucune installation n'est nécessaire pour découvrir l'application.
🔮 Les prochaines améliorations
IPTV-60 est toujours en développement et plusieurs améliorations pourraient être ajoutées au projet.
Parmi les évolutions possibles :
- 🌙 Ajout d'un thème sombre plus avancé
- 🔎 Amélioration du moteur de recherche
- ⭐ Amélioration de la gestion des favoris
- 🎯 Ajout de nouveaux filtres
- 📱 Optimisation de l'expérience mobile
- ⚡ Amélioration des performances
- 📺 Ajout de nouvelles fonctionnalités autour du lecteur vidéo
💬 Conclusion
IPTV-60 est un projet qui m'a permis d'explorer davantage le développement d'une application de streaming IPTV avec React et Next.js, tout en travaillant sur l'expérience utilisateur et les performances côté frontend.
Le projet continue d'évoluer et je suis toujours intéressé par vos retours et vos idées d'amélioration.
Si vous avez des suggestions concernant l'interface, les fonctionnalités ou l'expérience utilisateur, n'hésitez pas à les partager dans les commentaires ! 🚀
#react #nextjs #javascript #typescript #iptv #streaming #hls #frontend #programming
🌐 Essayer IPTV-60
Vous pouvez tester le projet ici : https://iptv-60.onrender.com
💬 Conclusion
IPTV-60 est encore en développement, mais il fonctionne déjà très bien pour un usage personnel ou pour tester des flux IPTV.
Si vous avez des idées d’amélioration ou des suggestions (nouveaux filtres, thème sombre, etc.), je serais ravi d’en discuter !
Top comments (0)