Projet Personnel 2024 En cours

TaskFlow

Gestionnaire de tâches collaboratif en temps réel, inspiré de Trello et Linear. Les équipes créent des tableaux Kanban, déplacent des cartes par drag & drop et voient les modifications de leurs coéquipiers instantanément grâce aux WebSockets. Projet personnel pour approfondir le temps réel et l'architecture full-stack.

ReactNode.jsSocket.io MongoDBExpressJWTSwagger

GitHub Démo live

Captures d'écran

📋 Tableau Kanban principal Remplacer par <img src="img/taskflow/board.png">

Vue tableau avec colonnes et cartes drag & drop

⚡ Collaboration temps réel Remplacer par <img src="img/taskflow/realtime.png">

Indicateurs de présence et modifications en direct

🗒️ Détail d'une carte Remplacer par <img src="img/taskflow/card.png">

Modal de détail — description, membres, étiquettes

🔔 Notifications temps réel Remplacer par <img src="img/taskflow/notifications.png">

Centre de notifications et activité du tableau

Genèse du projet

Pourquoi TaskFlow ?

TaskFlow est né d'une frustration personnelle : les outils de gestion de tâches existants (Trello, Notion, Jira) sont soit trop lourds, soit trop limités dans leur version gratuite. L'objectif principal était de construire un projet de bout en bout en me confrontant à des problématiques techniques que mes projets scolaires n'abordaient pas : le temps réel, la gestion des conflits de données et l'architecture orientée événements.

Le choix de MongoDB (au lieu de MySQL habituel) était délibéré : les données d'un tableau Kanban — cartes, colonnes, membres — sont naturellement imbriquées et leur schéma évolue fréquemment. Un document MongoDB représente un tableau entier avec toutes ses données, ce qui simplifie les lectures mais complexifie les mises à jour partielles.

La partie la plus challenging du projet a été d'implémenter la synchronisation temps réel multi-utilisateurs : quand Alice déplace une carte pendant que Bob en modifie le titre, les deux utilisateurs doivent voir un état cohérent sans rafraîchissement. Socket.io avec des rooms par tableau résout ce problème élégamment.

Ce projet est mon laboratoire personnel : je l'utilise pour tester de nouvelles technologies (TypeScript, tests E2E avec Playwright, CI/CD GitHub Actions) avant de les adopter dans mes projets professionnels.

Fonctionnalités

Ce que fait l'application

Temps réel via WebSockets

Socket.io avec rooms par tableau — chaque action (ajout, déplacement, modification) est diffusée instantanément à tous les membres.

Drag & drop inter-colonnes

Déplacement fluide des cartes entre colonnes avec @dnd-kit. L'ordre est persisté en base et synchronisé en temps réel.

Gestion d'équipe

Invitations par e-mail, rôles (Owner, Admin, Member), assignation de membres sur les cartes avec avatars.

Étiquettes & priorités

Étiquettes colorées personnalisables, niveaux de priorité (Urgent / High / Normal / Low) et dates d'échéance avec alertes.

Notifications en temps réel

Centre de notifications pour les mentions (@user), assignations et modifications sur les cartes suivies.

API REST documentée

Tous les endpoints sont documentés avec Swagger/OpenAPI. L'API est consommable indépendamment du frontend React.

Authentification JWT sécurisée

Access token (15min) + Refresh token (7j) stocké en httpOnly cookie. Rotation des tokens à chaque refresh.

Indicateurs de présence

Avatars des membres actuellement connectés sur un tableau, avec indicateur de la carte qu'ils sont en train de modifier.

Architecture

Comment c'est construit

L'application suit une architecture client-serveur découplée. Le frontend React communique avec le backend via deux canaux : l'API REST (Express) pour les opérations CRUD classiques, et Socket.io pour les événements temps réel. Les deux partagent le même processus Node.js mais sont clairement séparés dans le code.

MongoDB stocke les données avec un modèle de document par tableau contenant ses colonnes et ses cartes. Cette dénormalisation optimise les lectures (un seul fetch pour tout un tableau) au prix d'une logique de mise à jour plus complexe via les opérateurs atomiques de MongoDB ($set, $push, $pull, arrayFilters).

React 18Frontend SPA

Node.jsBackend

Express 4API REST

Socket.ioTemps réel

MongoDBBase de données

MongooseODM

JWTAuth

@dnd-kitDrag & Drop

SwaggerAPI docs

JestTests

Défis & apprentissages

Ce que j'ai appris

Gestion des conflits temps réel

Quand deux utilisateurs modifient la même carte simultanément, laquelle des deux modifications prime ? J'ai implémenté un système de verrous optimistes basé sur les timestamps : la modification la plus récente gagne, et un toast avertit l'autre utilisateur que ses changements ont été écrasés.

Drag & drop avec synchronisation

Combiner une bibliothèque de drag & drop (@dnd-kit) avec la mise à jour optimiste de l'UI et la synchronisation Socket.io était délicat. La mise à jour de l'ordre local avant la confirmation serveur garantit une UX fluide, avec rollback en cas d'erreur.

Sécurité JWT et rotation des tokens

Implémenter correctement la rotation des refresh tokens (chaque utilisation génère un nouveau token, l'ancien est révoqué) a nécessité la gestion d'une liste noire en mémoire (Redis-like avec un Map Node.js) pour les tokens invalidés avant expiration naturelle.

MongoDB vs SQL — trouver le bon modèle

J'ai refactorisé le schéma deux fois avant de trouver le bon équilibre entre dénormalisation (performance de lecture) et maintenabilité. Trop dénormalisé = mises à jour complexes, trop normalisé = perd tout l'intérêt de MongoDB.