J'ai construit un site de streaming de films en quelques heures - Voici comment ça s'est passé

J'ai créé un site de streaming de films en 48 heures - Voici comment ça s'est passé

Il y a quelques semaines, je suis tombé sur quelques sites de streaming de films qui ne semblaient pas avoir de backend du tout. Ils utilisaient des API telles que TMDB pour extraire des données de films et vidsrc.dev pour diffuser les vidéos réelles. Cela m'a fait réfléchir : "Pourquoi ne pas essayer moi-même ?" Et si je pouvais créer quelque chose de similaire (un site de streaming de films) mais sans backend, juste React et quelques API intelligentes ?

Alors, j'ai décidé de me lancer un défi. Je me suis lancé un défi de 48 heures pour créer un site de streaming de films. Pas de backend, pas de bases de données : juste React pour le frontend et quelques API pour extraire les données des films et gérer le streaming. Je me suis dit : "Je vais repartir de zéro, voir où j'en suis et apprendre beaucoup de choses en cours de route."

Si vous êtes développeur, vous connaissez le sentiment de vouloir s'attaquer à quelque chose de grand. J'avais passé beaucoup de temps à apprendre React, à suivre des tutoriels et à créer de petits projets. Même si c’était amusant et éducatif, je voulais quelque chose de plus stimulant, quelque chose de réel. Quelque chose que je pourrais réellement utiliser. Un site de streaming de films semblait être l’idée parfaite.

Pourquoi ? Eh bien, les sites de streaming de films sont partout, non ? Mais tous n’ont pas des backends complexes ; certains utilisent des API simples pour extraire des données de film et diffuser du contenu. J'ai pensé que je pourrais faire la même chose, en apprendre beaucoup sur React et, bien sûr, me retrouver avec un petit projet amusant à partager avec les autres. Mais ce qui m’a vraiment motivé, c’est l’idée de mettre la main à la pâte et de construire quelque chose d’utile à partir de zéro. Il ne s'agissait pas de perfection ni même de tout faire correctement, il s'agissait de construire quelque chose qui fonctionnait, puis de trouver comment l'améliorer.

Le parcours : démarrer le projet

Une fois que j'ai eu l'idée, je me suis immédiatement lancé dans la construction du site. La première étape consistait à configurer l'application React. La configuration initiale s'est déroulée sans problème : je connaissais React, grâce à tous les tutoriels que j'avais suivis. Cependant, le véritable défi a commencé lorsque j'ai dû tout connecter ensemble.

Le cœur du site consistait à extraire des données cinématographiques de TMDB, l'une des bases de données cinématographiques les plus populaires. J'avais également besoin d'un moyen de diffuser des films en streaming, et c'est là que vidsrc.dev est entré en jeu. C'était assez simple : j'utiliserais TMDB pour récupérer les titres de films, les affiches et les détails, puis extraire les liens de streaming réels de vidsrc.

Mais voici le problème : React est idéal pour créer l'interface utilisateur, mais lorsqu'il s'agit de structurer une application avec beaucoup de composants et de logique, cela peut devenir un peu compliqué. J'ai eu beaucoup de code répété. La page de streaming de films et la page de streaming de séries avaient un code presque identique pour l'affichage des médias, la gestion des erreurs et le rendu de l'interface. Au départ, je ne pensais pas beaucoup à la réutilisabilité, et cela a fini par me piquer à long terme.

Il ne s’agissait pas seulement de répéter du code, il s’agissait du manque de structure. Au lieu de réutiliser des composants et de créer une approche plus modulaire, j'ai copié et collé beaucoup de logique. Cela a conduit à une certaine dette technique et, soyons honnêtes, à un code moins que propre. Mais à l’époque, j’étais plus concentré sur le fait que quelque chose fonctionne rapidement plutôt que sur la perfection.

Ce qui n'a pas fonctionné : l'horrible vérité de mon code

Le code fonctionne, mais il est loin d’être parfait. Comme je l'ai mentionné plus tôt, il y a beaucoup de code répété. La façon dont j’ai structuré les composants de streaming de films et de séries n’est pas évolutive. Par exemple, j'ai trop codé en dur, et maintenant il est devenu difficile d'ajouter de nouvelles fonctionnalités sans toucher à beaucoup de code existant.

Les parties film et série de l'application sont essentiellement identiques. Je n'ai pas créé de composants réutilisables ni divisé la logique en éléments gérables. Maintenant, je prévois de revoir le code et de le refactoriser. Le plan est de le rendre plus modulaire en le décomposant en composants plus petits pouvant être réutilisés. Je souhaite également résumer la logique en fonctions qui gèrent des tâches courantes, comme la récupération de données ou le rendu de composants, afin de ne pas avoir à me répéter.

Il s'agit d'une étape majeure dans l'amélioration de la maintenabilité du projet. Au lieu de simplement créer du code pour respecter un délai, je dois me concentrer sur la création d'une application évolutive et plus propre. Je pense également à utiliser quelque chose comme Tailwind CSS pour améliorer le style et rendre l'application plus réactive. J'ai déjà appris à faire fonctionner l'interface utilisateur sur de petits écrans, mais je pourrais certainement améliorer la conception et le flux d'utilisateurs pour la rendre plus raffinée.

Et ensuite : améliorer et étendre le projet

Même si le site est opérationnel, il y a encore beaucoup de choses que je veux en faire. Les prochaines étapes sont cruciales pour en faire quelque chose qui ne soit pas seulement fonctionnel mais professionnel.

Tout d’abord, je prévois de refactoriser le code pour améliorer la réutilisabilité. Je vais réécrire les composants pour m'assurer qu'ils peuvent être réutilisés dans différentes parties du site sans dupliquer la logique. Cela facilitera grandement l'ajout de nouvelles fonctionnalités (telles que l'authentification des utilisateurs ou les recommandations de films).

En parlant d'authentification des utilisateurs, j'envisage d'utiliser PocketBase pour gérer les comptes d'utilisateurs. Cela permettrait aux utilisateurs de s'inscrire, de se connecter et de personnaliser leur expérience cinématographique, voire même de sauvegarder leurs films préférés ou de créer des listes de lecture personnalisées. C’est l’une des choses pour lesquelles j’aurais aimé avoir du temps pendant les premières 48 heures, mais c’est définitivement sur la feuille de route.

Une autre idée passionnante que j’explore consiste à créer une version de bureau de l’application à l’aide de Tauri. Tauri me permettrait de regrouper l'application React dans une application de bureau native pour Windows, Mac et Linux. Cela ouvrirait un tout nouveau niveau d'accessibilité pour les utilisateurs et rendrait l'expérience de streaming plus transparente.

Vue d'ensemble : croissance, apprentissage et progrès

En fin de compte, toute l’expérience était axée sur la croissance. La création de ce site m'a beaucoup appris, non seulement sur React, mais aussi sur la résolution de problèmes, la gestion du temps et l'importance du refactoring. Le projet ne s’est pas avéré parfait, mais c’était une énorme opportunité d’apprentissage.

Et voilà : je n’ai pas encore fini. Il y a encore tellement de domaines à améliorer et je suis ravi de les aborder. Je n’ai pas toutes les réponses pour le moment, mais je m’engage à apprendre et à m’améliorer. C’est la beauté du développement : il ne s’agit pas de tout réussir du premier coup ; il s'agit d'itérer et de grandir au fil du temps.

Donc, à tous ceux qui envisagent de démarrer un projet, n'ayez pas peur de vous salir les mains. Même si votre code n’est pas parfait au début, vous apprendrez beaucoup de choses en cours de route. Et qui sait ? Peut-être que votre prochain projet de 48 heures se transformera en quelque chose d'encore plus grand et meilleur.

Je ferai plus de projets, alors restez à l'écoute pour en savoir plus.

Retrouvez le site sur https://lensloria.netlify.app/
Trouvez le code sur https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!