Opens in a new tab

FlowExpense

Le projet

Simplifier le suivi des dépenses professionnelles

FlowExpense est une application web permettant de centraliser les dépenses professionnelles, les remboursements de frais et leurs justificatifs dans un même espace.

J’ai fait évoluer ce projet avec l’objectif de rendre la gestion quotidienne plus simple : enregistrer une dépense, retrouver une facture, consulter les montants et exporter les informations utiles. L’application propose un fonctionnement adapté à un usage individuel, tout en permettant de gérer plusieurs utilisateurs et organisations.

Le travail a également porté sur l’interface, les traductions et la mise en ligne. Initialement utilisée en local avec Docker, FlowExpense est désormais accessible depuis mon site, avec une connexion pour les comptes enregistrés et un accès invité permettant de découvrir l’application avec des données fictives.

Tester l’application

Choisissez « Essayer en invité » sur la page de connexion pour découvrir l’application sans créer de compte.

Le tableau de bord de FlowExpense, avec des dépenses fictives et leur récapitulatif mensuel.

Gestion des dépenses

Objectif

Application web

Type de projet

Conception & Dév

Mon rôle

PHP · SQLite · Docker

Stack principale

L’application en action

Les dépenses et leurs justificatifs réunis au même endroit

FlowExpense permet d’enregistrer des dépenses professionnelles ou des remboursements, de détailler leurs lignes et d’y joindre les justificatifs correspondants. Les montants hors taxes, la TVA et les totaux sont calculés à partir des informations saisies.

Le tableau de bord facilite la recherche grâce aux filtres par mois, catégorie, bénéficiaire, statut et type de dépense. Un bilan mensuel aide à comprendre la répartition des dépenses, tandis que les exports permettent de récupérer les données en PDF, Excel ou dans une archive comprenant les justificatifs.

La version invitée reprend l’interface de l’application dans un espace temporaire indépendant. Elle contient des exemples prêts à consulter et permet de tester les fonctionnalités accessibles sans accéder aux données des comptes enregistrés.

Processus de réalisation

Les différentes étapes de la conception

Définir la vision globale du projet

FlowExpense est parti de l’envie de créer une application simple pour centraliser les dépenses professionnelles et leurs justificatifs. Avant de développer, j’ai réfléchi aux besoins d’un indépendant : enregistrer une dépense, retrouver une facture, suivre les montants et récupérer les informations utiles.

Cette première réflexion a permis de définir les fonctionnalités essentielles et les principaux parcours. L’idée était de construire une base utilisable, puis de la faire évoluer à partir des essais et des retours.

Construire une première version et découvrir Docker

La réalisation a commencé par les fonctions principales : connexion, saisie des dépenses, calcul des montants et ajout de justificatifs. J’ai avancé progressivement, avec l’aide de l’IA pour la mise en œuvre technique.

Docker était nouveau pour moi et sa prise en main a représenté une étape importante. J’ai dû comprendre comment lancer l’application, relier les fichiers à l’environnement et conserver les données. Cette phase m’a permis de disposer d’une première version fonctionnelle à tester en local.

Tester, corriger et recueillir un avis extérieur

Une fois cette version utilisable, j’ai testé les différents parcours pour repérer les erreurs et les comportements inattendus. Les essais ont conduit à des corrections, mais aussi à l’ajout de fonctionnalités qui n’avaient pas été prévues au départ.

J’ai également demandé l’avis d’un indépendant pour confronter le projet à une utilisation concrète. Ce regard extérieur m’a permis de prendre du recul et de vérifier que les fonctions proposées répondaient à des besoins réels avant de consacrer davantage de temps au design.

Concevoir le design et affiner l’expérience

Après validation des principales fonctionnalités, je me suis concentré sur l’interface : organisation des menus, lisibilité des informations, disposition des formulaires et cohérence des boutons.

Les nouveaux essais et retours ont ensuite permis d’affiner cette première proposition. Le tableau de bord a été réorganisé pour rendre les dépenses plus accessibles, les exports ont été regroupés et plusieurs écrans ont été simplifiés. Le design et les fonctionnalités ont continué à évoluer ensemble, au fil des améliorations.

Mettre en ligne et proposer une démonstration

La dernière étape a été de passer d’une application locale à une version accessible sur mon hébergement. Cette transition a demandé de préparer l’installation et de séparer les fichiers publics des données privées.

Pour permettre aux visiteurs du portfolio de découvrir FlowExpense, j’ai ajouté un accès Guest avec des dépenses fictives. Les comptes enregistrés conservent leur espace personnel, tandis que les invités disposent d’un environnement de démonstration indépendant.

Le code a également été publié sur GitHub pour présenter le projet et suivre son évolution.