Tous les projets

App offline-first2026

Tchona

Une application mobile qui montre à un petit commerçant son vrai chiffre d'affaires, ses marges et sa prévision de fin de mois à partir des prix et des ventes qu'il saisit, sans connexion internet.

Seul — produit, design, développement et déploiement

Le tableau de bord de Tchona sur un téléphone : « Bonjour Awa », le chiffre d'affaires du jour à 1 075 F avec « Ce mois : 8 725 F » en dessous, les boutons « Vente » et « Dépense », une carte « Bénéfice du mois » affichant -10 886 F en rouge, une liste « Top produits » (Savon, Bissap, Sachet d'eau pure), et une carte « Dépenses du mois » à 19 000 F avec le Loyer en premier poste.
Le tableau de bord de Tchona sur un téléphone : « Bonjour Awa », le chiffre d'affaires du jour à 1 075 F avec « Ce mois : 8 725 F » en dessous, les boutons « Vente » et « Dépense », une carte « Bénéfice du mois » affichant -10 886 F en rouge, une liste « Top produits » (Savon, Bissap, Sachet d'eau pure), et une carte « Dépenses du mois » à 19 000 F avec le Loyer en premier poste.

Tchona (« regarde » en kabiyè, la langue de mon ethnie au Togo) est une application mobile hors-ligne d'abord pour les petits commerçants : vendeurs de marché, boutiquiers, vendeurs ambulants, grossistes et transformateurs. Elle transforme des saisies du quotidien (produits, ventes, dépenses, crédits accordés aux clients) en chiffres qu'un vendeur voit rarement : chiffre d'affaires par jour, semaine et mois, marge par produit, projection de fin de mois, et seuil où les ventes ne couvrent plus les charges fixes. Un simulateur « et si » permet de tester un changement de prix ou un autre rythme de ventes avant de se décider. Tout fonctionne sur le téléphone, sans compte et sans réseau ; les données sont sauvegardées sous forme de fichier chiffré partagé par WhatsApp. Le projet est né pour aider une vendeuse de marché et sert aujourd'hui à deux commerçants.

Le problème

Un vendeur fixe un prix sur chaque article mais n'arrive jamais à une vision claire de ce que ces prix produisent. Sur une journée ou un mois, quel est le chiffre d'affaires réel ? Quels produits portent la marge ? Est-ce qu'augmenter un prix, ou vendre un peu plus chaque jour, changerait quelque chose ? Sans faire les calculs à la main, il n'y a pas de réponse, et les décisions de prix et de stock se prennent au ressenti.

L’approche

J'ai modélisé la journée du vendeur avec quelques objets simples (produits avec coût de revient calculé, ventes, dépenses, crédits clients) et construit chaque chiffre au-dessus, sur l'appareil : chiffre d'affaires par période, marge par produit, prévision par moyenne mobile pondérée, jours avant rupture d'un produit. L'interface pose une question par écran en langage direct, avec de gros boutons et un pavé numérique, pour qu'enregistrer une vente tienne en quelques touches. L'app est une PWA Vue 3 avec Dexie (IndexedDB) comme source de vérité ; elle s'installe depuis un lien WhatsApp, fonctionne entièrement hors-ligne, et se sauvegarde dans un fichier chiffré que le vendeur s'envoie à lui-même ou à un contact de confiance.

Le résultat

  • Un vendeur voit maintenant son chiffre d'affaires par jour, semaine et mois, sa marge par produit et une projection de fin de mois, sans aucun calcul.
  • Le simulateur répond à la question récurrente « et si je change ce prix ou que je vends plus » par un chiffre de bénéfice concret, avant la décision.
  • Deux commerçants s'en servent au quotidien, surtout pour les projections.
  • Fonctionne entièrement hors-ligne et s'installe depuis un lien WhatsApp ; en production sur tchona.vercel.app.

Fonctionnalités clés

  • Enregistrement rapide d'une vente : une question par écran (produit, quantité, prix, payé ou à crédit), quelques touches pour valider.
  • Coût de revient et marge automatiques : tu saisis ce que tu as payé, l'app calcule le coût unitaire, la marge et un prix de vente proposé.
  • Chiffre d'affaires et bénéfice par jour, semaine et mois, avec les meilleurs produits et la liste des crédits clients impayés par nom.
  • Prévisions : chiffre d'affaires de fin de mois par moyenne mobile pondérée, et nombre de jours avant la rupture de stock de chaque produit.
  • Simulateur « et si » : teste un changement de prix, un rythme de ventes par jour ou une variation de dépenses et lis le bénéfice projeté face à l'actuel.
  • Suivi de stock avec seuil d'alerte par produit ; dépenses, dépenses récurrentes et plafonds de budget mensuels par catégorie.
  • Commissions pour ceux qui reversent une part sur les ventes : pourcentage, fixe, par unité, par paliers ou mixte, sur le chiffre d'affaires total, un produit ou le bénéfice.
  • Fonctionne hors-ligne ; sauvegarde fichier chiffrée partagée par WhatsApp ou vers un contact de confiance ; verrouillage par code PIN optionnel.
Ingénierie — Architecture, décisions et compromis

Architecture

Tchona est une application Vue 3 monopage rendue dans une coquille à largeur de téléphone, avec Dexie (IndexedDB) comme source de vérité et aucun serveur en usage normal. La logique métier est derrière une couche repository (src/data/) : onze contrats d'entité (CRUD plus opérations métier nommées), une implémentation locale Dexie, une suite de test de contrat partagée que toute implémentation doit passer, et une factory que le reste du code appelle au lieu de toucher Dexie. Au-dessus des repositories, une couche de services calcule tout ce que le vendeur voit : agrégation du tableau de bord, prévision par moyenne mobile pondérée (7 derniers jours pondérés x3, 8 à 14 jours x2, 15 à 30 jours x1), prévision de rupture de stock, un moteur de commissions à huit cas, et des recettes de transformation avec proratisation des coûts. Pinia porte l'état de vue, Vue Router garde le flux (onboarding, puis PIN optionnel). L'app est une PWA installable via Workbox avec un repli de navigation hors-ligne, plus une sauvegarde locale automatique écrite dans OPFS toutes les quelques minutes et au passage en arrière-plan ; les sauvegardes manuelles sont un fichier .tchona chiffré AES-GCM (PBKDF2, 600 000 itérations) partagé via la feuille de partage native. Un second chemin de stockage est construit et documenté mais désactivé par un feature flag : Supabase (Postgres, Auth, Row Level Security) avec un protocole de synchronisation « outbox » fait maison (table op_log append-only, RPC push_operations / pull_operations, idempotence par UUID, dernier écrit gagne au niveau ligne), migrations versionnées en SQL. Les tests tournent sur fake-indexeddb (~487 cas dans 51 fichiers) et GitHub Actions exécute type-check, tests et build à chaque push ; le déploiement est sur Vercel.

Défis d’ingénierie

  • Chaque chiffre calculé sur le téléphone sans backend : l'agrégation du tableau de bord, la prévision par moyenne mobile pondérée et la prévision de rupture tournent toutes sur Dexie dans le navigateur, en récupérant chaque fenêtre de dates une seule fois plutôt qu'une fois par produit.
  • Garder les données en sécurité sur un seul téléphone sans compte : une sauvegarde locale automatique dans OPFS toutes les quelques minutes, plus un fichier .tchona chiffré que le vendeur partage par WhatsApp ou vers un contact de confiance, avec un rappel hebdomadaire.
  • Rendre un backend futur possible sans réécriture : la logique métier a été déplacée derrière une interface repository avec une suite de test de contrat partagée, service par service sur une dizaine de pull requests, et les ids Dexie ont été migrés d'auto-increment vers UUID.
  • Un seul moteur de commissions pour huit combinaisons de type et de cible (pourcentage, fixe, par unité, paliers, mixte, sur le chiffre d'affaires total, un produit ou le bénéfice) qui donne le même résultat pour une période réelle et pour le « et si » par produit du simulateur.

Décisions techniques

  • Dexie/IndexedDB comme source de vérité plutôt qu'une base hébergée : l'app devait fonctionner sans réseau et sans compte dès le premier lancement, sur un téléphone qui peut passer la journée sur un étal de marché.
  • Un protocole de synchronisation « outbox » fait maison plutôt que PowerSync, ElectricSQL ou RxDB : la règle « un compte, un vendeur » supprime la résolution de conflits multi-écrivains, donc un journal d'opérations avec pull par curseur et idempotence par UUID suffit et se pose sur Dexie sans le modifier. Six alternatives ont été comparées et écartées par écrit (ADR 0001).
  • Distribuée en PWA installée depuis un lien WhatsApp, pas un store : pas de compte de store, pas de délai de validation, les mises à jour arrivent tout de suite.
  • Pas de transitions d'interface : ajoutées, puis retirées, parce que des écrans instantanés se lisent mieux pour un outil utilisé vite au comptoir.

Stack

  • Vue 3
  • TypeScript
  • Vite
  • Pinia
  • Vue Router
  • Dexie (IndexedDB)
  • Tailwind CSS 4
  • vite-plugin-pwa / Workbox
  • Web Crypto (AES-GCM, PBKDF2)
  • Supabase (Postgres, Auth, RLS)
  • Vitest
  • GitHub Actions
  • Vercel

Seul — produit, design, développement et déploiement — Projet personnel, lancé pour aider une vendeuse de marché ; utilisé aujourd'hui par deux commerçants (2026)

Projet suivantCommunity Platform