ÉTUDE DE CAS · PRODUCTIVITÉ
Gestionnaire de tâches
Un espace kanban où chacun voit les changements des autres au moment où ils se produisent : sans rechargement, sans conflit.
- RÔLE
- Lead frontend
- DURÉE
- 8 semaines
- ÉQUIPE
- 3 personnes
- PLATEFORME
- Application web
IDENTITÉ PRODUIT
Flowboard
Faites avancer le travail, ensemble.
01 · APERÇU
Aperçu du projet
TEMPS DE DÉVELOPPEMENT
8 semaines
Du prototype au déploiement en équipe
TAILLE DE L'ÉQUIPE
3 personnes
Lead frontend, backend, design
RÉSULTAT CLÉ
Sync < 100 ms
Les changements apparaissent instantanément pour tous
LE PROBLÈME
L'équipe gérait ses sprints entre un tableau blanc, un tableur et des fils de discussion. Les cartes bougeaient à un endroit mais pas aux autres, si bien que personne ne faisait confiance au tableau.
L'APPROCHE
Flowboard garde une source de vérité unique dans Supabase et diffuse chaque changement sur des canaux temps réel, avec des mises à jour optimistes pour que le glisser-déposer soit instantané.
< 100 ms
pour synchroniser un déplacement avec toute l'équipe
5 h
gagnées par sprint sur les réunions de suivi
0
modification conflictuelle sur les tableaux partagés
02 · FONCTIONNALITÉS
Ce qu'il fait
Tableaux temps réel
Chaque déplacement, modification et commentaire se synchronise en direct avec l'équipe.
Glisser-déposer
Les mises à jour optimistes rendent les déplacements instantanés, avec retour arrière en cas d'échec.
Présence en direct
Voyez qui consulte et modifie chaque carte en ce moment.
Partage de fichiers
Joignez des fichiers avec aperçu dans le panneau de la tâche.
Rapports de sprint
Vélocité et burndown, exportables en CSV.
Invitations par lien magique
Invitez vos coéquipiers par e-mail, sans mot de passe à gérer.
03 · PROCESSUS
Comment il a été conçu
SEMAINE 1
Découvrir
Cartographie du déroulement réel des sprints et des endroits où le suivi se perdait.
- Carte du workflow
- Périmètre du MVP
SEMAINE 2
Concevoir
Vues tableau, liste et chronologie, plus le panneau de tâche.
- Prototype Figma
- Bibliothèque de composants
SEMAINE 3–7
Développer
Application Next.js, schéma Supabase avec sécurité au niveau des lignes et canaux temps réel.
- Application web
- Couche temps réel
SEMAINE 8
Lancer
Déploiement en plein sprint dans l'équipe, puis auprès de deux équipes partenaires.
- Déploiement en équipe
- 3 équipes en production
04 · STACK TECHNIQUE
Technologies
FRONTEND
- Next.js
- TypeScript
- Tailwind CSS
TEMPS RÉEL
- Supabase Realtime
- Presence
- Broadcast
DONNÉES
- PostgreSQL
- Row-level security
- Storage
OUTILLAGE
- dnd-kit
- Zod
- Playwright
ARCHITECTURE
Application Flowboard
Next.js + dnd-kit
Supabase
Auth, RLS, temps réel
PostgreSQL
Tableaux, tâches
Canaux temps réel
Broadcast, présence
Storage
Pièces jointes
05 · ENSEIGNEMENTS
Défis et enseignements
Déplacements simultanés
DÉFI
Deux personnes déplaçant la même carte mettaient le tableau dans le désordre.
RÉSULTAT
Des clés d'ordre fractionnaires avec positions confirmées par le serveur ont réglé proprement les conflits.
Sécuriser les tableaux partagés
DÉFI
Des personnes retirées d'un tableau pouvaient encore en charger les tâches.
RÉSULTAT
La sécurité au niveau des lignes de Postgres a limité chaque requête aux membres du tableau.
Ce projet vous intéresse ?
Je vous présente volontiers le code, les choix qui l'ont guidé ou la façon dont une solution similaire pourrait servir votre équipe.