L'app tend à reproduire la partie chat de Facebook.
-
Possibilité d'authentification par :
- au moins email + mot de passe
- éventuellement un ou plusieurs réseau(x) social(aux) : Google et/ou GitHub
-
Barre latérale indiquant la liste des contacts et leur état, avec mise à jour en temps réel (Firebase le permet)
-
Possibilité de chercher un contact par son nom
-
Icône dans la navbar indiquant le nombre total de messages non-lus
-
Quand on clique sur l'avatar d'un contact, cela ouvre la fenêtre de chat avec ce contact (à voir si on autorise plusieurs fenêtres de chat en même temps, comme Facebook sur desktop, ou une seule). Cela pour effet de marquer les messages non-lus de ce contact comme lus.
-
Quand on envoie un message, celui-ci est reçu immédiatement de l'autre côté
-
Utiliser Firebase Realtime Database ou Firestore, et Firebase Authentication
-
Il y aura probablement une certaine réflexion sur : comment structurer les données dans la database
-
Pour le layout, vous pouvez :
- vous inspirer de templates existants (par exemple https://bootsnipp.com/tags/chat/4)
- et/ou utiliser Reactstrap, Material UI, ou encore un des très nombreux kits de composants (attention ça peut donner le vertige !)
- un des avantages de Reactstrap, c'est l'existence de nombreux templates open source basés sur Bootstrap...
-
Ce serait top d'intégrer des tests ! Ceci risque de poser la question du "couplage" entre vos composants et Firebase. Il faudra (je pense) réfléchir à une petite couche d'abstraction entre vos composants et le SDK Firebase.
-
Bien sûr vous êtes bienvenus pour toute question sur un des points précédents, car je vous lance un peu en terre inconnue !
-
(Auth) Sign in with prebuilt UI : c'est ce qu'il y a dans la quête... à voir si c'est pertinent à intégrer dans React
-
Exemple d'utilisation de l'authentification
- Repo : https://github.com/bhubr/firebase-sample-app
- Note : la façon dont j'ai géré l'update du profil utilisateur n'est pas optimale. Firebase fournit en effet ce qu'il faut pour stocker le nom d'affichage (
displayName
), l'avatar (photoURL
) : https://firebase.google.com/docs/auth/web/manage-users
-
Pour utiliser Redux, cette librairie vous aidera : https://github.com/prescottprue/react-redux-firebase
-
Deux articles concernant les tests (il y en a bien d'autres) :