Ich habe in wenigen Stunden eine Film-Streaming-Site erstellt – So lief es

Ich habe in 48 Stunden eine Film-Streaming-Site erstellt - So lief es

Vor ein paar Wochen bin ich auf ein paar Film-Streaming-Seiten gestoßen, die anscheinend überhaupt kein Backend hatten. Sie nutzten APIs wie TMDB, um Filmdaten abzurufen, und vidsrc.dev, um die eigentlichen Videos zu streamen. Das brachte mich zum Nachdenken: „Warum probierst du das nicht selbst aus?“ Was wäre, wenn ich etwas Ähnliches erstellen könnte – eine Film-Streaming-Site –, aber ohne Backend, nur React und ein paar clevere APIs?

Also beschloss ich, mich selbst herauszufordern. Ich habe mir die 48-Stunden-Herausforderung gestellt, eine Film-Streaming-Site aufzubauen. Kein Backend, keine Datenbanken – nur React für das Frontend und einige APIs zum Abrufen von Filmdaten und zum Verwalten des Streamings. Ich dachte: „Ich fange bei Null an, schaue, wo ich hinkomme, und lerne dabei eine Menge.“

Wenn Sie Entwickler sind, kennen Sie das Gefühl, etwas Großes angehen zu wollen. Ich hatte viel Zeit damit verbracht, React zu lernen, Tutorials zu befolgen und kleine Projekte zu erstellen. Obwohl diese unterhaltsam und lehrreich waren, wollte ich etwas Anspruchsvolleres – etwas Reales. Etwas, das ich tatsächlich gebrauchen könnte. Eine Film-Streaming-Site schien die perfekte Idee zu sein.

Warum? Nun, Film-Streaming-Sites gibt es überall, oder? Aber nicht alle von ihnen verfügen über komplexe Backends; Einige verwenden einfache APIs, um Filmdaten abzurufen und Inhalte zu streamen. Ich dachte, ich könnte das Gleiche tun, viel über React lernen und natürlich am Ende ein lustiges kleines Projekt haben, das ich mit anderen teilen kann. Aber was mich wirklich motivierte, war die Idee, mir die Hände schmutzig zu machen und von Grund auf etwas Nützliches aufzubauen. Es ging nicht um Perfektion oder gar darum, alles richtig zu machen – es ging darum, etwas zu bauen, das funktionierte, und dann herauszufinden, wie man es verbessern kann.

Die Reise: Das Projekt starten

Sobald ich die Idee hatte, machte ich mich direkt an die Erstellung der Website. Der erste Schritt war die Einrichtung der React-App. Die anfängliche Einrichtung verlief reibungslos – dank all der Tutorials, die ich durchgeführt hatte, war ich mit React vertraut. Die eigentliche Herausforderung begann jedoch, als ich alles miteinander verbinden musste.

Der Kern der Website bestand darin, Filmdaten aus TMDB abzurufen – einer der beliebtesten Filmdatenbanken. Ich brauchte auch eine Möglichkeit, Filme zu streamen, und da kam vidsrc.dev ins Spiel. Es war ganz einfach: Ich würde TMDB verwenden, um Filmtitel, Poster und Details abzurufen und dann die eigentlichen Streaming-Links von vidsrc abzurufen.

Aber hier ist die Sache: React eignet sich hervorragend zum Erstellen der Benutzeroberfläche, aber wenn es darum geht, eine App mit vielen Komponenten und Logik zu strukturieren, kann es etwas chaotisch werden. Ich hatte viel wiederholten Code. Die Film-Streaming-Seite und die Serien-Streaming-Seite verfügten über nahezu identischen Code für die Anzeige der Medien, die Fehlerbehandlung und die Darstellung der Benutzeroberfläche. Ich habe anfangs nicht viel über die Wiederverwendbarkeit nachgedacht, aber am Ende hat es mich auf lange Sicht nervt.

Es ging nicht nur um die Wiederholung des Codes – es ging um die fehlende Struktur. Anstatt Komponenten wiederzuverwenden und einen modulareren Ansatz zu entwickeln, habe ich viel Logik kopiert und eingefügt. Dies führte zu einigen technischen Schulden und, seien wir ehrlich, zu nicht gerade sauberem Code. Aber damals war ich mehr darauf konzentriert, etwas schnell zum Laufen zu bringen, als alles perfekt zu machen.

Was schief gelaufen ist: Die hässliche Wahrheit meines Codes

Der Code funktioniert, ist aber alles andere als perfekt. Wie ich bereits erwähnt habe, gibt es eine Menge wiederholten Code. Die Art und Weise, wie ich die Film- und Serien-Streaming-Komponenten strukturiert habe, ist nicht skalierbar. Ich habe zum Beispiel zu viel fest codiert, und jetzt ist es schwierig geworden, neue Funktionen hinzuzufügen, ohne viel vorhandenen Code zu ändern.

Die Film- und Serienteile der App sind im Wesentlichen identisch. Ich habe keine wiederverwendbaren Komponenten erstellt oder die Logik in überschaubare Teile zerlegt. Jetzt plane ich, den Code noch einmal zu überprüfen und umzugestalten. Der Plan besteht darin, es modularer zu gestalten, indem es in kleinere Komponenten zerlegt wird, die wiederverwendet werden können. Ich möchte die Logik auch in Funktionen abstrahieren, die allgemeine Aufgaben erledigen, wie etwa das Abrufen von Daten oder das Rendern von Komponenten, damit ich mich nicht wiederholen muss.

Dies ist ein wichtiger Schritt zur Verbesserung der Wartbarkeit des Projekts. Anstatt nur Code zusammenzuwürfeln, um eine Frist einzuhalten, muss ich mich darauf konzentrieren, die App skalierbar und sauberer zu machen. Ich denke auch darüber nach, etwas wie Tailwind CSS zu verwenden, um das Design zu verbessern und die App reaktionsfähiger zu machen. Ich habe bereits gelernt, wie man die Benutzeroberfläche auf kleinen Bildschirmen zum Laufen bringt, aber ich könnte das Design und den Benutzerfluss definitiv verbessern, um sie ausgefeilter zu machen.

Was kommt als nächstes: Verbesserung und Erweiterung des Projekts

Auch wenn die Website bereits online ist, möchte ich noch viel damit machen. Die nächsten Schritte sind entscheidend, um daraus etwas zu machen, das nicht nur funktional, sondern auch professionell ist.

Zuerst plane ich, den Code umzugestalten, um die Wiederverwendbarkeit zu verbessern. Ich werde die Komponenten neu schreiben, um sicherzustellen, dass sie in verschiedenen Teilen der Site wiederverwendet werden können, ohne dass die Logik dupliziert wird. Dadurch wird das Hinzufügen neuer Funktionen (wie Benutzerauthentifizierung oder Filmempfehlungen) viel einfacher.

Apropos Benutzerauthentifizierung: Ich denke darüber nach, PocketBase für die Verwaltung von Benutzerkonten zu verwenden. Dies würde es Benutzern ermöglichen, sich zu registrieren, anzumelden und ihr Filmerlebnis zu personalisieren – vielleicht sogar ihre Lieblingsfilme zu speichern oder benutzerdefinierte Wiedergabelisten zu erstellen. Es ist eines der Dinge, für die ich in den ersten 48 Stunden gerne Zeit gehabt hätte, aber es steht definitiv auf der Roadmap.

Eine weitere spannende Idee, die ich gerade untersuche, ist die Erstellung einer Desktop-Version der App mit Tauri. Tauri würde es mir ermöglichen, die React-App in eine native Desktop-Anwendung für Windows, Mac und Linux zu packen. Dies würde den Benutzern eine ganz neue Ebene der Zugänglichkeit eröffnen und das Streaming-Erlebnis nahtloser machen.

Das große Ganze: Wachstum, Lernen und Fortschritt

Letztendlich drehte sich die ganze Erfahrung um Wachstum. Beim Erstellen dieser Website habe ich viel gelernt – nicht nur über React, sondern auch über Problemlösung, Zeitmanagement und die Bedeutung von Refactoring. Das Projekt verlief nicht perfekt, aber es war eine enorme Lernmöglichkeit.

Und hier ist die Sache: Ich bin noch nicht fertig. Es gibt noch so viele Bereiche, die verbessert werden müssen, und ich freue mich darauf, diese in Angriff zu nehmen. Ich habe im Moment nicht alle Antworten, aber ich bin bestrebt, zu lernen und mich zu verbessern. Das ist das Schöne an der Entwicklung – es geht nicht darum, beim ersten Mal alles richtig zu machen; Es geht darum, mit der Zeit zu iterieren und zu wachsen.

An alle da draußen, die darüber nachdenken, ein Projekt zu starten: Haben Sie keine Angst, sich die Hände schmutzig zu machen. Auch wenn Ihr Code zunächst nicht perfekt ist, werden Sie im Laufe der Zeit so viel lernen. Und wer weiß? Vielleicht wird aus Ihrem nächsten 48-Stunden-Projekt etwas noch Größeres und Besseres.

Ich werde weitere Projekte durchführen, also bleiben Sie dran für mehr.

Die Website finden Sie unter https://lensloria.netlify.app/
Den Code finden Sie unter https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

Das obige ist der detaillierte Inhalt vonIch habe in wenigen Stunden eine Film-Streaming-Site erstellt  – So lief es. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!