Netflix-Klon erstellt mit React.JS und Firebase

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

Netflix-Klon erstellt mit React.JS und Firebase

Dies ist ein Klon der Netflix-Website, erstellt mit Reagieren.JS als Frontend & Feuerbasis als Backend. Es ist keine Nachbildung und verfügt nicht über alle Funktionen der Netflix-Website. Es ist eine ähnliche Version von Netflix mit meinem eigenen Design-Touch, die meine Fähigkeiten in React.JS zeigt, um etwas Fortgeschrittenes wie Netflix zu bauen. Es enthält die Startseite, die Anmeldeseite, die Anmeldeseite, die Browse-Seite und den Movie-Player.

Projektbegehung

Startseite

Bildschirmfoto Bildschirmfoto Bildschirmfoto Bildschirmfoto Bildschirmfoto Bildschirmfoto

Die Homepage besteht aus 5 Hauptbereichen:



netflix.com/netflix aktivieren

1) Kopfzeile, die Folgendes enthält:

  • Logo: Wenn Sie darauf klicken, werden Sie auf die Startseite weitergeleitet.

  • Anmeldeschaltfläche: leitet Sie zur Anmeldeseite weiter.

  • Featuretitel & Untertitel: Zeigt die Hauptsätze der Website an.

2) Optform: Es ist ein Texteingabefeld und eine Schaltfläche. Es leitet Sie zur Anmeldeseite weiter, sobald Sie auf die Schaltfläche klicken.

3) Jumbotron: Dieser Abschnitt enthält daneben einige Bilder und Absätze, die die Vorteile von Netflix zeigen. Die Daten dieses Jumbotrons stammen aus der Datei jumbo.json.

4) Häufig gestellte Fragen: Dieser Abschnitt enthält die FAQs in Form eines Akkordeons. Wenn Sie irgendwo in den grauen Bereich der Frage klicken, erscheint die Antwort darunter, und Sie können die Antwort schließen, indem Sie erneut auf denselben grauen Bereich der Frage klicken. Die Daten dieser FAQs stammen aus der Datei faqs.json.

5) Fußzeile: Es enthält nützliche Links, die Benutzer möglicherweise benötigen.

#### Die Seite reagiert vollständig auf alle mobilen Geräte, auch auf die kleinen. ###

Anmeldeseite

Bildschirmfoto Bildschirmfoto

Die Anmeldeseite besteht aus 3 Hauptbereichen:

1) Kopfzeile, die Folgendes enthält:

  • Logo: Wenn Sie darauf klicken, werden Sie auf die Startseite weitergeleitet.

2) Anmeldeformular, das Folgendes enthält:

  • Eingabefeld für die E-Mail-Adresse.

  • Eingabefeld für das Passwort.

  • Anmeldeschaltfläche: Es hat eine Validierungsoption. Wenn ein Feld im Formular leer ist, wird es deaktiviert. Wenn die Formularfelder Daten enthalten, ist es aktiv und sendet die Daten zur Authentifizierung an die Firebase-Datenbank im Backend. Es hat auch eine Fehlerbehandlungsfunktion.

  • Link zur Anmeldeseite: leitet Sie zur Anmeldeseite weiter.

3) Fußzeile: Es enthält nützliche Links, die Benutzer möglicherweise benötigen.

#### Die Seite reagiert vollständig auf alle mobilen Geräte, auch auf die kleinen. ###

Anmeldeseite

Bildschirmfoto Bildschirmfoto

Die Anmeldeseite besteht aus 3 Hauptbereichen:

1) Kopfzeile, die Folgendes enthält:

  • Logo: Wenn Sie darauf klicken, werden Sie auf die Startseite weitergeleitet.

2) Anmeldeformular, das Folgendes enthält:

  • Eingabefeld Vorname.

  • Eingabefeld für die E-Mail-Adresse.

  • Eingabefeld für das Passwort.

    wie man dogecash kauft

  • Anmeldeschaltfläche: Es hat eine Validierungsoption. Wenn ein Feld im Formular leer ist, wird es deaktiviert. Wenn die Formularfelder Daten enthalten, ist es aktiv und sendet die Daten zur Registrierung an die Firebase-Datenbank im Backend. Es hat auch eine Fehlerbehandlungsfunktion.

  • Link zur Anmeldeseite: leitet Sie zur Anmeldeseite weiter.

3) Fußzeile: Es enthält nützliche Links, die Benutzer möglicherweise benötigen.

#### Die Seite reagiert vollständig auf alle mobilen Geräte, auch auf die kleinen. ###

Seite durchsuchen

Bildschirmfoto Bildschirmfoto Bildschirmfoto Bildschirmfoto

Die Browse-Seite besteht aus 5 Hauptbereichen:

1) Kopfzeile, die Folgendes enthält:

  • Logo: Wenn Sie darauf klicken, werden Sie auf die Startseite weitergeleitet.

  • Kategorien-Links: Wenn Sie darauf klicken, werden die Filme einer bestimmten Kategorie angezeigt. Wenn Sie beispielsweise auf den Film-Link klicken, wird er aktiv und die Durchsuchen-Seite zeigt nur die Filme an. Und wenn Sie auf den Serienlink klicken, wird er aktiv und die Browse-Seite zeigt nur die Serien an.

  • Titel und Beschreibung des angesagten Films: Zeigt den Titel und die Beschreibung des vorgestellten Films an.

  • Play Button: Zeigt den Videoplayer zum Abspielen des Films an.

2) Filmfolien: Es ist eine Diashow, die die Filme nach ihrem Genre zeigt. Die Genres und alle Filminformationen wurden aus der Firebase-Datenbank abgerufen.

3) Filmkarte: Es ist ein Bild, das den Film darstellt. Wenn Sie mit der Maus darüber fahren, wird es größer und es wird seine Kartenfunktion angezeigt, wenn Sie darauf klicken.

4) Kartenfunktion: Es ist ein weiterer Abschnitt, der unter der Filmfolie angezeigt wird, wenn Sie auf eine Filmkarte klicken. Er enthält weitere Informationen zum Film wie Titel, Beschreibung, einen speziellen Hintergrund für den Film und eine Wiedergabeschaltfläche. Wenn Sie auf die Wiedergabeschaltfläche klicken, wird der Videoplayer zum Abspielen des Films angezeigt. und Sie können die Kartenfunktion schließen, indem Sie auf das Schließen-Symbol in der oberen rechten Ecke der Kartenfunktion klicken.

5) Videoplayer: Es ist ein Videoplayer mit vollständiger Steuerung, der in der Mitte des Bildschirms angezeigt wird, wenn Sie auf eine Wiedergabeschaltfläche klicken, und Sie müssen auf das Wiedergabesymbol im Videoplayer klicken, nachdem er angezeigt wird, da er keine Autoplay-Option hat zur Zeit. Und wenn der Videoplayer angezeigt wird, wird der gesamte Bildschirm zu einem Overlay, und nur das Video wird in der Mitte angezeigt, und wenn Sie nach oben und unten scrollen, bewegt sich der Videoplayer mit Ihnen. Der Videoplayer sollte das Video dieses angeklickten Films anzeigen, aber für diesen Projektzweck zeigt er nur ein Video als Beispiel für alle Filme.

Sie können den Videoplayer jederzeit schließen, indem Sie auf eine andere Stelle auf dem Bildschirm klicken.

Bildschirmfoto

6) Fußzeile: Es enthält nützliche Links, die Benutzer möglicherweise benötigen.

#### Die Seite reagiert vollständig auf alle mobilen Geräte, auch auf die kleinen. ###

Live-Demo

Sehen Sie sich hier die Live-Version an: https://react-netflix-clone-red.vercel.app/ :Oktokatze:

Verwendete Technologie

Ich habe dieses Projekt mit den folgenden Tools und Techniken erstellt:

  • Reagieren.JS
  • Router reagieren.
  • Formulare reagieren.
  • Haken reagieren.
  • useState.
  • useContext.
  • useEffekt.
  • useHistory.
  • useState.
  • Zusammengesetzte Komponenten.
  • JSX.
  • CSS-Module.
  • Feuerbasis.
  • VSCode.
  • StilLint.
  • EsLint.
  • Github-Aktionen.
  • Github-Seiten.

Wie benutzt man

Um diese React-App lokal in einer Entwicklungsumgebung verwenden zu können, benötigen Sie Folgendes:

  1. Du wirst brauchen gehen und Node.js auf Ihrem Computer installiert.

  2. Sie benötigen ein Konto auf Feuerbasis und Sie sollten ein Projekt auf Ihrem Firebase-Konto erstellen, das diesem Netflix-Projekt gewidmet ist.

  3. Sie benötigen die Datei ./seed.js (die ich in diesem Repository hinzugefügt habe), um Ihr Firebase-Backend mit Filminformationen zu beladen. ODER Sie können Ihre Seed-Datei mit Ihren Informationen verwenden, wenn Sie möchten.

  4. Dann sollten Sie von Ihrem Terminal aus Folgendes tun:

## Clone this repository git clone https://github.com/AhmedTohamy01/React-Netflix-Clone ## Go into the repository cd react-netflix-clone ## Install dependencies npm install
  1. Dann müssen Sie die Datei ./src/lib/firebase.prod.js in Ihrem lokalen Repository erstellen. Der Inhalt der Datei firebase.prod.js sieht wie folgt aus:
import Firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth'; // 1) when seeding the database you'll have to uncomment this! // import { seedDatabase } from '../seed'; const config = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '', }; const firebase = Firebase.initializeApp(config); // 2) when seeding the database you'll have to uncomment this! // seedDatabase(firebase); // 3) once you have populated the database (only run once!), re-comment // this so you don't get duplicate data export { firebase };
  1. Dann sollten Sie Ihre Firebase-Projektinformationen verwenden, um die Konfigurationsinformationen in der Datei firebase.prod.js auszufüllen.
const config = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '', };
  1. Anschließend sollten Sie Ihre Firebase-Datenbank mit den Informationen in der Datei Seed.js auswerten. , befolgen Sie dazu die folgenden Anweisungen:
1) Un-comment the following line: // import { seedDatabase } from '../seed' // seedDatabase(firebase); 2) Save the firebase.prod.js. 3) Wait 2 minutes and check your firebase database , if you found the data there then re-comment the above 2 lines. If you didn't re-commet the above 2 lines after the seeding process, you will get dupliacted data in your firebase database.
  1. Nachdem Sie Ihre Firebase-Datenbank mit den Filminformationen gesät und die Änderungen an den Github-Seiten zurückgesetzt haben, können Sie die Netflix React-App mit dem folgenden Befehl von Ihrem Terminal aus ausführen:
## Run the app npm start
  1. Jetzt können Sie das Projekt in Ihrem Browser sehen, wie Sie es im Live-Demo-Link sehen. Viel Spaß beim Hacken!

Autor

Ahmed Tohamy

Zeigen Sie Ihre Unterstützung

Gebt ein ⭐️ wenn euch dieses Projekt gefällt!

Danksagung

Ein Huttipp an alle hat mir geholfen, die Techniken zu erlernen, die beim Aufbau dieses Projekts verwendet wurden.

wo kann man dogecash kaufen

Download-Details:

Autor: AhmedTohamy01

Demo: https://react-netflix-clone-red.vercel.app/

Quellcode: https://github.com/AhmedTohamy01/React-Netflix-Clone

#reagieren #reactjs #javascript

Siehe Auch:

Neue Dinge

Am Lesbarsten

Tipp Der Redaktion