Bolt.new anwenden: Von der Idee zur deployten App, Schritt für Schritt
Ein kompletter Bolt.new-Walkthrough, neu aufgebaut aus einem echten Anfänger-Build — Erst-Prompt, Screenshot-Iterationen, Analytics, Google-Login mit Firebase und Deployment. Jeder Schritt mit Screenshot.
Bolt.new in Kürze
- Starte mit einer groben Idee plus den paar Funktionen, die du willst — „Arbeitssitzungen tracken, Aufgaben hinzufügen, Sitzungen speichern“ — nicht mit einem Pflichtenheft. In etwa einer Minute steht eine laufende App.
- In kurzen Prompts iterieren, ein Feature nach dem anderen: End-Button, Analytics-Tab, Kreisdiagramm, Dark Mode. Trifft eine Änderung daneben, den Gedanken anders formulieren — der zweite Versuch sitzt meist.
- Änderungen können regressieren. Wenn Buttons sterben, den Bug schlicht beschreiben oder die letzte gute Version zurückfordern — die meisten Probleme fixt ein Prompt.
- Google-Login braucht Firebase: Projekt anlegen, Google-Provider aktivieren, die firebaseConfig in Bolt einfügen und die Deploy-Domain in den Firebase-Einstellungen autorisieren.
Building an App from Scratch with Bolt.new
Quellvideo von:Brock Mesarich · AI for Non Techies16:02
Screenshots stammen aus dem Quellvideo und sind mit Zeitstempel-Deep-Links gekennzeichnet. Der Text basiert auf unserem eigenen, vollständigen Transkript — die Fakten entsprechen der Aufzeichnung.
Dieses Tutorial ist eine unabhängige, illustrierte Zusammenfassung für Leserinnen und Leser. Wer die Creator unterstützen möchte, schaut sich das verlinkte Video auf dem Kanal AI for Non Techies an.
Eine App in Bolt.new bauen, Schritt für Schritt
- 1
Die Idee in einem Prompt beschreiben
bolt.new öffnen und eine grobe Idee plus die gewünschten Funktionen tippen — kein Pflichtenheft. Das Beispiel: „Bau mir eine App, die Arbeitssitzungen trackt. Nennen wir sie FocusFlow. Sie soll Arbeitsblöcke erfassen, in der Sitzung erledigte Aufgaben hinzufügen und Sitzungen speichern.“ Zu viele Details bremsen den ersten Build.
Der erste FocusFlow-Prompt auf bolt.new: grobe Idee, wenige Funktionen.Bei 0:30 ansehen - 2
Der ersten Version beim Entstehen zusehen — dann per Screenshot feilen
Etwa eine Minute später hat Bolt den Code geschrieben und gestartet: Timer, Aufgabenformular, Statistiken. Screenshot der Stelle machen, die nicht gefällt, anhängen und sagen, was anders soll — „machen wir diesen Teil der App etwas schlichter“. Visuelles Feedback schlägt jede Beschreibung von Pixel-Positionen.
Die erste Vorschau plus ein screenshot-basierten Verbesserungs-Prompt.Bei 1:40 ansehen - 3
Kategorien für Aufgaben ergänzen
Eine Kategoriespalte mit konkreten Beispielen anfordern — admin, Content Creation, Finanzen, Recherche, App-Bau. Bolt macht daraus ein Button-Raster, und jede Aufgabe erhält einen farbigen Tag — die Grundlage dafür, dass die spätere Analytik etwas taugt.
Das Kategorie-Raster mit farbcodierten Aufgaben-Tags.Bei 2:30 ansehen - 4
Einen End-Session-Button anfordern
Der Timer läuft, aber nichts wird gespeichert. Prompt: „Füge die Möglichkeit hinzu, eine Sitzung zu beenden.“ Bolt erzeugt neue Komponenten (SessionControls, SessionSummary), verdrahtet sie, und beim Beenden erscheint eine Zusammenfassung aus Dauer, erledigten Aufgaben und Top-Kategorie.
Bolt plant und erstellt die Session-End-Komponenten.Bei 3:00 ansehen - 5
Zusammenfassungen aufs Dashboard holen
Standardmäßig springt das Beenden auf eine eigene Seite. Gefällt der Flow nicht, einfach sagen: „Ich mag es nicht, dass es mich beim Sitzungsende auf eine neue Seite schickt — halt es auf dem normalen Dashboard.“ Die Summary-Karte erscheint jetzt direkt im Hauptbild.
Session Complete lebt jetzt auf dem Haupt-Dashboard.Bei 4:00 ansehen - 6
Einen Analytics-Tab ergänzen
Einen Session-Analytics-Tab anfordern, der alle Aufgaben pro Tag plus Tages-Summen listet. Bolt setzt ihn neben Current Session, und jede abgeschlossene Sitzung klappt zu ihrer Aufgabenhistorie auf — hier zahlt sich die Kategorie-Tags aus.
Der neue Analytics-Tab neben Current Session.Bei 4:30 ansehen - 7
Zeit pro Aufgabe erfassen
Analytik braucht Eingaben: Aufgaben standardmäßig als erledigt markieren lassen und Zeitaufwand pro Aufgabe ergänzen. Bolt fügt Stunden- und Minutenfelder hinzu (später ersetzt durch einen Drag-Slider bis eine Stunde) und speist die Zahlen in die Analytik.
Zeitaufwand-Felder ziehen ins Aufgabenformular ein.Bei 6:00 ansehen - 8
Zeit mit Kreisdiagrammen visualisieren
Prompt: „Lass uns Analytics-Tracking wie Kreisdiagramme ergänzen, die zeigen, wie viel Zeit wofür draufging.“ Das erste Diagramm kommt absurd groß — „mach es etwas kleiner“ fixt es beim zweiten Versuch. Solche Mini-Korrekturen sind Bolts schnellste Disziplin.
Das Tages-Kreisdiagramm nach der Größenkorrektur.Bei 6:25 ansehen - 9
Regressionen in klarem Englisch fixen
Mitten im Build kollidieren Änderungen: Buttons versagen, ein spaßiger Cursor-Glow-Effekt zerschießt das Layout. Den Bug schlicht beschreiben, das Ungeliebte löschen lassen oder Undo nutzen. Bolts eigene Fix-Listen — hier sechs Punkte — richten meist in einem Durchgang alles wieder.
Eine Sechs-Punkte-Fixliste repariert Timer und entfernt den Glow.Bei 9:30 ansehen - 10
Google-Login ergänzen
Damit aus der App ein echtes Produkt wird, braucht es Konten. Prompt: „Füge die Möglichkeit hinzu, sich über Google anzumelden.“ Bolt antwortet mit einer Workcard — package.json aktualisieren, Abhängigkeiten installieren, Auth-Kontext anlegen — plus Firebase-Schritt-für-Schritt-Anweisungen für dich.
Bolts Add-Google-Authentication-Workcard.Bei 11:00 ansehen - 11
Das Firebase-Projekt anlegen
Über Bolts Link in die Firebase-Konsole, ein neues Projekt anlegen (Name, Konto wählen) und nach der Fertigmeldung in die Konsole weitergehen. Der kostenlose Spark-Plan reicht für dieses Tutorial.
Firebase-Projekt bereit — weiter in die Konsole.Bei 11:30 ansehen - 12
Google bei den Sign-in-Methoden aktivieren
In der Konsole: Build → Authentication → Sign-in method. Den Google-Provider aktivieren, dazu Email/Password, damit Nutzer sich auf beide Weisen registrieren können. Genau das, was Bolts Checkliste verlangt.
Google ist jetzt ein aktiver Sign-in-Provider.Bei 12:00 ansehen - 13
Die firebaseConfig in Bolt einfügen
Unter Project settings → Your apps eine Web-App registrieren und den firebaseConfig-Block kopieren — Bolt zeigt dir die Stelle in der Konfigurationsdatei aus seiner Checkliste. Bolt dann sagen: „Ich habe meine Firebase-Config eingefügt“, und es verdrahtet alles bis zum funktionierenden Sign-up-Button.
Der firebaseConfig-Block zum Kopieren in Bolts Konfigurationsdatei.Bei 12:30 ansehen - 14
Die Deploy-Domain autorisieren
Bis Firebase deinen URLs vertraut, stirbt der Google-Login mit „Popup blockiert“. Die App aus Bolt deployen, dann Firebase → Authentication → Settings → Authorized domains öffnen und localhost, die IDE-Domain und die Deploy-URL eintragen (fragst du Bolt, nennt es die exakte Domain).
Authorized domains in den Firebase-Einstellungen.Bei 14:00 ansehen - 15
Live gehen und sich anmelden
Die Deploy-URL öffnen, Sign in klicken und mit Google fortfahren — das Popup funktioniert, der Avatar landet oben rechts, das Abmelden ebenfalls. Fertig ist eine deployte App mit echten Konten, gebaut ohne eine Zeile eigenhändigen Code.
Angemeldet auf der deployten FocusFlow-App.Bei 15:00 ansehen