FlowBoard - Application Web SaaS de Productivité
Durée : 1 mois
Aperçu
Problématique
Les freelances et créatifs indépendants utilisent quotidiennement une multitude d'outils numériques pour gérer leur activité professionnelle : un tableur pour suivre leurs revenus et dépenses, une application de gestion de tâches pour organiser leurs projets, un service de stockage cloud pour conserver leurs documents. Cette fragmentation entraîne une perte de temps significative, une dispersion de l'information et une absence de vue d'ensemble sur la santé financière et la charge de travail. Les solutions existantes sont soit trop complexes car conçues pour les grandes entreprises, soit trop limitées car elles ne couvrent qu'un seul besoin à la fois. Il manque une plateforme unifiée, légère et accessible, pensée spécifiquement pour les travailleurs indépendants qui souhaitent se concentrer sur leur cœur de métier plutôt que sur la gestion administrative.
Objectif
L'objectif principal était de concevoir et développer une application SaaS full-stack capable de centraliser les trois piliers de la gestion freelance que sont les finances, les tâches et les fichiers, au sein d'une interface unique, moderne et performante. Le projet devait démontrer une maîtrise complète du cycle de développement web, depuis la conception de l'architecture jusqu'au déploiement en production. Sur le plan technique, il s'agissait de mettre en œuvre une authentification sécurisée sans mot de passe, une base de données relationnelle avec des relations complexes entre les entités, une API REST performante, et une interface utilisateur responsive offrant une expérience fluide sur mobile, tablette et desktop. Sur le plan fonctionnel, l'application devait permettre aux utilisateurs de suivre leurs transactions financières avec des graphiques de répartition, d'organiser leurs projets grâce à un tableau Kanban avec glisser-déposer, et de stocker leurs documents avec un système d'upload intuitif. Un soin particulier devait également être apporté au design visuel, à l'accessibilité via un mode sombre, au référencement naturel et à la crédibilité du service via des pages légales complètes.
Solution
FlowBoard répond à cette problématique en proposant une plateforme tout-en-un accessible depuis n'importe quel appareil. L'utilisateur se connecte via un Magic Link reçu par email, sans avoir à retenir de mot de passe. Dès son arrivée sur le dashboard, il bénéficie d'une vue d'ensemble en temps réel de son solde financier, du nombre de tâches en cours et de ses fichiers récents. Le module Finances permet d'ajouter, filtrer et rechercher des transactions par type, catégorie ou mot-clé, avec un graphique en donut pour visualiser la répartition entre revenus et dépenses, ainsi qu'un export PDF des rapports mensuels. Le module Tâches propose un tableau Kanban à trois colonnes où l'utilisateur peut créer, déplacer et supprimer des tâches par simple glisser-déposer, avec des niveaux de priorité et des dates d'échéance. Le module Fichiers offre un système d'upload par drag-and-drop avec prévisualisation des images et téléchargement. L'ensemble de l'application est conçu en responsive design avec une barre de navigation adaptée aux écrans mobiles, un mode sombre automatique, et une landing page professionnelle présentant les fonctionnalités du service. Le SEO a été optimisé avec des métadonnées, un sitemap dynamique et un fichier robots.txt. L'application est hébergée sur Vercel avec une base de données PostgreSQL sur Supabase, et les emails transactionnels sont envoyés via Resend. FlowBoard démontre ainsi qu'il est possible de remplacer trois outils distincts par une seule plateforme sans sacrifier la simplicité d'utilisation ni la qualité technique.
Processus
Analyse & Conception
Définition du cahier des charges, identification des besoins utilisateurs, conception de l'architecture technique, modélisation de la base de données avec les entités User, Transaction, Task et File, et création du schéma Prisma.
Développement du Backend
Mise en place de l'authentification Magic Link avec NextAuth, création des API REST pour les modules Finances, Tâches et Fichiers, connexion à la base de données PostgreSQL via Prisma, et configuration de l'envoi d'emails transactionnels.
Développement du Frontend
Création de l'interface utilisateur avec Next.js et shadcn/ui, intégration du tableau Kanban avec drag-and-drop, mise en place des graphiques Recharts, upload de fichiers avec react-dropzone, et responsive design complet avec mode sombre.
Déploiement & Optimisation
Déploiement sur Vercel, configuration des variables d'environnement de production, mise en place du SEO avec sitemap et robots.txt, optimisation des performances, et tests de recette sur tous les appareils.
Architecture technique
L'architecture de FlowBoard repose sur une séparation claire entre le frontend, le backend et la couche de données, le tout orchestré par Next.js 16 et son App Router. Le frontend utilise React avec TypeScript pour le typage statique, Tailwind CSS pour le styling utilitaire et la bibliothèque shadcn/ui pour les composants d'interface prêts à l'emploi et accessibles. Le backend s'appuie sur les API Routes de Next.js pour exposer des endpoints REST sécurisés, tandis que l'authentification est gérée par NextAuth 5 avec un provider Email Magic Link, envoyé via Resend en production. La couche de données utilise PostgreSQL comme base de données relationnelle, hébergée sur Supabase, et l'ORM Prisma 6 pour la gestion des migrations, des relations entre entités et des requêtes typées. Les fichiers uploadés par les utilisateurs sont stockés sur le système de fichiers du serveur. Enfin, l'application est déployée sur Vercel avec un déploiement continu depuis GitHub, et le SEO est assuré par les métadonnées natives de Next.js, un sitemap dynamique et un fichier robots.txt.
Résultats
76 %
Taux de conversion
FlowBoard est aujourd'hui une application web complète, responsive et accessible en ligne. Le projet compte 4 modules fonctionnels interconnectés, une authentification sécurisée.