React Webseite mit Suchfunktion mit mehreren Seiten?

Hallo,

ich hatte mal früher kleine Anwendungen mit VB.NET für Windows-Systeme entwickelt und möchte jetzt mit React anfangen. Ich würde mich komplett als Anfänger bezeichnen und muss deshalb Fragen stellen.

Als Projekt habe ich mir folgendes vorgestellt:

Es gibt ein Kanal auf YouTube und es werden Fragen von Leuten vorgelesen und sie werden im Video beantwortet.

Ich möchte eine Webseite erstellen mit all diese Fragen und zu jeder Frage ein "Button", wenn man ihn anklickt ist unten oder irgendwo an der Seite ein Video-Player von YouTube und das Video wird abgespielt ab dem Zeitpunkt wo die Frage im Video vorgelesen wird.

Ich habe mir alle Fragen bereits aufgeschrieben und hätte alle Links zu den Fragen im Video.

Da es mehrere Videos gibt, möchte ich eine Suchfunktion integrieren, aber ich weiß nicht, ob ich für jedes Video (Teil1, Teil2,...) eine neue Seite im React erstellen soll und wie ich dann die Suchfunktion so programmiere, dass alle Seiten durchgesucht werden. Ich habe im Internet gesucht und viele benutzen .JSON für Suchfunktion, aber ich denke, dass bei mir mit .JSON nicht funktionieren wird.

Es sind über 80+ YouTube-Videos mit jeweils ca. 15-30 Fragen.

Ich möchte alles selber machen/lernen und möchte auch nicht, dass jemand mir alles vorprogrammiert.. Es wäre mir sehr hilfreich mir die richtige Richtung zu zeigen, kurz und grob erklären, mit welchen Komponenten ich arbeiten soll usw.

Hier ein Beispiel wie es ausschauen soll ungefähr:

Das design ist nicht so wichtig wie die Funktion und Struktur der Programmierung.

Vielen Dank schon mal!

Answer 1

[regex9]

(...) aber ich weiß nicht, ob ich für jedes Video (Teil1, Teil2,...) eine neue Seite im React erstellen soll (...)

Es gibt verschiedene Möglichkeiten, wie man das lösen kann.

• Alle Fragen und Videos werden in ein Akkordeon-Element eingefügt.
• Jedes Video hat eine eigene Seite.
• Je Seite werden mehrere Videos eingebunden.
• Auf einer Seite werden alle Videos eingebunden.
• Nach Klick auf den Button wird der richtige Videoplayer geladen.

Um die Seite gut nutzbar zu gestalten, sollte der Nutzer nicht ewig scrollen müssen. Das heißt, wenn du alle Videos auf einer Seite einbindest, dann sollte es zumindest auch Sprungmarken geben, mit denen man sich schnell hin und her bewegen kann. Dem entgegen würde ich aber auch nicht je Video eine eigene Seite anlegen, denn das fordert immer wieder neue Requests und somit auch Ladezeiten, die der Nutzer ertragen muss.

Es wäre sinnvoll, den Text-/Videoinhalt in die Entscheidung einzubinden. Wenn mehrere Fragen/Videos inhaltlich zusammengehören, passen sie auch auf eine Seite. Wenn man thematisch gruppieren kann, hat man schon eine Mittelswegslösung.

JSON für Suchfunktion, aber ich denke, dass bei mir mit .JSON nicht funktionieren wird.

Ich sehe nicht, was hier gegen eine JSON für die Datenspeicherung sprechen sollte. Du musst lediglich die Daten richtig einordnen. Wenn die Videos beispielsweise auf mehrere Seiten verteilt werden, bräuchtest du je Video auch eine passende URL.