Utiliser Bolt.new : de l'idée à l'application déployée, étape par étape
Un parcours complet de Bolt.new, reconstruit à partir d'un vrai projet de débutant — premier prompt, itérations par captures d'écran, analytics, connexion Google via Firebase et déploiement. Chaque étape est illustrée.
Bolt.new en bref
- Commencez par une idée générale et les quelques fonctions voulues — « suivre des sessions de travail, ajouter des tâches, sauvegarder les sessions » — pas un cahier des charges. En une minute environ, une application fonctionnelle tourne.
- Itérez par prompts courts, une fonctionnalité à la fois : bouton de fin, onglet analytics, graphique circulaire, mode sombre. Si un changement rate, reformulez — le deuxième essai passe généralement.
- Les changements peuvent casser. Quand des boutons ne répondent plus, décrivez le bug simplement ou demandez un retour à la dernière bonne version — la plupart des problèmes se règlent en un prompt.
- La connexion Google passe par Firebase : créez un projet, activez le fournisseur Google, collez la firebaseConfig dans Bolt, puis autorisez votre domaine déployé dans les réglages Firebase.
Building an App from Scratch with Bolt.new
Vidéo source de:Brock Mesarich · AI for Non Techies16:02
Les captures d'écran proviennent de la vidéo source et sont créditées avec des liens horodatés. Le texte est notre propre rédaction, basée sur la transcription intégrale — les faits correspondent à l'enregistrement.
Ce tutoriel est un résumé illustré indépendant pour celles et ceux qui préfèrent lire. Pour soutenir le créateur, regardez la vidéo originale sur la chaîne AI for Non Techies, liée ci-dessus.
Créer une application dans Bolt.new, étape par étape
- 1
Décrire votre idée en un prompt
Ouvrez bolt.new et tapez une idée générale plus les fonctions voulues — pas un cahier des charges. L'exemple : « Construis-moi une application qui suit des sessions de travail. Appelons-la FocusFlow. Elle doit enregistrer des blocs de travail, ajouter les tâches accomplies pendant la session, puis sauvegarder ces sessions. » Trop de détails dès le départ ralentit la première version.
Le premier prompt FocusFlow sur bolt.new : idée générale, quelques fonctions.Voir à 0:30 - 2
Voir naître la première version — puis l'affiner par capture
Environ une minute plus tard, Bolt a écrit et exécuté le code : minuteur, formulaire de tâches, statistiques. Faites une capture de la partie qui vous déplaît, joignez-la et dites quoi changer — « rendons cette partie de l'app un peu plus simple ». Ce retour visuel vaut mille descriptions de positions de pixels.
La première prévisualisation et un prompt d'affinage par capture.Voir à 1:40 - 3
Ajouter des catégories aux tâches
Demandez une colonne de catégories avec des exemples concrets — admin, création de contenu, finance, recherche, développement. Bolt les transforme en grille de boutons, et chaque tâche reçoit une étiquette colorée — c'est ce qui rendra l'analytique utile ensuite.
La grille de catégories avec des étiquettes colorées.Voir à 2:30 - 4
Demander un bouton de fin de session
Le minuteur tourne mais rien n'est sauvegardé. Prompt : « Ajoute la possibilité de terminer une session. » Bolt crée de nouveaux composants (SessionControls, SessionSummary), les intègre, et la fin de session produit un résumé : durée, tâches accomplies, catégorie dominante.
Bolt planifie et crée les composants de fin de session.Voir à 3:00 - 5
Garder les résumés sur le tableau de bord
Par défaut, terminer une session saute vers une page séparée. Si ce flux déplaît, dites-le simplement : « Je n'aime pas être envoyé sur une nouvelle page à la fin de la session — garde tout sur le tableau de bord. » La carte de résumé apparaît désormais dans l'écran principal.
Session Complete vit maintenant sur le tableau de bord principal.Voir à 4:00 - 6
Ajouter un onglet analytics
Demandez un onglet Session Analytics listant chaque tâche par jour plus les totaux quotidiens. Bolt le place à côté de Current Session, et chaque session terminée se déploie en historique de tâches — c'est là que les catégories commencent à payer.
Le nouvel onglet Analytics à côté de Current Session.Voir à 4:30 - 7
Suivre le temps par tâche
L'analytique a besoin d'entrées : demandez que les tâches soient marquées comme terminées par défaut et d'ajouter le temps passé par tâche. Bolt ajoute des champs heures et minutes (remplacés ensuite par un curseur jusqu'à une heure) et alimente l'analytique avec ces chiffres.
Les champs de temps rejoignent le formulaire de tâches.Voir à 6:00 - 8
Visualiser le temps avec des graphiques circulaires
Prompt : « Ajoutons un suivi analytique avec des graphiques circulaires montrant le temps passé sur chaque chose. » Le premier graphique arrive démesuré — « réduis-le un peu » le corrige à la deuxième tentative. Ces micro-ajustements d'interface, c'est là que Bolt excelle.
Le graphique quotidien après correction de la taille.Voir à 6:25 - 9
Corriger les régressions en langage clair
En cours de route, les changements entrent en collision : des boutons meurent, un effet de traînée de curseur amusant casse la mise en page. Décrivez le bug simplement, demandez la suppression de ce qui déplaît, ou utilisez Annuler. Les listes de correctifs de Bolt — six points ici — réparent généralement tout en une passe.
Une liste de six correctifs répare le minuteur et retire l'effet de lueur.Voir à 9:30 - 10
Ajouter la connexion Google
Pour en faire un vrai produit, il faut des comptes. Prompt : « Ajoute la possibilité de se connecter via Google. » Bolt répond avec une fiche de travail — mise à jour de package.json, installation des dépendances, création du contexte d'authentification — plus les instructions Firebase à suivre hors de Bolt.
La fiche de travail Add Google Authentication de Bolt.Voir à 11:00 - 11
Créer le projet Firebase
Suivez le lien de Bolt vers la console Firebase, créez un nouveau projet (nommez-le, choisissez un compte) et continuez vers la console quand il est prêt. Le plan gratuit Spark suffit pour ce tutoriel.
Projet Firebase prêt — continuer vers la console.Voir à 11:30 - 12
Activer Google dans les méthodes de connexion
Dans la console : Build → Authentication → Sign-in method. Activez le fournisseur Google, puis aussi Email/Password pour que les utilisateurs puissent s'inscrire des deux façons. C'est exactement ce que la liste de Bolt demandait de configurer.
Google est désormais un fournisseur de connexion activé.Voir à 12:00 - 13
Coller votre firebaseConfig dans Bolt
Dans Project settings → Your apps, enregistrez une application web et copiez le bloc firebaseConfig à l'endroit que Bolt vous indique — le fichier de configuration créé par sa liste de tâches. Dites ensuite à Bolt « j'ai ajouté ma configuration Firebase » et il câble tout, jusqu'au bouton d'inscription fonctionnel.
Le bloc firebaseConfig à coller dans le fichier de configuration de Bolt.Voir à 12:30 - 14
Autoriser votre domaine déployé
Tant que Firebase n'approuve pas vos URL, la connexion Google meurt sur « popup bloquée ». Déployez l'app depuis Bolt, ouvrez Firebase → Authentication → Settings → Authorized domains et ajoutez localhost, votre domaine d'IDE et l'URL déployée (demandez à Bolt, il donne le domaine exact).
Les domaines autorisés dans les réglages Firebase.Voir à 14:00 - 15
Mettre en ligne et se connecter
Ouvrez l'URL déployée, cliquez sur Sign in et continuez avec Google — la popup fonctionne, votre avatar se place en haut à droite, et la déconnexion marche aussi. Vous avez une application déployée avec de vrais comptes, construite sans écrire une ligne de code.
Connecté sur l'application FocusFlow déployée.Voir à 15:00