twitter clone

Clone Twitter construit dans Next.js + TypeScript + Tailwind CSS à l'aide de Cloud Firestore et de stockage

Aperçu?

showcase.mp4

Caractéristiques

• Authentification avec l'authentification de la base de feu
• Composants de réaction fortement typés avec dactylographie
• Les utilisateurs peuvent ajouter des tweets, comme retweet et répondre
• Les utilisateurs peuvent supprimer les tweets, ajouter un tweet aux signets et épingler leur tweet
• Les utilisateurs peuvent ajouter des images et des GIF pour tweeter
• Les utilisateurs peuvent suivre et désabonner d'autres utilisateurs
• Les utilisateurs peuvent voir leurs abonnés et les autres et la liste suivante
• Les utilisateurs peuvent voir tous les utilisateurs et la liste des tendances
• Mises à jour en temps réel goûts, retweets et profil utilisateur
• Données de tendance en temps réel de l'API Twitter
• L'utilisateur peut modifier son profil
• Conception réactive pour le mobile, la tablette et le bureau
• Les utilisateurs peuvent personnaliser la palette de couleurs du site et l'arrière-plan des couleurs
• Toutes les téléchargements d'images sont stockés sur le stockage du cloud de base de feu

Tech?

• Next.js
• Manuscrit
• CSS du vent arrière
• Base de feu
• SWR
• Ui sans tête
• React toast chaud
• Mouvement de rédaction

Développement

Voici les étapes pour exécuter le projet localement.

1. Cloner le référentiel

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

2. Installer des dépendances

   npm i

3. Créez un projet Firebase et sélectionnez l'application Web

4. Ajoutez votre configuration de base de feu à .env.development . Notez que NEXT_PUBLIC_MEASUREMENT_ID est facultatif

5. Assurez-vous que vous avez activé les services Firebase suivants:

   • Authentification. Activez la méthode de connexion Google.
   • Cloud Firestore. Créez une base de données et définissez son emplacement sur votre région la plus proche.
   • Stockage cloud. Créez un seau de stockage.

6. Installer Firebase CLI dans le monde entier

   npm i -g firebase-tools

7. Connectez-vous à Firebase

   firebase login

8. Obtenez votre identifiant de projet

   firebase projects:list

9. Sélectionnez votre ID de projet

   firebase use your-project-id

10. À ce stade, vous avez deux choix. Soit exécuter ce projet à l'aide de la base de feu sur le nuage ou localement à l'aide de l'émulateur.

    1. Utilisation du backend Cloud Firebase:

       1. Déployer les règles de Firestore, les index Firestore et les règles de stockage cloud

          firebase deploy --except functions

       2. Exécuter le projet

          npm run dev

    2. Utilisation de l'émulateur local de Firebase:

       1. Installez Java JDK version 11 ou plus avant de continuer. Cela est nécessaire pour gérer les émulateurs.

       2. Définissez la variable d'environnement NEXT_PUBLIC_USE_EMULATOR sur true dans .env.development . Cela permettra à l'application d'utiliser les émulateurs au lieu du backend cloud.

       3. À ce stade, vous pouvez exécuter la commande suivante pour avoir un clone Twitter entièrement fonctionnel en cours d'exécution localement:

          npm run dev:emulators

Remarque : Lorsque vous déploiez les règles des index Firestore, cela peut prendre quelques minutes. Ainsi, avant l'activation des index, vous obtiendrez une erreur lorsque vous récupérerez les données de Firestore.

Vous pouvez vérifier l'état de vos index Firestore avec le lien ci-dessous, remplacez your-project-id par votre ID de projet: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Facultatif:

• Si vous souhaitez obtenir des données de tendance de l'API Twitter, vous devez créer un compte de développeur Twitter et obtenir vos clés API. Ajoutez ensuite vos clés API à .env.development . J'espère qu'Elon Musk ne fait pas que cette API soit payée ?.
• Si vous souhaitez que les statistiques utilisateur soient synchronisées avec les tweets supprimés, vous devez activer les fonctions Cloud pour Firebase. Déployez ensuite les fonctions cloud.