
J'ai créé un Site IA en 1h qui me Rapporte de l'argent (Claude, Lovable, GitHub..)
Audio Summary
AI Summary
La vidéo explore la possibilité de créer une application fonctionnelle de A à Z, sans coder, en moins d'une heure. L'application développée, nommée "mon QI", est un test de QI, de mémoire, un quiz de personnalité et un test de compatibilité. Le résultat présenté est une application entièrement fonctionnelle, capable même d'accepter des paiements, réalisée en deux heures grâce à l'IA.
La première étape cruciale consiste à préparer le contenu. L'auteur a utilisé Claude, une IA similaire à ChatGPT mais jugée plus performante, pour générer un test de QI complet. Claude a produit un document avec 47 questions réparties en sept catégories, des niveaux de difficulté variés et un barème d'interprétation pour convertir le score en un QI estimé. Cette phase de brainstorming, qui aurait pris une semaine de travail sans IA, a été réalisée en quelques minutes. La préparation du contenu a duré environ 20 minutes. Un nom simple, "mon QI", et un logo ont également été créés rapidement avec l'aide de l'IA.
Pour construire l'application, l'outil "Loveable" a été utilisé. C'est un outil de "vibe coding" où l'utilisateur décrit ce qu'il veut en langage naturel, et l'IA code l'application en temps réel sans nécessiter d'écrire une seule ligne de code. Après avoir créé un compte (cinq requêtes gratuites sont offertes), il est recommandé d'activer le mode "plan" de Loveable. Ce mode permet à l'IA de planifier la structure de l'application avant de coder, ce qui fait gagner du temps sur des projets complexes. Il est essentiel d'être précis dans les descriptions fournies à l'IA.
L'auteur a demandé à Loveable de créer une application web mobile responsive de test de QI, sans friction à l'entrée (pas besoin de créer un compte), avec 47 questions, 7 catégories, différents niveaux de difficulté, et un total de 81 points. Pour la monétisation, un "paywall" devait s'afficher à la fin du test, exigeant un paiement pour accéder aux résultats (essai gratuit de 7 jours, puis 9,90 € toutes les deux semaines ou 19,90 € par mois). Après paiement, un compte serait créé automatiquement pour l'utilisateur, permettant de consulter son score de QI, son profil cognitif et son archétype de personnalité. Des détails techniques suggérés par Claude ont été inclus dans la requête, même sans compréhension approfondie de leur signification.
Loveable a ensuite réfléchi et construit un plan de développement en une minute. Après approbation du plan, l'IA a commencé à coder. En quelques minutes, une page d'accueil complète a été générée, incluant une section "hero", des explications du concept et du fonctionnement. Le design a été jugé meilleur que prévu. Toutes les modifications peuvent être effectuées en discutant avec l'application, par exemple en demandant d'ajouter un bouton dans la barre de menu.
La création du quiz a été l'étape suivante. L'auteur a détaillé à Loveable qu'il souhaitait un écran de départ, une explication du quiz, un choix homme/femme, un chrono au début du test, et le logo en haut à gauche, le tout étant mobile responsive. L'approche a été de décomposer la demande et de créer le premier écran avant de passer à la suite, pour vérifier chaque étape.
Pour sauvegarder les résultats, deux comptes externes ont été nécessaires : GitHub pour stocker et gérer le code de l'application, et SuperBase pour la base de données où les réponses et résultats des utilisateurs sont stockés. L'auteur a créé un projet SuperBase nommé "mon QI", en choisissant la région "West EU Paris" pour cibler le marché francophone et avoir des serveurs proches des utilisateurs. Loveable propose son propre système de base de données intégré, Loveable Cloud, qui simplifie les choses pour la plupart des applications. Cependant, pour cette application spécifique, qui doit sauvegarder les réponses des utilisateurs avant même la création d'un compte, SuperBase a été préféré car il gère mieux cette fonctionnalité selon les conseils de Claude. Une fois GitHub et SuperBase connectés, la requête pour les questions de la première catégorie (profil cognitif) a été envoyée.
Loveable a demandé d'activer l'authentification anonyme dans SuperBase, ce qui a été fait en suivant les instructions fournies par l'IA. Le quiz a ensuite été testé, confirmant l'affichage des premières questions et l'enregistrement des réponses en temps réel dans la base de données SuperBase.
Pour les catégories suivantes (logique numérique, analogies verbales, etc.), le processus a été répété : copier les questions du document et les coller dans Loveable avec les mêmes instructions. L'auteur a également demandé à Loveable d'afficher la bonne réponse après chaque question et de permettre aux utilisateurs de revenir à la question précédente. Un chrono a été ajouté au début du quiz pour inciter les utilisateurs à aller jusqu'au bout et pour afficher le temps total dans les résultats, bien que le barème du QI ne soit pas indexé sur le temps.
Une fois toutes les questions implémentées, l'écran final, le plus important pour la monétisation, a été créé. L'objectif était d'afficher un écran récapitulatif avec les résultats floutés et un appel à l'action clair pour s'inscrire à l'essai gratuit. Après paiement, un compte serait créé automatiquement, débloquant les résultats, l'historique et la possibilité de se reconnecter.
Pour implémenter le système de paiement, Loveable a demandé une clé API Stripe. Stripe est la plateforme utilisée pour récupérer les paiements. L'auteur a créé un compte Stripe, récupéré une clé API secrète de test (pour simuler les paiements sans transaction réelle) et l'a fournie à Loveable. Loveable a ensuite créé automatiquement les produits d'abonnement dans Stripe et a continué l'implémentation du système de paiement. Une clé web hook secret a également été demandée par Loveable, et l'auteur a demandé à l'IA ce que c'était et comment la créer, Loveable fournissant les instructions détaillées.
Après avoir configuré Stripe, le flux de paiement a été testé. Le score et les éléments floutés s'affichaient correctement. En cliquant sur le bouton de paiement, une fenêtre Stripe s'ouvrait. Après avoir entré les informations de carte de test et démarré la période d'essai, un bug a été rencontré : les résultats restaient floutés. L'auteur a décrit le problème à Loveable, qui a identifié la cause et fourni les instructions pour le corriger côté Stripe. Après quelques ajustements, le problème a été résolu, et les résultats étaient défloutés, affichant un graphique de résultats et un archétype cognitif avec forces et faiblesses.
Ensuite, une page de connexion a été ajoutée pour les utilisateurs avec un compte. Après un petit bug lié à la vérification d'e-mail (qui a été résolu en confirmant l'e-mail), le système de connexion a fonctionné, menant à un tableau de bord vide. Le contenu du tableau de bord a été défini avec trois onglets principaux : un onglet "résumé" (meilleur score, dernier score, nombre de sessions, archétype cognitif), un onglet "historique" (courbe d'évolution du score, stats, progression, lien vers résultats détaillés) et un onglet "profil" (gestion du compte et de l'abonnement). Le résultat était un tableau de bord propre et fonctionnel. Un bouton "retour au dashboard" a été ajouté sur la page des résultats.
L'application a été créée en environ 30 minutes de travail effectif avec Loveable, sans compter le temps de préparation. Cela inclut un quiz complet, un système de paiement, un tableau de bord utilisateur et une page de résultats. Des ajustements ont été faits pour le design, les textes et les pages légales (mentions légales, conditions d'utilisation). L'application est entièrement mobile responsive. Un système de partage des résultats a été ajouté, permettant aux utilisateurs de copier un lien pour partager un aperçu de leurs scores.
La page d'accueil a été améliorée pour être plus propre et moderne. L'auteur a décidé d'ajouter trois quiz supplémentaires : un test de personnalité simplifié (type MBTI) et un test de mémoire. Claude a aidé à brainstormer les quiz les plus pertinents et les plus simples à implémenter. Une section sur la page d'accueil a été ajoutée pour présenter ces nouveaux quiz, qui ont ensuite été créés selon le même principe que le test de QI. Le quiz de personnalité propose deux options par question et donne un profil à la fin. Le quiz de mémoire affiche une combinaison d'emojis à mémoriser puis à retrouver. Le système de paywall a été mis en place pour ces nouveaux quiz également.
La dernière étape avant la mise en ligne a été de publier l'application en cliquant sur le bouton "publier" dans Loveable. L'application est alors accessible via un lien Loveable temporaire. Pour avoir un nom de domaine personnalisé, l'auteur a acheté "moncuit.fr" directement via Loveable (partenariat avec Ionos) pour 1 € par an. Loveable a automatiquement connecté ce nom de domaine à l'application.
Après la mise en ligne, la partie marketing a été abordée. L'auteur a utilisé la Facebook Ads Library pour analyser les publicités des concurrents, notamment "My IQ", et identifier les angles marketing efficaces. Trois angles principaux ont été identifiés : l'ego et la compétitivité ("Êtes-vous plus intelligent que la moyenne ?"), la santé cognitive (mémoire, concentration, risques liés au cerveau) et la célébrité/validation sociale (références à Einstein, Stephen Hawking). Pour chaque angle, 10 créatives différentes (visuels et textes) ont été créées, soit 30 au total, pour permettre à l'algorithme de Meta d'optimiser la diffusion.
Claude a été utilisé pour générer des concepts de publicité image et des prompts "texte-image" détaillés pour le premier angle (ego). Xfield, un outil de génération d'images IA, a servi à créer quatre variantes d'images par prompt. Claude a ensuite généré les textes publicitaires (texte principal, titre, description) pour chaque angle, en se basant sur le contenu de la page d'accueil de "moncuit.fr" pour le contexte.
Les publicités ont été paramétrées dans Meta Ads. Une nouvelle campagne a été créée avec l'objectif de "ventes". Pour chaque angle, un ensemble de publicités a été créé, et 10 créatives y ont été ajoutées, avec les visuels et textes générés. L'URL de l'application a été renseignée. La publication a été programmée pour le lendemain matin.
Cinq jours plus tard, les résultats de la campagne ont été analysés. Sur 176 visiteurs, 222 quiz ont été démarrés, mais seulement 65 terminés, soit un taux de complétion de 29%. Un seul abonné a acheté ses résultats parmi les 65 personnes ayant terminé le quiz. La dépense publicitaire s'élevait à environ 25 € par jour, soit 125 € au total pour un seul abonné, ce qui représente un retour sur investissement très faible.
Deux raisons principales ont été identifiées pour ces résultats :
1. Le quiz est trop long (47 questions, 20-25 minutes), ce qui entraîne un fort taux d'abandon pour le trafic froid venant des publicités. Une version plus courte (moitié moins de questions) est suggérée pour augmenter le taux de complétion à au moins 60%.
2. Le "paywall" n'est pas assez convaincant, ou le prix est mal calibré. Une seule personne sur 65 ayant terminé le quiz a payé, suggérant que le "teaser" des résultats n'incite pas suffisamment à l'achat, malgré le temps investi par l'utilisateur.
Ces problèmes sont jugés réparables avec un quiz plus court, un paywall mieux travaillé et un budget publicitaire plus important pour permettre à l'algorithme de Meta d'optimiser.
En conclusion, la création d'une application avec le "vibe coding" est décrite comme fascinante. Il est possible de construire une application complète et en ligne en quelques