Jour 10. J’ai demandé un clone de Miro. Un canevas infini complet avec des formes, des connecteurs, des calques et un mode présentation.
Le Prompt#
“Construis une app de tableau blanc à canevas infini comme Miro. Local-first, TypeScript, HTML5 Canvas.”
C’était le point de départ. Tout le reste est venu du découpage en tâches.
Comment Ça a Été Construit#
Celui-là était énorme. Watchfire l’a découpé en 27 tâches, c’est le plus que j’ai vu jusqu’ici dans ce challenge. Le découpage couvrait :
- Les formes et outils de dessin (rectangles, ellipses, lignes, flèches)
- L’outil stylo à main levée
- Les éléments texte
- Les post-it avec code couleur
- Les connecteurs intelligents entre les formes
- La grille et l’accrochage à la grille
- L’historique annuler/rétablir
- L’export en PNG et JSON
- Le panneau de calques
- Le sélecteur de couleurs
- Les contrôles de zoom et de déplacement
- Les raccourcis clavier pour tout
- Le mode sombre
- L’écran de bienvenue avec l’onboarding
- Le mode présentation
27 tâches, c’est beaucoup. Mais elles étaient bien cadrées. Chacune ajoutait un morceau de fonctionnalité spécifique sans casser ce qui venait avant.
Ce Que J’ai Obtenu#
Ce truc est étonnamment complet.
Ça ressemble à un vrai outil de tableau blanc. Tu l’ouvres et il y a un canevas infini avec une grille en pointillés. Tu peux te déplacer, zoomer, poser des formes, écrire du texte, relier des choses avec des flèches. La boucle de base du tableau blanc fonctionne tout simplement.
Il y a un vrai écran de bienvenue. Il te montre les raccourcis clavier et comment démarrer. Tu peux le fermer et cocher une case pour ne plus le voir. Petite touche, mais ça donne à l’app une impression de produit fini.
Les connecteurs sont intelligents. Tu traces une ligne entre deux formes et elle s’accroche aux points de connexion. Déplace une forme et le connecteur suit. C’est le genre de fonctionnalité qui sépare une app de dessin d’un outil de diagramme.
Le panneau de calques fonctionne vraiment. Chaque élément apparaît dans une liste latérale. Tu peux voir la hiérarchie, réorganiser les choses, et gérer ce qui est au-dessus de quoi. C’est comme un mini panneau de calques à la Figma.
Des raccourcis clavier pour tout. V pour sélectionner, R pour rectangle, O pour ellipse, P pour stylo, T pour texte, S pour post-it. Plus tous les trucs standards comme Cmd+Z pour annuler, Cmd+Shift+Z pour rétablir. Il y a une superposition complète des raccourcis que tu peux afficher avec ?.
L’outil stylo est fluide. J’ai dessiné un visage juste pour tester. Les traits sont réactifs et naturels. Pas sensible à la pression ni rien de fancy, mais suffisamment bien pour esquisser des idées pendant un brainstorm.
Les Rapports de Bugs#
Celui-là était relativement propre. Avec 27 tâches, je m’attendais à plus de problèmes, mais l’approche incrémentale a fait que chaque pièce était testée avant que la suivante n’arrive. Les principaux trucs que j’ai remarqués :
- Les post-it chevauchaient parfois le texte quand on les redimensionnait trop petit
- La mini-carte dans le coin pouvait se désynchroniser après de gros zooms
- L’export en PNG coupait parfois des éléments aux bords du canevas
Rien de majeur. L’expérience de base du tableau blanc était solide dès le début.
Les Chiffres#
- 27 tâches Watchfire de la configuration du canevas au mode présentation
- TypeScript + Vite avec rendu HTML5 Canvas
- Suite d’outils complète : sélection, déplacement, rectangle, ellipse, ligne, flèche, connecteur, stylo, texte, post-it
- Mode sombre, calques, export, raccourcis clavier, mode présentation
- Zéro bibliothèque UI externe. Tout est construit sur mesure sur canevas
Essaie-le#
Fonctionne mieux sur desktop. Utilise les raccourcis clavier pour l’expérience complète.
Verdict du Jour 10#
C’est le premier projet du challenge qui s’attaque à un service web complexe. Miro n’est pas un jeu avec des règles autonomes. C’est un vrai produit avec des formes, des connecteurs, des calques, des exports, un mode présentation, et tout un modèle d’interaction que l’équipe d’origine a mis des années à mettre au point. Le cloner en une journée, ça implique de faire des choix sur ce qu’on garde et ce qu’on laisse tomber.
Le plus gros choix, c’est le backend. Il n’y en a pas. Tout vit dans le navigateur, persisté dans le local storage. Pas de comptes, pas de serveurs, pas de base de données. C’est une contrainte délibérée que je tiens sur les premiers projets de ce challenge — garder les choses locales, livrer plus vite, éviter la complexité de monter une infrastructure pour chaque démo. Ici ça marche parce qu’un tableau blanc n’a pas besoin d’être multi-joueurs pour être utile. Ça finira par taper dans un mur. La collaboration en temps réel, la sync cloud, partager un tableau avec quelqu’un via une URL — rien de tout ça n’est possible sans un backend. On y arrivera dans un futur projet.
Ce qui ressort, c’est l’architecture. Le code est découpé en modules propres pour la gestion des entrées, le rendu, la gestion d’état, les outils et l’UI. Chaque outil est son propre module. La gestion d’état s’occupe de l’historique pour annuler/rétablir. Ce n’est pas un prototype bricolé, c’est une app correctement structurée.
Est-ce que ça pourrait remplacer Miro ? Non. Mais en tant qu’outil local-first de croquis et de diagramme, c’est étonnamment utilisable. Je me suis surpris à poser des idées dessus pour de vrai au lieu de juste le tester.
Un tiers du challenge terminé. L’ampleur de ce qui rentre dans une seule journée continue de s’étendre.
C’est le jour 10 de 30 Days of Vibe Coding. Suis l’aventure pendant que je livre 30 projets en 30 jours avec du coding assisté par IA.
