# J'ai vibe codé ma 1e app **Date de l'événement :** 25/02/2026 * Publié le 24/02/2026 ### Résumé ![DEF Vibe Coding - Whiteboard.mp4](https://firebasestorage.googleapis.com/v0/b/memory-weare.firebasestorage.app/o/prod%2FC0FkXRl4r8eWmsTwdW9X%2FprojectsMedias%2F9C01v11Y8yL9dtLg7cWg%2FDEF%20Vibe%20Coding%20-%20Whiteboard_gm6c0.mp4?alt=media&token=2d1c789a-3435-499a-977a-8eb0e414ae57) ## Description **La naissance de "Memory Canvas"**  ------------------------------------ J'ai besoin d'une petite application qui me permet de brainstormer dans mon coin, de sketcher des flows pour mieux réfléchir. Vous savez quand on dessine sur un bout de papier et que l'on voit plus clairement les choses ? La plupart du temps je fais mes croquis et autres flows sur une feuille, mais j'ai besion de garder une trace en image. Je me retrouve parfois aussi chez un client en ayant besoin d'illustrer une pensée, visuellement. Mais pour cela, je ne vais pas payer une application à 30€/mois. Alors j'ai décidé de créer ma propre application. Et en plus je peux l'intégrer dans tous les outils que j'utilise au quotidien et même dans Memory 🔥 ### Voici quelques étapes pour vous accompagner ### Acte I : Le Big Bang créatif > l'intention Tout commence par une vision et un besoin : un outil de design "slick", minimaliste et moderne. * **L'action :** Tu poses les fondations. Tu ne demandes pas juste un "tableau blanc", tu exiges une **vibe** (animations fluides, UI polie). * **Le résultat :** Gemini (Google AI Studio) génère l'architecture complète (8 fichiers d'un coup). La structure React, les types TypeScript et les services de base sont posés. L'application a déjà un nom et une âme. ### Acte II : L'éveil de l'interactivité > le "Feel" Une interface de design doit être tactile, physique. * **L'action :** Tu demandes la manipulation directe. Un objet créé doit être saisissable, déplaçable, repositionnable et doit pouvoir changer de taille. Le tout très facilement. * **Le pivot technique :** Tu ajoutes ensuite l'outil texte et la gestion des couleurs. L'application commence à ressembler à un mini concurrent de FigJam (Figma) ou Miro. * **Le défi :** Tu introduis les **Sticky Notes**. Gemini passe 205 secondes à mouliner pour s'assurer que ces éléments complexes se déplacent aussi naturellement que de simples cercles. ### Acte III : La géométrie complexe > l'épreuve de la flèche C'est ici que le Vibe Coding rencontre la réalité mathématique. * **Le problème :** L'outil "Flèche" est capricieux. L'extrémité ne suit pas la direction (prolongation). * **La correction de trajectoire :** Tu ne lui donnes pas la formule trigonométrique $y = mx + b$. Tu lui dis simplement : _"Ce n'est pas correct, la pointe doit être dans le prolongement."_ \* **L'expertise de l'IA :** Gemini comprend qu'il doit abandonner les balises SVG `` (trop rigides) pour calculer manuellement un polygone de pointe en temps réel. C'est le moment où l'outil devient "pro". ### Acte IV : Intégration de l'IA > Pourquoi sortir de l'application ? Notre exigence face aux apllications est en constante évolution. Nous attendons de l'interaction et de l'intelligence embarquée. * **Le problème :** je fais des schémas, .... mais j'ai souvent besoin de faire des recherches ou d'avoir des réponses, et donc je file sur ChatGPT, Gemini ou autres. * **La solution :** Intégration d'un chat IA conversationnel. L'idée est d'avoir l'équivalent d'un ChatGPT dans le tableau blanc. ### Acte V : L'expansion > l'écosystème Une application isolée est inutile. Tu décides que Lumina doit vivre ailleurs. * **L'Embed :** Tu demandes un code iframe. * **Le bug de "la vie réelle" :** Le bouton d'exportation PNG fonctionne sur Firebase mais échoue dans Notion (problème de sécurité des bacs à sable/sandboxes d'iframes). * **La solution :** Gemini ajuste les permissions de l'iframe (`allow-downloads`, `blob:`, etc.) et sépare le lien direct du code embed pour satisfaire la gourmandise de Notion. * * * 📊 Analyse de la méthode > Pourquoi ça a marché ? ------------------------------------------------- **Phase** **Ton rôle (Le designer)** **Rôle de Gemini (L'exécuteur)** **Vision** Définir l'esthétique et les outils. Générer le boilerplate et le design system. **Raffinement** Identifier les frictions (lag, mauvaise orientation). Réécrire la logique mathématique (trigonométrie). **Debug** Tester en conditions réelles (Notion, Firebase). Injecter les correctifs de sécurité et d'interopérabilité. * * * 💡 Ce que j'ai appris --------------------- Notre interaction montre que le secret du Vibe Coding réside dans la **persévérance sur les détails**. 1. Je n'ai pas accepté une flèche "à peu près" correcte. 2. J'ai poussé l'IA à bout sur le comportement des sticky notes. 3. J'ai bouclé la boucle en pensant à la distribution (Export/Embed). **L'application est maintenant mature :** Elle est interactive, exportable, intégrable et mathématiquement précise. ####  🔥 Vous pouvez la tester ici > [Memory Canvas](https://weare.my-memory.io/p/whiteboard)   ####  [**Inscrivez-vous à notre Newsletter**](https://weare.my-memory.io/p/newsletter) ### Sujet `#Éducation` `#Intelligence artificielle (AI & GenAI)` `#Numérique et technologie` ### Format `#Article` `#Vidéo` --- ### Navigation pour IA - [Index de tous les contenus](https://weare.my-memory.io/llms.txt) - [Plan du site (Sitemap)](https://weare.my-memory.io/sitemap.xml) - [Retour à l'accueil](https://weare.my-memory.io/)