Concevoir l’expérience
Définir les parcours, organiser l’information et concevoir les interfaces pour le téléphone comme pour l’ordinateur. Faire de la ville et de Moni des repères utiles dans l’application.
Conception produit · Développement web
Cindy Robinson
Conceptrice & développeuse de MoniTown
Cindy Robinson conçoit et développe MoniTown, une application de gestion budgétaire qui transforme les dépenses, les objectifs et l’évolution d’un budget en une ville interactive.
- JavaScript
- Interfaces web
- Conception produit
MoniTown
Concevoir un budget
que l’on peut voir
Le défi de MoniTown est de rendre un budget plus compréhensible. Les catégories de dépenses deviennent des bâtiments, et les projets d’épargne prennent la forme de coffres. Les dépenses enregistrées et les décisions de l’utilisateur ont une traduction visible dans la ville.
Ce travail relie développement web, visualisation de données, expérience utilisateur, animation et gamification légère. La ville doit rester lisible sur un téléphone, et ses interactions doivent aider à comprendre les chiffres sans culpabiliser.
Le fonctionnement local permet de commencer sans compte. La synchronisation en ligne reste un choix de l’utilisateur : cette autonomie fait aussi partie de la conception du produit.
Son rôle
De l’idée au produit
Cindy Robinson est à l’origine de la conception et du développement de MoniTown. Développeuse principale du projet, elle relie les choix produit à leur mise en œuvre technique, puis à leur validation.
Développer la logique
Construire le suivi des dépenses, les enveloppes, les cycles de paie, les échéances et les objectifs d’épargne. Relier ces données aux interactions et à la croissance des bâtiments.
Intégrer et maintenir
Intégrer les éléments graphiques, l’authentification facultative et la synchronisation Supabase. Faire évoluer la PWA, tester les changements, corriger les défauts et suivre les déploiements.
Le socle du projet
Stack technique
Cindy travaille principalement avec JavaScript et les technologies du Web. Le socle de MoniTown associe interfaces interactives, données locales et services de synchronisation. Chaque technologie y remplit un rôle précis.
Technologies principales
Interfaces & application
JavaScript · React · HTML · CSS · Vite
React structure l’application et ses contextes. L’interface de la ville utilise aussi des modules JavaScript dédiés. Le site public est en HTML/CSS, avec une démonstration JavaScript.
Technologies principales
Données & authentification
Supabase · PostgreSQL · IndexedDB
Supabase Auth gère les comptes facultatifs. PostgreSQL et ses règles d’accès soutiennent la synchronisation. IndexedDB conserve le budget sur l’appareil, avec un stockage complémentaire dans localStorage.
Technologies principales
Ville & interactions
Canvas 2D · SVG · JavaScript · CSS
Un moteur personnalisé dessine la ville isométrique en Canvas 2D. Les six Moni utilisent aussi Canvas 2D, intégré dans des composants web ; les icônes utilisent SVG. JavaScript pilote les animations en tenant compte de la visibilité de l’application.
Technologies utilisées
Fonctions serveur
TypeScript · Deno · SQL
TypeScript intervient dans les Edge Functions Supabase, notamment pour la migration du budget local et la suppression de compte. SQL définit les tables, les politiques d’accès et les fonctions de données.
Technologies utilisées
Installation & hors connexion
PWA · Workbox · vite-plugin-pwa
Le manifeste, le service worker et le cache permettent l’installation et le fonctionnement hors connexion après un premier chargement. Le budget local et la synchronisation ont des responsabilités distinctes.
Outils de développement
Qualité & publication
Node.js · npm · Oxlint · GitHub Actions · Vercel
Les tests automatisés utilisent Node.js ; Oxlint contrôle le code. GitHub Actions exécute les vérifications avant intégration, et Vercel héberge le site public et l’application.
Une exploration avec Three.js existe aussi dans un outil de préparation graphique. Elle est distincte du moteur Canvas 2D utilisé dans l’application.
Les langages, dans leur contexte
Langages & technologies
- JavaScript & JSX
- Logique budgétaire, composants React, état applicatif, interactions utilisateur, dessin et animation de la ville.
- HTML & CSS
- Structure des pages, mise en forme, adaptation aux écrans, accessibilité des interfaces et animations visuelles.
- SQL & PL/pgSQL
- Structure PostgreSQL, migrations, règles d’accès et fonctions utilisées pour gérer et synchroniser les données.
- TypeScript
- Fonctions serveur Supabase exécutées avec Deno. Le frontend actuel est principalement écrit en JavaScript, et non en TypeScript.
IA & développement
Développer avec les outils d’aujourd’hui
Cindy utilise également des outils d’intelligence artificielle comme assistants de création et de développement. Ils l’accompagnent dans l’exploration de solutions, le prototypage, la génération de pistes de code, l’analyse de bugs, la refactorisation et la documentation.
Ces outils font partie de son environnement de travail, aux côtés de l’éditeur de code, des bibliothèques et de la documentation. Ils accélèrent certaines tâches ; leur résultat doit être compris, adapté au projet et vérifié.
Cindy reste responsable des choix produit, de l’architecture, des décisions techniques, de l’intégration, des tests et de la validation finale. La conception et le développement de MoniTown sont pilotés par elle, avec ces outils en appui.
Un projet qui évolue
Ce qui vient ensuite
Les priorités prolongent le travail déjà engagé sur l’application. Les pistes envisagées restent à évaluer et ne constituent ni des fonctionnalités disponibles, ni un calendrier de livraison.
Actuel
Une base web installable
- PWA avec manifeste, service worker et cache.
- Budget local et synchronisation facultative.
- Ville Canvas 2D et Moni animé.
- Pause des animations selon le contexte et la visibilité.
Expérimental
Préparation graphique
Un outil Three.js explore le rendu d’une île en images, en dehors de l’application. Sa présence documente une piste graphique ; elle n’annonce pas le remplacement du moteur de ville actuel.
Envisagé
Fluidité & mobilité
- Alléger le chargement initial et les assets.
- Étudier le chargement à la demande et le découpage du JavaScript.
- Renforcer le cache et la résilience sur connexion lente.
- Optimiser la ville et enrichir Moni sur smartphone.
- Étudier une distribution installable au-delà de la PWA actuelle, sans technologie native arrêtée.
Du code à l’usage
Voir le projet en action
Explorer MoniTown permet de retrouver ces choix de conception dans une application concrète.
Présentation technique mise à jour le .