Voulez-vous faire passer vos compétences de développeur au niveau supérieur ou voulez-vous impressionner votre futur employeur ? Alors construisez ce clone LinkedIn !

Partie 4

Dans la partie 3 de cette série, nous avons construit le composant Feed & the Widgets, et nous avons connecté le composant feed à Firestore.

Dans ce dernier article, nous allons configurer Redux pour gérer l'état de l'utilisateur, construire la page de connexion, et enfin déployer sur Firebase !

1. — Configuration de Redux

Redux est une bibliothèque JavaScript pour gérer l'état de l'application. Dans le premier épisode, nous avons créé un démarreur d'application React avec le Redux Toolkit . Cela a créé un modèle pour utiliser Redux avec React. Avant de continuer, nous devons réorganiser les dossiers créés par le modèle.

• Supprimez le Counter.module.csset le Counter.jsfichier du counterdossier.
• Déplacez le counterSlice.jsfichier dans le featuresdossier.
• Supprimez le counterdossier et renommez le counterSlice.jsfichier en userSlice.js.

• Remplacez le code dans userSlice.jspar ce qui suit :
• Remplacez le contenu du store.jsfichier par ce qui suit :

Lorsque l'utilisateur se déconnecte, l'état de l'utilisateur sera égal à null, tandis que lorsque l'utilisateur se connecte, l'état sera égal à action.payload, un objet contenant les informations de l'utilisateur.

• Allez maintenant sur App.jset ajoutez le code suivant :

const user = useSelector(selectUser)

• Dans App.js, utilisez un opérateur ternaire pour afficher l'application principale si l'utilisateur est connecté ou, si l'utilisateur est déconnecté ou n'a pas de profil, il affichera la page de connexion.

Nous devons maintenant créer la page de connexion.

2. — Créer la page de connexion

• Dans le dossier, créez un fichier nommé . Login Login.js
• Une fois que vous êtes dans le fichier, tapez rfce pour utiliser l' extrait de ES7 Snippets .
• Toujours dans le Login dossier, créez un Login.cssfichier et importez-le dans votre Login.jscomposant.
• Le Login composant final ressemblera à ceci :

L'enregistrement est géré avec la fonction flèche registeravec l'utilisation de Firebase Authentication et createUserWithEmailAndPassword.

L'authentification est gérée avec la fonction flèche loginToAppavec l'utilisation de Firebase Authentication et signInWithEmailAndPassword.

Les informations collectées auprès de l'utilisateur sont poussées dans le magasin redux avec UseDispatch()crochet.

• Pour donner du style à notre Login.jscomposant, ouvrez Login.csset ajoutez le code suivant :

Pour compléter notre application, nous devons maintenant ajouter la fonctionnalité de déconnexion, garder l'utilisateur connecté une fois qu'il est connecté et afficher les données dans le composant Feed de la base de données Firestore.

• De retour au App.jscomposant, ajoutez le code suivant :

• Maintenant, allez à HeaderOption.jset ajoutez un onClickévénement à la HeaderOptionfonction.
• Accédez à Header.jset ajoutez le code suivant :

• Allez maintenant dans le Sidebar.jsfichier et modifiez le contenu comme suit :
• Accédez au Feed.jsfichier et modifiez le contenu comme suit :

Toutes nos félicitations! Vous venez de construire un clone LinkedIn !!

3. — Déployer sur Firebase

Avant le déploiement, assurez-vous d'installer les outils Firebase.

• Pour déployer notre projet, allez sur console et tapez la commande « firebase init »

• Sélectionnez pour utiliser un projet existant

• Tapez dans le répertoire public pour être « build »

• Configurer en tant qu'application d'une seule page
• Exécutez maintenant dans la console la commande « npm run build »

Une fois la construction terminée, tapez dans la console " firebase deploy ".

Une fois que vous avez terminé, vous devriez obtenir une URL où votre application est hébergée en ligne. Découvrez le mien ici :https://linkedin-clone-5ebs.web.app/.

Toutes nos félicitations!!! Vous venez de déployer votre Google Clone sur Firebase Hosting !!

Conclusion

Étonnante! Vous venez de réaliser un Clone LinkedIn ! J'espère que vous vous êtes amusé à construire ce projet et que vous avez atteint le résultat final !

Si vous vous êtes perdu en cours de route, voici le lien vers la partie 1 , la partie 2 et la partie 3 et, comme promis, le code source complet sur mon GitHub !