Vibe coding React Native : ton app mobile IA en 17 min

Tu as une idée d'app depuis des mois mais tu bloques sur le "par où je commence". Dans cette vidéo, je te donne une base de code prête à l'emploi pour te lancer en vibe coding sur React Native — une seule base de code, deux plateformes (Android + iOS). On installe l'environnement, on ajoute ensemble une fonctionnalité d'analyse de photo par IA, et surtout je te montre les erreurs de sécurité à ne pas commettre.

Ce dont tu as besoin pour démarrer

Pas grand-chose, et c'est justement le point : arrête de croire qu'il te faut un CTO ou six mois de setup. Il te faut :

• Un IDE : VS Code (gratuit) ou Cursor (plus orienté usage pro, mais c'est la même interface).
• Node.js : tu télécharges, tu installes.
• Un abonnement à Claude Code ou Cursor pour piloter l'IA directement dans ton éditeur.
• La base de code du projet (lien en description de la vidéo).

Une fois VS Code ouvert, va dans Extensions (les petits carrés dans la barre latérale), cherche Claude Code, installe le plugin. Tu pourras alors créer une nouvelle session et commencer à vibe coder.

React Native, c'est le choix qui te permet de coder une seule fois et de sortir sur les deux stores. Pour un solo qui veut aller vite, c'est exactement ce qu'il faut.

Le fichier qui change tout : claude.md

Avant de coder quoi que ce soit, fais le tour du propriétaire. Le fichier le plus important du projet, c'est le claude.md. C'est là que sont rangées toutes les instructions pour que tes sessions de vibe coding se passent bien.

Ce que tu y trouves :

• Le contexte projet : à remplir avec ton business. App de rencontre entre fans de manga ? Écris-le. Comme ça, chaque fois que l'IA doit prendre une décision ou te proposer un truc, elle part de ton contexte, pas du vide.
• La stack et la structure : j'y ai mis ma connaissance pour produire du code d'une qualité correcte, reprenable par un développeur demain. Parce que quand ton app aura ses premiers users et que tu voudras scaler, tu voudras peut-être filer le code à des freelances — autant que ce soit propre.
• Le design system et les règles.
• Les variables d'environnement (donc la sécurité — on y revient plus bas).

Le claude.md est lu à chaque prompt. C'est ton garde-fou : c'est lui qui va te prévenir quand tu es en train de faire une bêtise de sécurité.

L'autre fichier à connaître : src/config/app.ts. Tu y trouves toutes les couleurs de l'app et de quoi créer une cohérence visuelle. J'ai installé une bibliothèque de composants, GlueStack, qui réagit à ces couleurs.

Installer et lancer le projet

Ouvre un nouveau terminal et lance :

npm install

Ça installe toutes les librairies manquantes. Deux cas de figure possibles :

• npm n'est pas reconnu → c'est un problème d'installation de Node.js. Reviens sur l'étape d'install de Node.
• Des warnings oranges → souvent OK, surtout en début de projet où tu es sur les dernières versions. npm te proposera parfois un npm audit fix.

Un réflexe simple quand tu as un doute sur un warning de sécurité : copie-colle le message à l'IA et demande "c'est grave ou pas ?". Ça te donne un ordre d'idée. Sur mobile, la surface de sécurité est un peu plus verrouillée que sur du web, donc c'est généralement plus simple.

Ensuite, tu lances :

npm run start

Un QR code s'affiche avec plusieurs options. Deux façons de voir ton app :

1. Émulateur (le plus simple sur ordi) : iOS Simulator sous Mac (nécessite Xcode), ou Android sous Windows (il te proposera d'installer Android Studio). Il faut une version d'iOS ou d'Android installée pour lancer l'émulateur.
2. QR code + Expo Go sur ton vrai téléphone (on garde ça pour la fin).

Customiser les couleurs (et comprendre le rebuild)

Dans le projet, il y a déjà une page "design" qui résume tous les composants — les petits éléments réutilisables de l'app. Pense à une boîte de Lego.

Pour changer la couleur principale, tu modifies le code hexadécimal dans app.ts. Si tu ne connais pas ton code hexa, tape "couleur hexadécimal" sur Internet, choisis ta teinte, copie le code, colle-le.

Point important à comprendre : il y a deux types de changements.

• Visuel pur (taille d'un titre, texte) → tu vois le changement en temps réel.
• Fichier de config → il faut un rebuild : l'app se reconstruit. Appuie sur R dans la console (ou sur l'interface de dev) pour recharger.

Donc si tu modifies un truc et que rien ne bouge à l'écran, c'est probablement qu'il faut recharger, voire arrêter et relancer.

Ajouter une fonctionnalité en vibe coding

Le principe est simple : tu décris ce que tu veux, l'IA code. Premier exemple :

"Est-ce que tu peux rajouter sur la page d'accueil un bouton démarrer dans la couleur primaire ?"

Bouton créé, pas besoin de recharger (c'est du visuel). Ensuite :

"Quand je clique sur démarrer, ça me change de page et ça m'amène sur la partie design."

Transition en place. Tu commences à voir la mécanique.

La feature du jour : reconnaître une race de chien par IA

L'objectif : prendre une photo d'un chien, et l'IA nous dit la race. Voilà le vrai réflexe à avoir : découper le travail.

Si tu balances "je veux prendre une photo et qu'il analyse l'animal" d'un coup, l'IA va partir dans tous les sens et te faire des trucs qui n'ont pas de sens. À la place, on procède par étapes.

Étape 1 — Récupérer la photo :

"Rajoute-moi une nouvelle page où je peux prendre une photo. Une fois que j'ai pris la photo, elle s'affiche dans l'application."

L'IA crée un nouvel onglet, gère la demande d'accès caméra, la prise de photo et l'affichage. Elle prévient d'ailleurs qu'un appareil physique est recommandé pour tester.

Petite parenthèse sur les edge cases : quand l'app demande "acceptez-vous l'accès à vos photos ?", que se passe-t-il si l'utilisateur dit non ? Ce sont ces effets de bord qu'il faut anticiper. C'est exactement le genre de détail qui sépare un prototype d'une app utilisable.

Étape 2 — Tester sur émulateur (qui n'a pas de vraie caméra) :

"Comme on est sur un appareil virtuel, est-ce que tu peux rajouter un bouton pour aller chercher la photo sur l'ordinateur en plus de prendre la photo ?"

Maintenant on peut choisir : prendre une photo, ou en sélectionner une depuis la bibliothèque. Parfait pour tester sans sortir le téléphone.

Une astuce d'hygiène : change de discussion

Dès qu'une fonctionnalité est terminée, quitte le chat et ouvre une nouvelle discussion. Le but : soulager l'IA.

Plus tu continues dans le même chat, plus l'IA accumule du contexte à recalculer à chaque message — et plus elle hallucine.

À noter au passage : Claude ≠ Claude Code. Claude Code pense en mode "code" par défaut. Claude (le chat classique) réfléchit plus large et peut te proposer des contournements ou des astuces. Deux entités différentes, deux usages.

Brancher OpenAI pour l'analyse

Nouvelle session, nouveau prompt :

"Maintenant qu'on peut prendre ou choisir une photo, j'aimerais qu'une fois la photo sélectionnée on ait une analyse par l'IA, en envoyant la photo à OpenAI pour qu'il nous dise de quelle race c'est."

Pendant que ça tourne, tu vas créer ta clé d'API :

1. Google → "OpenAI plateforme API".
2. Connecte-toi à ton compte.
3. Suis les étapes pour créer et récupérer une clé d'API.

L'IA te demande ensuite de créer un fichier .env à la racine du projet et d'y coller ta clé. Résultat au test : chien détecté, "type labrador". 🐕

⚠️ Le point sécurité à ne surtout pas zapper

C'est le passage le plus important de la vidéo. L'IA le signale elle-même :

Note de sécurité : la clé est embarquée dans l'app avec le préfixe expo public. C'est acceptable pour un prototype, mais en production il faudrait un backend proxy pour ne pas exposer la clé.

Traduction concrète : tout ce que tu mets dans une app mobile est téléchargé par l'utilisateur. Quand quelqu'un installe ton app, il récupère tout — y compris tes clés d'API.

C'est difficilement lisible, ce n'est pas à la portée de n'importe qui, mais c'est faisable. Et si ta clé fuite, on te consomme tes tokens (donc ton argent).

La bonne architecture pour la prod :

• Un serveur externe qui détient la clé.
• L'app se contente d'authentifier l'utilisateur (connexion avec compte).
• C'est le serveur qui fait la requête à OpenAI.
• La clé ne quitte jamais ton serveur → la personne ne peut pas la récupérer.

Pour un prototype qui te sert à valider une idée, la clé en .env suffit largement. Mais tu dois savoir que ce n'est pas ce que tu déploieras auprès de vrais utilisateurs payants. Le claude.md que j'ai préparé est censé te prévenir dès qu'un problème de sécurité surgit — mais garde la tête froide.

Tester sur ton vrai téléphone avec Expo Go

Pour finir, on passe sur un appareil physique :

1. Arrête le serveur, relance npm run start pour réafficher le QR code.
2. Sur ton téléphone, installe Expo Go. Attention : en ce moment, l'app a du mal à passer la validation des stores. Va directement sur Internet, tape "Download Expo Go" et récupère la version Android ou iOS.
3. Ouvre Expo Go, scanne le QR code → ton app se lance.

Et là, surprise attendue : ça ne rend pas pareil qu'en émulateur. Fond noir sous Android alors qu'il était clair sur iOS, comportements différents en bas d'écran...

D'Android à iOS, entre les marques de téléphone et les tailles d'écran, tu peux avoir des rendus vraiment différents. C'est pour ça que le mobile n'est pas le développement le plus simple.

La bonne nouvelle : pour homogénéiser tout ça, tu demandes à l'IA et elle te trouve la solution facilement.

Coder, c'est seulement 20% du boulot

Avec cette base, tu es capable de créer une app simple mais qui crée déjà de la valeur. Tu peux imaginer référencer toutes les races de chiens avec leurs caractéristiques, et faire une app de consultation. Et ce schéma, tu peux le décliner sur tout un tas de niches.

Mais retiens l'essentiel : coder, c'est seulement 20% de ce qu'il y a à faire. Si tu te lances à coder, c'est que ton idée est déjà claire, que tu sais où tu vas, voire que tu as déjà un potentiel utilisateur en tête.

Le reste — valider l'idée, aller chercher tes premiers users — c'est là que la plupart des projets meurent. Pas dans le code. La base de code est là, l'IA fait le gros du boulot technique. Il ne te reste plus qu'à commencer, petit et moche, et à shipper.

Dans les prochaines vidéos, on ira plus loin sur cette même app : authentification, paiement, base de données, backend sécurisé. Si tu veux que je traite un sujet précis, mets-le en commentaire.