twitter clone

Twitter -Klon in Next.js + TypeScript + Tailwind CSS mit Cloud Firestore und Speicherplatz

Vorschau?

Showcase.mp4

Merkmale

• Authentifizierung mit Firebase -Authentifizierung
• Stark typisierte React -Komponenten mit TypeScript
• Benutzer können Tweets wie Retweet und Antwort hinzufügen
• Benutzer können Tweets löschen, Lesezeichen einen Tweet hinzufügen und ihren Tweet festlegen
• Benutzer können Tweet Bilder und GIFs hinzufügen
• Benutzer können anderen Benutzern folgen und nicht folgen
• Benutzer können ihre und andere Follower und die folgende Liste sehen
• Benutzer können alle Benutzer und die Trendliste sehen
• Echtzeit -Update Likes, Retweets und Benutzerprofile
• Echtzeit -Trenddaten von Twitter API
• Der Benutzer kann sein Profil bearbeiten
• Responsives Design für Mobile, Tablet und Desktop
• Benutzer können das Farbschema und den Farbhintergrund anpassen
• Alle Bilder -Uploads werden im Firebase Cloud -Speicher gespeichert

Technik?

• Weiter.js
• Typoskript
• Rückenwind -CSS
• Firebase
• Swr
• Kopfloses UI
• Heiße Toast reagieren
• Framer -Bewegung

Entwicklung

Hier sind die Schritte, um das Projekt lokal auszuführen.

1. Klonen Sie das Repository

   git clone https://github.com/ccrsxx/twitter-clone.git

2. Abhängigkeiten installieren

   npm i

3. Erstellen Sie ein Firebase -Projekt und wählen Sie die Web -App aus

4. Fügen Sie Ihre Firebase -Konfiguration zu .env.development hinzu. Beachten Sie, dass NEXT_PUBLIC_MEASUREMENT_ID optional ist

5. Stellen Sie sicher, dass Sie die folgenden Firebase -Dienste aktiviert haben:

   • Authentifizierung. Aktivieren Sie die Google-Anmeldemethode.
   • Wolkenfeuerstor. Erstellen Sie eine Datenbank und setzen Sie ihren Standort auf die nächste Region.
   • Wolkenspeicher. Erstellen Sie einen Speichereimer.

6. Installieren Sie Firebase CLI weltweit

   npm i -g firebase-tools

7. Melden Sie sich bei Firebase an

   firebase login

8. Holen Sie sich Ihre Projekt -ID

   firebase projects:list

9. Wählen Sie Ihre Projekt -ID aus

   firebase use your-project-id

10. Zu diesem Zeitpunkt haben Sie zwei Möglichkeiten. Führen Sie dieses Projekt entweder mit der FireBase in der Cloud oder lokal mit Emulator aus.

    1. Verwenden des Firebase Cloud Backend:

       1. Bereiten Sie Firestore -Regeln, Firestore -Indizes und Cloud -Speicherregeln bereit

          firebase deploy --except functions

       2. Führen Sie das Projekt aus

          npm run dev

    2. Verwenden von Firebase Local Emulator:

       1. Installieren Sie Java JDK Version 11 oder höher, bevor Sie fortfahren. Dies ist erforderlich, um die Emulatoren zu betreiben.

       2. Legen Sie die Umgebungsvariable NEXT_PUBLIC_USE_EMULATOR auf true in .env.development fest. Dadurch wird die App die Emulatoren anstelle des Cloud -Backends nutzt.

       3. Zu diesem Zeitpunkt können Sie den folgenden Befehl ausführen, um einen voll funktionsfähigen Twitter -Klon lokal auszuführen:

          npm run dev:emulators

Hinweis : Wenn Sie Firestore Indizes -Regeln bereitstellen, kann es einige Minuten dauern, bis Sie abgeschlossen sind. Bevor die Indizes aktiviert sind, erhalten Sie einen Fehler, wenn Sie die Daten von Firestore abrufen.

Sie können den Status Ihrer Firestore-Indizes mit dem folgenden Link überprüfen und your-project-id durch Ihre Projekt-ID ersetzen: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Optional:

• Wenn Sie Trenddaten von der Twitter -API erhalten möchten, müssen Sie ein Twitter -Entwicklerkonto erstellen und Ihre API -Schlüssel erhalten. Fügen Sie dann Ihre API -Schlüssel zu .env.development hinzu. Ich hoffe, Elon Musk lässt diese API nicht bezahlt?
• Wenn Sie die Benutzerstatistiken mit den gelöschten Tweets synchronisieren möchten, müssen Sie die Cloud -Funktionen für Firebase aktivieren. Stellen Sie dann die Cloud -Funktionen bereit.