04 22 13 19 47
FrançaisEnglish — non disponible sur cette page
Audit gratuit

Logo Mejid & Co

Étude de cas · Développement logiciel

Chaque avance de frais,vérifiable depuis le téléphone

Mejid & Co engage régulièrement des dépenses pour le compte de ses clients, puis se fait rembourser. MZ Informatique a conçu MejidCo, une application web installable qui relie l'entreprise à ses clients : avances de frais, remboursements, dossiers et justificatifs, notifications comprises.

Illustrations reconstituées d'après l'interface de l'application, sur données fictives. Aucune donnée client n'est reproduite.
Client
Mejid & Co
Secteur
Services privés · gestion immobilière, location de véhicules, accueil VIP
Format
Application web installable (PWA), en français et en anglais
Notre rôle
Conception et développement de l'application

Six chapitres

01

Des dépenses engagées pour le compte des clients

Mejid & Co propose à ses clients un ensemble de prestations. Dans le cadre de ces services, l'entreprise engage régulièrement des dépenses pour le compte de ses clients, puis se fait rembourser. Ce sont les débours.

Les prestations

  • Gestion immobilière
  • Location de véhicules avec ou sans chauffeur
  • Accueil VIP
  • Réservation d'hôtel

La vie d'un débours

  1. La dépenseEngagée pour le compte du client.
  2. Le clientChaque dépense lui est rattachée.
  3. Le dossierParfois, elle rejoint un dossier.
  4. Le justificatifLa pièce accompagne l'opération.
  5. Le remboursementMejid & Co se fait rembourser.

Les clients, eux, consultent ces informations depuis leur téléphone, en français ou en anglais. MZ Informatique a conçu MejidCo pour ce suivi.

02

Ce que le client doit pouvoir vérifier

Une avance de frais n'est utile au client que s'il peut la vérifier : le montant, la date du paiement, le dossier concerné et le justificatif.

  1. Le montantMis en avant, en tête du détail.
  2. La date du paiementRappelée au-dessus de l'opération.
  3. Le dossier concernéUn lien direct vers le dossier.
  4. Le justificatifLisible dans l'application, PDF et photos HEIC compris.

03

Prévenu, sans ouvrir l'application

Il fallait que le client soit prévenu sans avoir à ouvrir l'application pour vérifier. Un nouveau débours, un nouveau dossier ou un nouveau document devait déclencher une notification sur son téléphone, y compris sur iPhone, où les notifications web imposent que l'application soit installée sur l'écran d'accueil.

Le trajet d'une notification

  1. CréationUne transaction, un dossier ou un fichier est ajouté.
  2. Hook PocketBaseLa logique serveur retrouve le bon client.
  3. OneSignalLa notification part, en français ou en anglais.
  4. TéléphoneLe client est prévenu.

Le guide intégré, sur iPhone

  1. Ajouter l'application à l'écran d'accueil
  2. L'ouvrir depuis son icône
  3. Activer les notifications

04

Deux espaces, selon le rôle

L'application compte deux espaces distincts selon le rôle de l'utilisateur. L'un sert aux clients, l'autre à l'équipe de Mejid & Co. L'outil devait fonctionner aussi bien sur ordinateur pour l'équipe que sur téléphone pour les clients.

Illustrations reconstituées d'après l'interface de l'application, sur données fictives. Aucune donnée client n'est reproduite.

Pour les clients de Mejid & Co

  • Se connecter avec une adresse e-mail ou un numéro de téléphone, et réinitialiser son mot de passe.
  • Consulter son solde et ses dernières transactions et dossiers depuis le tableau de bord.
  • Parcourir la liste des débours et des remboursements, avec le détail de chaque opération et son justificatif.
  • Ouvrir ses dossiers et lire les documents directement dans l'application, y compris les PDF et les photos prises sur iPhone au format HEIC.
  • Recevoir une notification quand une transaction, un dossier ou un fichier est ajouté à son compte.
  • Accéder aux formulaires des prestations de Mejid & Co depuis l'application.

Pour l'équipe de Mejid & Co

  • Créer et modifier les comptes clients, les inviter à définir leur mot de passe.
  • Saisir une avance de frais ou un remboursement, avec pièce jointe, date de paiement et dossier associé.
  • Indiquer, transaction par transaction, si une marge de service s'applique ; elle est affichée côté administration et côté client.
  • Créer des dossiers typés et y déposer des fichiers.
  • Suivre les montants sur un graphique par semaine, mois, année ou période personnalisée.
  • Exporter au format Excel les transactions d'un client, filtrées par période et par dossier, ainsi que les listes d'utilisateurs.
  • Supprimer puis restaurer utilisateurs, transactions, dossiers et fichiers grâce à une corbeille.

05

Une PWA plutôt qu'une application native

Le client ajoute l'application à son écran d'accueil, sans passer par un store. Elle se met à jour dès la mise en ligne d'une nouvelle version.

Le service worker, généré par le plugin PWA de Vite

Ressources statiques
Mises en cache.
Appels à l'API
Réseau d'abord, repli sur le cache.
Nouvelle version
Mise à jour automatique.
  • Français et anglais
  • Thème clair et sombre
  • Sans store

06

Les choix techniques

Le back-end repose sur PocketBase ; l'ensemble est livré en conteneurs Docker, construits et déployés par GitLab CI.

  • React et TypeScript

    L'application compte de nombreux formulaires et tableaux filtrables ; le typage des données (utilisateurs, dossiers, transactions, fichiers) limite les erreurs entre l'interface et le back-end. React Hook Form et Zod pour les formulaires, TanStack Table pour les tableaux, Redux Toolkit pour l'état.

  • PocketBase

    La base de données, l'authentification, les règles d'accès et le stockage des fichiers dans un seul binaire. Pour une application centrée sur quelques collections, un socle léger et facile à exploiter, dont les hooks JavaScript ajoutent la logique serveur sans service supplémentaire.

  • OneSignal

    Côté interface, le SDK gère l'abonnement de l'utilisateur. Côté serveur, les hooks PocketBase envoient la notification au bon client.

  • Docker

    L'interface est compilée puis servie par Nginx ; PocketBase tourne dans sa propre image, avec ses hooks. Les secrets sont injectés au moment du build depuis Infisical, jamais stockés dans le dépôt.

GitLab CI, à chaque push

  1. Lint
  2. Construction des deux images
  3. Publication dans le registre
  • Branche de développementPréproduction
  • Branche principaleProduction

En local, Husky, lint-staged et Prettier vérifient le code avant chaque commit.

En résumé

Saisi une fois, vérifiable partout

Avances de frais, remboursements, dossiers et justificatifs : une application web installable qui relie Mejid & Co à ses clients. L'équipe saisit chaque opération au bon endroit ; le client la consulte depuis son téléphone et en est prévenu, notifications comprises.

Stack technique

Les technologies du projet, et leur rôle

  • ReactApplication installable : dossiers, transactions, fichiers et notifications.
  • TypeScriptTypage de l'application et des formulaires.
  • DockerApplication et back-end PocketBase déployés en conteneurs.
  • GitLabBuild et déploiement automatisés.

Un projet similaire ?

Décrivez-nous votre situation. Le premier échange est gratuit et sans engagement, sur site à Nice et dans sa région.

Demander un audit gratuit04 22 13 19 47

Voir notre offre de développement logicielVoir toutes nos réalisations