FailDaily – Système de Chat

Proposition de design & architecture pour la messagerie en temps réel

1

Modification de la navigation

Suppression du bouton Publier dans le header · Ajout de l'onglet Messages

Situation actuelle AVANT
9:41
MA
MathieuA
il y a 12 min
J'ai oublié de sauvegarder 3h de code
Mon éditeur a planté juste avant le commit… RIP
💀 47 🔥 12 💬 8
ZL
ZoéLaroche
il y a 1h
J'ai envoyé ma démo à toute la boîte
Le mail était destiné qu'à mon équipe… avec les moqueries du client dedans 🙂
😱 103 ❤️ 34 💬 22
Accueil
Ajouter
Badges
Profil
❌ Bouton "Publier" dupliqué avec l'onglet "Ajouter" du bas
Nouvelle navigation APRÈS
9:41
3
MA
MathieuA
il y a 12 min
J'ai oublié de sauvegarder 3h de code
Mon éditeur a planté juste avant le commit… RIP
💀 47 🔥 12 💬 8
ZL
ZoéLaroche
il y a 1h
J'ai envoyé ma démo à toute la boîte
Le mail était destiné qu'à mon équipe…
😱 103 ❤️ 34 💬 22
Accueil
Ajouter
Badges
Messages
3
Profil
✅ Icône messages dans le header + onglet dédié en bas avec badge non lus
2

Page Messages – Liste des conversations

Accessible depuis l'onglet Messages ou l'icône dans le header

InboxNOUVEAU
9:41
Rechercher une conversation…
MA
MathieuA
Haha ça m'est arrivé exactement pareil 😂
12 min
2
TR
ThéoRenou
Tu as vu le fail de ce matin ? 🔥
1h
1
ZL
ZoéLaroche
Toi aussi tu as eu ce problème avec les logs ?
hier
LC
LéaColin
Merci pour le soutien 💜
mar.
NK
NathanK
Ok je comprends mieux maintenant !
lun.
Accueil
Ajouter
Badges
Messages
Profil
ConversationNOUVEAU
9:41
‹ Retour
MA
MathieuA
● En ligne
Aujourd'hui à 9:24
MA
💀 Fail de MathieuA J'ai oublié de sauvegarder 3h de code...
Haha je viens de voir ton fail, j'ai eu exactement la même chose la semaine dernière! 😂
Sérieux?! T'as réussi à récupérer quelque chose ?
9:25
MA
Nan rien du tout 💀 j'ai tout recodé de zéro. Au moins maintenant c'est mieux qu'avant lol
Hahaha la vraie leçon de vie 😂 on s'en remet toujours !
9:27
C'est pour ça que FailDaily existe non 😄
9:27
MA
Aa
Notif temps réelTEMPS RÉEL
9:41
4
MA
MathieuA
il y a 12 min
J'ai oublié de sauvegarder 3h de code
Mon éditeur a planté…
💀 47🔥 12💬 8
💬
MathieuA
Haha c'est exactement ça !…
Voir
Accueil
Ajouter
Badges
Messages
4
Profil
3

Schéma base de données

2 nouvelles tables MySQL · Aucun impact sur les tables existantes

conversations
idBIGINT UNSIGNEDPK, AUTO_INCREMENT
user1_idINT UNSIGNEDFK → users(id)
user2_idINT UNSIGNEDFK → users(id)
created_atDATETIMEDEFAULT NOW()
last_message_atDATETIMEpour tri inbox
UNIQUE KEY (user1_id, user2_id)
INDEX (last_message_at DESC)
messages
idBIGINT UNSIGNEDPK, AUTO_INCREMENT
conversation_idBIGINT UNSIGNEDFK → conversations(id)
sender_idINT UNSIGNEDFK → users(id)
contentTEXTmax 2000 cars
fail_ref_idBIGINT UNSIGNEDFK nullable → fails(id)
read_atDATETIMENULL = non lu
created_atDATETIMEDEFAULT NOW()
INDEX (conversation_id, created_at)
INDEX (sender_id)
user1_id < user2_id contrainte d'ordre → garantit l'unicité d'une conversation entre 2 utilisateurs
4

Architecture technique

Socket.io côté backend · Service Angular côté frontend

🗄️
Backend – REST API

  • GET /api/messages/conversations – Liste inbox triée par last_message_at
  • GET /api/messages/:conversationId – Historique paginé (cursor-based)
  • POST /api/messages/start – Créer/trouver une conversation avec un user
  • POST /api/messages/:conversationId/read – Marquer comme lu
  • GET /api/messages/unread-count – Nb messages non lus (pour badge)

⚡
Backend – Socket.io

  • Authentification via JWT dans le handshake (middleware)
  • join_conversation – Rejoindre la room d'une conversation
  • send_message → sauvegarde DB + emit new_message
  • typing_start / typing_stop → forward aux membres de la room
  • message_read → notifications de lecture

📱
Frontend – Services Angular

  • ChatService – Connexion Socket.io, envoi/réception de messages
  • MessagesPage – Liste des conversations (tab dédié)
  • ConversationPage – Fil de discussion avec scroll infini vers le haut
  • Badge unread – Observable global mis à jour en temps réel
  • Toast – Notification in-app quand message reçu hors conversation

🔒
Sécurité

  • Authentification JWT obligatoire pour toutes les routes et sockets
  • Vérification d'appartenance à chaque accès à une conversation
  • Rate limiting sur l'envoi (ex: 30 msg/min/user)
  • Sanitisation du contenu des messages (XSS)
  • Modération : possibilité de bloquer un utilisateur

✨
Fonctionnalités bonus

  • Partage de fail – Envoyer un fail existant dans une conversation
  • Indicateur de frappe – "X est en train d'écrire…"
  • Suppression de message – Soft delete côté DB
  • Push notifications – Intégration avec le système de push existant
  • Bloc utilisateur – Empêcher une convo non désirée

📦
Dépendances à ajouter

  • backend-api: socket.io (déjà dans l'écosystème Node)
  • frontend: socket.io-client
  • Aucune nouvelle base de données (même MySQL)
  • Aucune modification d'infrastructure (même port 3000)
  • 1 migration SQL uniquement (2 tables)
5

Plan d'implémentation

4 phases · De la migration SQL à l'UI finale

1

Migration SQL + modification navigation

Créer les 2 tables (conversations, messages). Supprimer le bouton "Publier" du header home. Ajouter l'onglet "Messages" dans la tab bar avec le badge unread.

migration SQL home.page.html tabs.page.html tabs.page.ts
2

Backend REST API

Routes /api/messages (conversations + messages + unread count). Controllers + vérifications d'autorisation. Tests des endpoints.

messages.routes.js messages.controller.js server.js
3

Backend Socket.io (temps réel)

Intégration Socket.io dans le serveur Express existant. Authentification JWT dans le handshake. Rooms par conversation. Événements : send_message, typing, read.

socket/chat.socket.js server.js
4

Frontend Angular – Pages & Service

ChatService (socket.io-client). MessagesPage (liste inbox). ConversationPage (fil de messages + input). Badge unread global dans TabsPage. Toast notification.

chat.service.ts messages.page.* conversation.page.* tabs.page.ts
Tu valides ce design ? 🚀
On peut démarrer par la Phase 1 (migration SQL + suppression du bouton Publier + ajout onglet Messages) dès maintenant. La Phase 2 (REST API) et Phase 3 (Socket.io) peuvent suivre dans la foulée.