Logo du développeur certifié Full Stack JavaScript et React The Wise Duck Dev

Chargement de

the wiseduckdev

image de fond dorée

Family Flow

Découvrez Family Flow, une application web conçue avec React pour simplifier le partage des tâches et la planification au sein des foyers. Co-développée dans le cadre d'un programme intensif de développement Web & Mobile.

RÔLE

  • Chef de produit
  • Scrum Master
  • Développeur principal Front-End
ReactTypeScriptMantine UIAxiosCSS / SassDotenvVitestGitGitHubRailway
Capture d'écran principale du projet Family Flow montrant le calendrier familial et l'interface de gestion des tâches

Gestionnaire de tâches familial conçu avec React

Au début de l'année 2024, j'ai co-développé Family Flow, une application web conçue pour simplifier le partage des tâches et la planification au sein des foyers. Développé dans le cadre de notre projet de fin d'études à l'école O'clock (1 500+ heures de formation intensive en développement Web et Mobile), ce projet est né d'une collaboration entre deux développeurs, et s'est concrétisé en un outil de productivité fonctionnel combinant UX réfléchie et exécution technique solide.

Aperçu du projet

L’idée était simple : créer une application web pour aider les familles à coordonner leurs tâches journalières, sans complexité ni surcharge. Nous avons ciblé un MVP capable de répondre à des cas d’usage concrets, avec une interface légère et adaptable à différents styles de vie.

Mon rôle

J’ai joué un rôle clé sur plusieurs aspects :

  • Chef de produit : définition des fonctionnalités, roadmap et personas cibles
  • Scrum Master : gestion des sprints et de la communication asynchrone
  • Lead Frontend : conception de l’architecture des composants, logique des états, et stylisation, UI/UX

Ce double regard sur le produit et la technique m’a permis de prendre des décisions impactantes à tous les niveaux du projet.

Créativité & inspiration

L'idée de Family Flow ne vient pas d'un client, mais de mon expérience personnelle.

Je suis devenu papa juste avant de commencer ma formation de développeur Full-Stack. Ce qui m’a frappé durant ces premiers mois, ce n'était pas seulement le manque de sommeil, mais la rapidité avec laquelle la communication peut se dégrader au sein d’une famille débordée. Les tâches s’accumulent, chacun fait de son mieux, mais parfois des choses passent entre les mailles du filet. Les malentendus se multiplient. La frustration grandit.

J’ai réalisé qu’à l’ère de l’hyperconnexion et de l’hyperproductivité imposée par nos modes de vie modernes, les familles manquent cruellement d’un espace simple pour organiser leurs quotidiens, communiquer sur ce qu’il y a à faire, sans friction ni microgestion. C’est de là qu’est née l’idée de Family Flow : une application web accessible et facile à prendre en main où chaque membre de la famille peut consulter, attribuer et gérer les tâches de la famille ensemble, réduisant ainsi la charge cognitive, minimisant les conflits et créant plus d’espace pour ce qui compte vraiment.

Ce projet reflète ma conviction que la créativité commence tout d’abord par une observation. En identifiant ce problème dans mon quotidien, me vint alors l’idée de créer une solution concrète visant à répondre à ce besoin, une solution qui s’avérer utile pour de nombreuses familles.

Capture d'écran du projet Family Flow montrant l'interface de gestion des activités et des événements

Stack & outils

  • Front-End: React, TypeScript, Mantine UI, CSS, Sass, Axios, Day.js, dotenv
  • Back-End: Node.js, Express, bcrypt, cors, express-jsdoc-swagger, joi, jsonwebtoken, multer, nodemailer, pg, faker
  • Base de données : PostgreSQL, SQL, Sqitch
  • Tests : Vitest, Jest
  • Déploiement : Railway
  • Design & prototypage : Excalidraw
  • Versioning : Git, GitHub

Nous avons utilisé Mantine UI pour accélérer le développement avec des composants accessibles, élégants et compatibles avec notre vision du projet. L’intégration de Vitest nous a permis d'assurer une bonne couverture des tests dès les premières étapes.

UX et points clés de conception

L’un de nos principaux défis était de rendre l’interface intuitive et adaptée à tous les membres de la famille, des parents à l’aise avec la technologie aux enfants et adolescents. Pour y parvenir, nous avons misé sur l’accessibilité, la prise en main rapide, un design minimaliste et efficient, et bien entendu l’expérience utilisateur, directement inspirées par l’observation des dynamiques familiales concernées.

Dès nos premières observations, nous avons identifié deux grands types d’activités familiales : les corvées et les événements. Pour refléter cette distinction, nous avons conçu un système d’icônes colorées : par exemple, jaune pour les événements et rouge pour les corvées, permettant aux utilisateurs de saisir immédiatement la nature de chaque tâche d’un seul coup d’œil.

Nous avons également implémenté un tri chronologique par défaut, garantissant que les activités les plus urgentes ou proches dans le temps apparaissent toujours en premier. Cette décision était essentielle pour rester pertinent, surtout dans des foyers gérant de multiples responsabilités.

Pour améliorer la personnalisation et la clarté, nous avons introduit des filtres intelligents. Chaque utilisateur pouvait choisir de n’afficher que les activités qui le concernaient, tandis que ceux préférant consulter l’agenda familial complet pouvaient toujours repérer facilement leurs propres tâches grâce à de subtils indicateurs visuels (points verts ou rouges sur les cartes d’activité).

Le design et le flow UI ont été prototypés avec Excalidraw et raffinés en collaboration avec mon coéquipier. Nous avons maintenu une approche mobile-first réactive, optimisée pour téléphones et tablettes, une fonctionnalité clé pour les familles en déplacement.

Nous avons finalisé le MVP en seulement cinq semaines, en équilibrant portée fonctionnelle et utilisabilité. Bien que ce projet présente de nombreuses améliorations possibles (il y a toujours place à amélioration), la fondation de celui-ci reste néanmoins très solide et le concept hautement adaptable à une utilisation réelle.

Déploiement & QA

Nous avons déployé Family Flow via Railway, en exploitant un pipeline CI/CD pour des mises en ligne rapides et fiables. Tout au long du cycle de développement, nous avons appliqué les pratiques agiles : synchronisations quotidiennes, branches par fonctionnalité avec Git, et rétrospectives hebdomadaires. Nous avons également mis en place des tests avec Vitest afin d’assurer la bonne fonctionnalité de la plateforme, tout veillant bien à effectuer en parallèle des tests directs sur différents médiums tels que sur tablette ou téléphone intelligent afin de s’assurer du bon fonctionnement de l’application.

Dès le départ, il nous est apparu important d’établir dès le départ une architecture qui pourrait supporter de futurs itérations et évolutions. Notre vision allait bien au-delà du MVP : nous avons conçu Family Flow avec la vision ambitieuse que ce projet pourrait potentiellement un jour devenir le réseau social pour les familles.

Parmi les possibles évolutions envisagées il y avait :

  • Extension des catégories d’activités pour un meilleur filtrage
  • Flux d’actualités familial pour partager mises à jour et moments importants
  • Transformer le projet en PWA
  • Intégration d’une fonctionnalité chat permettant d’améliorer encore la communication
  • Et à terme, intégration d’un assistant ou chatbot IA pour accompagner les utilisateurs en temps réel
Capture d'écran du projet Family Flow montrant l'interface d'un profil utilisateur avec personnalisation de l'avatar

Résultats

Le MVP a été livré en moins de cinq semaines, et testé dans des conditions réelles par plusieurs familles. Le retour était unanime : une interface agréable, simple, et facile à prendre en main. Nous avons choisi de suspendre la roadmap pour nous concentrer sur de nouveaux projets, mais les bases sont solides pour un futur développement.

Ce que j'en ai retiré

Ce projet a été ma première véritable expérience de développement de bout en bout. Plus que du code, il m’a appris à construire un produit cohérent et orienté vers un objectif clair, depuis zéro.

J’ai appris à traduire une idée en projet structuré en partant des fondamentaux : comprendre le problème, identifier les utilisateurs cibles, analyser leurs besoins réels et définir des personas clairs. À partir de cette base, nous avons construit une vision produit centrée sur l’utilité, la simplicité et l'efficacité.

J’ai acquis une solide compréhension de la stratégie produit : définir un MVP lean mais impactant, rédiger des user stories claires et utilisables, concevoir des parcours UI/UX intuitifs adaptés aux familles. Chaque décision technique ou de design visait à servir une expérience utilisateur cohérente et engageante.

Sur le plan technique, j’ai consolidé mes compétences en conception d’architectures logicielles robustes et en développement de designs responsive. J’ai également progressé en cybersécurité, dans l’utilisation des méthodes agiles, la collaboration via Git/GitHub et le travail en équipe à distance. J’ai appris à gérer efficacement le versioning d’un projet, à identifier et corriger rapidement des bugs, à déployer un produit en ligne et à l’améliorer en continu grâce aux retours des utilisateurs, même dans des délais serrés.

Tout aussi important, j’ai goûté à la réalité de la livraison produit : équilibrer vision et contraintes, faire des compromis tout en assurant la livraison d’une solution parfaitement fonctionnelle et fiable dans les temps.

Enfin, mon parcours en Entrepreneuriat et Création d’Entreprise à HEC Montréal a été déterminant dans l’orientation de ce projet. Il m’a donné l’incroyable opportunité de penser non seulement comme un développeur, mais également comme un gestionnaire de produit : quelqu’un qui imagine, conçoit et livre des solutions utiles et parfaitement cohérentes avec le marché visé, et pour cela je suis profondément reconnaissant.