LovableTutorielHands-On

Lovable AI : créer une app complète en 1 heure (tutoriel FR)

22 avril 2026 13 min Lovable

Il y a deux ans, lancer une app web complète — avec auth, base de données, déploiement public — c’était une semaine de taf minimum pour un dev solo. Aujourd’hui, avec Lovable AI, on le fait en une heure chrono, sans écrire une seule ligne de code à la main.

Dans ce tutoriel, on va construire un tracker d’habitudes complet en 60 minutes : authentification, ajout/suppression d’habitudes, check-off quotidien, visualisation de progression, déploiement sur une URL publique. Le tout avec Lovable et un peu de vibe coding.

Je l’ai fait en live deux fois pour valider le process. Le timing est serré mais réaliste, à condition de ne pas partir dans des arbitrages UX sans fin. Voilà comment on s’y prend, minute par minute.

L’app qu’on va construire : un tracker d’habitudes minimaliste, déployé en prod en 60 minutes.

Lovable en 30 secondes : pourquoi c’est différent en 2026

Lovable est un agent IA full-stack qui génère des apps web à partir de prompts en langage naturel. Contrairement à Bolt.new ou v0 qui s’arrêtent au front, Lovable va jusqu’au backend et au déploiement, c’est la grosse différence.

La stack générée par défaut en 2026 :

  • Frontend : React + TypeScript + Tailwind CSS
  • Backend : Supabase (Postgres + auth + storage) ou Lovable Cloud
  • Hébergement : Lovable natif, avec URL publique en 1 clic
  • Ownership : export GitHub disponible à tout moment, le code est à toi

Quand tu ne dois pas utiliser Lovable :

  • Si tu as une codebase existante large à faire évoluer (Lovable part de zéro)
  • Si tu as besoin d’optimisations perf très fines
  • Si tu vises du pixel-perfect sur une maquette Figma précise
  • Si ton app a des workflows très complexes (multi-step forms conditionnels, orchestration batch)

Pour le reste, MVP, landing pages, dashboards, apps CRUD, outils internes, Lovable est probablement 10× plus rapide que ton workflow actuel.

Ce qu’on va construire aujourd’hui

Un habit tracker minimaliste avec :

  • Authentification email + Google (via Supabase Auth)
  • Dashboard avec la liste des habitudes + case à cocher par jour
  • Ajout / édition / suppression d’habitudes (modale ou form inline)
  • Visualisation de progression (heatmap style GitHub, sur 30 jours glissants)
  • Design minimaliste inspiré Linear, mode sombre par défaut
  • Déployé sur une URL publique Lovable

C’est un projet volontairement réaliste mais contenu : assez pour toucher aux trois piliers (UI + auth + persistence) sans exploser le temps.

Prérequis (5 min avant de démarrer)

  • Un compte Lovable (free tier suffit pour ce tuto).
  • Facultatif mais recommandé : un compte GitHub pour exporter ton code.
  • Facultatif : un compte Supabase si tu veux gérer toi-même la DB, sinon Lovable s’en occupe.
  • Un navigateur à jour. C’est tout.
Créer un compte Lovable gratuit

Minute 0–10 : Le prompt initial qui change tout

La qualité de ton prompt initial fait 80 % du résultat. Un mauvais prompt = 20 minutes de rattrapage. Un bon prompt = une base propre dès la première itération.

Anatomie d’un bon prompt Lovable

  • L’idée en une phrase : que fait l’app, pour qui
  • Les fonctionnalités clés (bullet list, 4–6 items max)
  • Le feel visuel : inspirations, ambiance, mode
  • Le user flow principal : ce que fait l’utilisateur en premier quand il arrive
  • La stack (optionnel) : si tu as des préférences

Le prompt qu’on va utiliser

Copie-colle ça dans Lovable :

Crée une app web pour tracker mes habitudes quotidiennes.

Fonctionnalités :
- Authentification email + Google
- Ajouter, éditer, supprimer une habitude (nom, description courte, fréquence daily ou weekly)
- Cocher chaque habitude chaque jour sur un dashboard
- Voir ma progression sur 30 jours en heatmap style GitHub
- Statistiques simples : streak actuel, meilleur streak, taux de complétion

Feel visuel :
- Design minimaliste, inspiration Linear/Notion
- Mode sombre par défaut, light en option
- Typographie système, pas de superflu

User flow au premier lancement :
- Si non connecté, page de login simple
- Après login, dashboard vide avec un bouton "Ajouter ma première habitude"

Stack : React + TypeScript + Tailwind + Supabase (DB et auth).

Lance la génération. Lovable va te produire en 30–60 secondes :

  • Une arborescence de fichiers (composants React)
  • Un preview live à droite de l’écran
  • Une proposition de schéma Supabase (tables, policies)

Prends 2 minutes pour cliquer dans le preview, essayer l’app telle quelle. Tu vas probablement trouver 3 choses à améliorer dès la première itération.

Minute 10–25 : Itérer sur le design

C’est l’étape où on tombe facilement dans le piège des 2 heures de fignolage. Time-box strict : 15 minutes max. Si c’est joli à 80 %, on passe.

Les prompts d’itération qui marchent

Ce sont des instructions précises, pas des jugements vagues :

Ajoute une sidebar à gauche avec la liste des habitudes actives
et un bouton "+" flottant en bas pour en créer une nouvelle.

Remplace le graphique de progression actuel par une heatmap
de 30 cases (5 lignes × 6 colonnes) en style GitHub contributions,
avec 4 niveaux de vert selon le taux de complétion quotidien.

La page de login est trop grande. Réduis le formulaire à 400px max,
centre verticalement, ajoute un petit logo en haut, retire le paragraphe
marketing au-dessus. Focus sur l'action.

Les prompts qui foirent toujours

  • « Rends-le plus beau » → Trop vague. Lovable va changer au hasard.
  • « Fais comme Notion » → Problèmes légaux et résultats aléatoires. Préfère décrire les éléments précis que tu aimes (la typo, le spacing, la palette).
  • « Ajoute toutes les features premium imaginables » → Tu vas exploser le scope en 2 prompts.

Règle d’or : une itération = une intention claire. Plusieurs ajustements en parallèle = confusion.

Minute 25–40 : Brancher la base de données (Supabase)

Jusqu’ici, les données sont en mémoire locale. Les habitudes disparaissent au refresh. On passe à Supabase pour la persistance.

Lovable te propose de créer le backend

À ce stade, Lovable détecte que tu as besoin d’une DB et te propose soit :

  • De créer un projet Supabase managé pour toi (recommandé en 2026)
  • De te connecter à un projet Supabase existant

Accepte l’option managée si c’est ton premier projet, ça t’évite 10 minutes de configuration. Lovable va créer :

-- Table habits (générée par Lovable)
create table public.habits (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users not null,
  name text not null,
  description text,
  frequency text check (frequency in ('daily', 'weekly')) default 'daily',
  created_at timestamp with time zone default now()
);

-- Table completions
create table public.completions (
  id uuid primary key default gen_random_uuid(),
  habit_id uuid references public.habits on delete cascade not null,
  completed_at date not null default current_date,
  unique(habit_id, completed_at)
);

-- Row Level Security (chacun voit ses propres habitudes)
alter table public.habits enable row level security;
alter table public.completions enable row level security;

create policy "own habits" on public.habits
  for all using (auth.uid() = user_id);

create policy "own completions" on public.completions
  for all using (
    auth.uid() = (select user_id from public.habits where id = habit_id)
  );

Vérifier que l’auth + DB fonctionnent

Test rapide :

  1. Clique sur « Preview » dans Lovable
  2. Crée un compte avec une fausse adresse test@exemple.com
  3. Ajoute 2 habitudes depuis le dashboard
  4. Rafraîchis la page, elles sont toujours là ✅
  5. Dans un autre navigateur privé, crée un second compte, les habitudes du premier ne doivent pas apparaître ✅

Si l’isolation inter-comptes foire, c’est que les Row Level Security policies ont sauté. Demande à Lovable : « Vérifie que les RLS policies sont actives sur habits et completions avec isolation par user_id. »

Minute 40–55 : Déployer en production

Le plus satisfaisant. Un clic et ton app est live.

Deploy natif Lovable

Dans l’interface Lovable, le bouton « Publish » génère une URL publique du type ton-projet.lovable.app. C’est instantané, HTTPS, prêt à être partagé.

Pour l’ownership long-terme : exporter vers GitHub

Si tu veux garder le contrôle total (et pouvoir migrer un jour), clique sur le bouton « Export to GitHub ». Lovable crée un repo privé avec tout le code : composants, configs, migrations Supabase. Tu peux ensuite cloner en local :

git clone git@github.com:toi/ton-habit-tracker.git
cd ton-habit-tracker
npm install
cp .env.example .env.local
# remplir les variables Supabase depuis le dashboard
npm run dev

Connecter un domaine custom (optionnel)

Lovable Pro permet de brancher un domaine perso. Dans ton DNS (OVH, Cloudflare, Infomaniak…), tu ajoutes un enregistrement CNAME pointant vers ton-projet.lovable.app. Lovable détecte automatiquement et provisionne le certificat SSL.

Minute 55–60 : Les 5 dernières minutes pour polir

C’est le moment des petites touches qui font la différence entre « démo potable » et « app présentable ».

  1. Meta tags SEO via prompt : « Ajoute un titre, une description et une image OpenGraph pour les partages sociaux. »
  2. Analytics privacy-friendly : prompt « Intègre Plausible avec mon domaine XYZ pour tracker les visites sans cookies. »
  3. Test mobile : ouvre ton URL sur ton téléphone. Si quelque chose casse, prompt direct : « La sidebar cache le contenu sur mobile, passe-la en drawer avec un bouton hamburger. »
  4. Screenshot final pour ton LinkedIn, tu l’as mérité.

Les limites de Lovable en 2026 (l’honnêteté paye)

Je préfère que tu saches maintenant plutôt que tu le découvres à minute 48 sous pression.

Ce qui marche vraiment bien

  • MVP rapide avec auth + DB + UI propre
  • Apps CRUD (gestion de liste, dashboard de données)
  • Landing pages avec formulaires
  • Outils internes d’équipe
  • Prototypes pour valider une idée avec de vrais utilisateurs

Ce qui galère encore

  • Flux complexes : wizards multi-étapes conditionnels, workflows imbriqués
  • Optimisations perf : si ton app dépasse les 10k utilisateurs actifs, il faut sortir de Lovable pour tuner
  • Debug fin : quand ça foire, Lovable ne te donne pas toujours la cause racine, tu dois souvent t’y plonger
  • Tests automatisés : génération de tests encore faible, à écrire à la main ou avec Claude Code après export
  • Intégrations tierces complexes : Stripe webhooks, flux OAuth custom, file upload chunked, souvent à finir à la main

Quand ce n’est pas le bon choix

  • Apps à fort trafic ou SaaS mature
  • Projets avec codebase legacy à intégrer
  • Besoins de conformité lourde (HIPAA, PCI, RGS élevé)
  • Design ultra-spécifique non négociable sur Figma

Combien ça coûte vraiment (tarifs Lovable 2026)

Question qui revient systématiquement en DM. Décortiquons les plans tels qu’ils sont en avril 2026.

Free tier

  • Quota de messages IA mensuels limité (environ 5 par jour, pour fixer l’ordre de grandeur, vérifie la valeur exacte sur leur site, ça bouge).
  • Projets publics uniquement (le code est visible si on cherche ton URL Lovable).
  • Deploy natif inclus avec sous-domaine *.lovable.app.
  • Export GitHub inclus.
  • Pour qui : découvrir Lovable, faire un projet perso, tester ce tuto.

Pro, 25 $/mois

  • Messages IA illimités (dans les limites du fair use).
  • Projets privés.
  • Domaines customs.
  • Support prioritaire.
  • Pour qui : freelances et devs qui construisent plusieurs MVP par mois.

Teams / Business

  • Plans au-dessus pour équipes (collaborateurs, SSO, audits).
  • Tarif à l’équipe, à la demande.
  • Pour qui : startups avec ≥ 3 devs utilisant Lovable en outil quotidien.

Le coût caché : Supabase

Point souvent oublié : si tu passes par un projet Supabase managé par Lovable, le free tier Supabase (500 Mo de DB, 1 Go de storage, auth illimitée) suffit pour la plupart des MVP. Au-delà, tu bascules sur le plan Supabase Pro à 25 $/mois additionnels. À prévoir si ton app décolle.

Verdict budget

Pour valider une idée et avoir une app live : 0 à 25 $. Pour la maintenir en prod avec un vrai trafic : 50 à 100 $/mois (Lovable Pro + Supabase Pro + domaine). À comparer avec les semaines/mois de dev que tu économises.

Et après ? Lovable + Claude Code = la combo gagnante

Le piège classique : rester dans Lovable pour tout. Mauvaise idée après le MVP.

Mon workflow préféré en 2026 :

  1. Lovable pour scaffolder : zero-to-one en 1–2 heures (tout ce tuto)
  2. Export vers GitHub dès que la structure est stable
  3. Clone en local et ouvre dans ton éditeur
  4. Claude Code prend le relais pour tout ce qui est custom : features métier pointues, tests, CI/CD, optimisations, refactors, intégrations complexes

C’est le vrai unlock : Lovable fait les 80 % génériques en 10× plus vite qu’un humain, Claude Code fait les 20 % spécifiques qui demandent ton cerveau. Si tu ne connais pas Claude Code, je l’ai documenté en détail dans le guide complet Claude Code 2026.

Récapitulatif : 60 minutes, une app en prod

  • 0–10 : prompt initial solide
  • 10–25 : itération design time-boxed
  • 25–40 : Supabase + auth + RLS
  • 40–55 : deploy + export GitHub
  • 55–60 : polish SEO + mobile

C’est le vibe coding en pratique : tu décris, l’agent construit, tu itères, tu shippe. Pas de debug interminable, pas de boilerplate, pas de « j’ai perdu 4 heures sur la config webpack ».

Lance ton premier projet Lovable

La prochaine étape

Tu as ton app live. Ce qui compte maintenant : l’enrichir avec de vraies features métier, la rendre résistante en prod, peut-être la monétiser.

Pour la suite, je te recommande de lire Claude Code : le guide complet 2026, c’est l’outil qui prend le relais quand Lovable atteint ses limites. Et si tu veux recevoir nos prochains tutos directement en boîte, inscris-toi au Brief AI Coding FR (formulaire sur la page d’accueil).

Tu as essayé ce tuto ? Dis-moi en retour ce qui a marché (ou pas) pour toi : hello@tutosss.com.