How to Use Bolt.new: From Idea to Deployed App, Step by Step
A complete Bolt.new walkthrough rebuilt from a real beginner build — first prompt, screenshot iterations, analytics, Google sign-in with Firebase, and deploy. Every step has a screenshot.
Bolt.new in short
- Start with a general idea plus the few functions you want — "track work sessions, add tasks, save sessions" — not a spec. Bolt scaffolds a working app in about a minute.
- Iterate in short prompts, one feature at a time: end-session button, analytics tab, pie charts, dark mode. If a change misses, send the same idea differently — the second try usually lands.
- Changes can regress. When buttons stop working, describe the bug plainly or ask Bolt to revert to the last good version — it fixes most issues in one try.
- Google sign-in needs Firebase: create a project, enable the Google provider, paste the firebaseConfig into Bolt, then authorize your deployed domain in Firebase settings.
Building an App from Scratch with Bolt.new
Source video by:Brock Mesarich · AI for Non Techies16:02
Screenshots come from the source video and are credited with timestamp deep links. The walkthrough text is our own, based on the full transcript — facts match the recording.
This tutorial is an independent, illustrated summary for readers who prefer text. To support the creator, watch the original on the AI for Non Techies channel linked above.
Build an app in Bolt.new, step by step
- 1
Describe your idea in one prompt
Open bolt.new and type a general idea plus the functions you want — not a full spec. The example: "Build me an app that tracks work sessions. Let's call this FocusFlow. The point of this app is to track work blocks, add tasks completed during the session, and then save those sessions." Too much detail upfront slows the first build down.
The first FocusFlow prompt on bolt.new: general idea, few functions.Watch at 0:30 - 2
Watch the first version appear — then refine with a screenshot
About a minute later Bolt has written and run the code: a timer, task form, and stats. Take a screenshot of the part you dislike, attach it, and say what to change — "let's make this part of the app a little bit more simple." Visual feedback like this beats describing pixel positions in words.
The first preview plus a screenshot-driven refinement prompt.Watch at 1:40 - 3
Add categories to tasks
Ask for a category column with concrete examples — admin, content creation, finance, content research, app building. Bolt turns them into a button grid, and every task you add gets a color-coded tag, which is what makes the later analytics meaningful.
The category button grid with color-coded task tags.Watch at 2:30 - 4
Ask for an End Session button
The timer runs but nothing is saved. Prompt: "Add the ability to end a session." Bolt creates new components (SessionControls, SessionSummary), wires them into the app, and ends sessions with a summary of duration, completed tasks, and top category.
Bolt plans and creates the session-end components.Watch at 3:00 - 5
Keep summaries on the dashboard
By default ending a session jumps to a separate page. If you dislike the flow, say so plainly: "I don't like how it takes me to a new page when the session ends — keep it on the normal dashboard." The summary card now appears inline on the main screen.
Session Complete now lives on the main dashboard.Watch at 4:00 - 6
Add an analytics tab
Prompt for a Session Analytics tab that lists every task per day plus totals for the whole day. Bolt adds it next to Current Session, and each completed session expands into its task history — this is where the category tags start paying off.
The new Analytics tab beside Current Session.Watch at 4:30 - 7
Track time per task
Analytics need inputs: ask to mark tasks complete by default and to add time spent per task category. Bolt adds hours and minutes inputs (later replaced by a drag slider up to an hour) and feeds the numbers into the analytics.
Time-spent inputs join the task form.Watch at 6:00 - 8
Visualize time with pie charts
Prompt: "Let's add analytics tracking like pie charts showing how much time was spent on everything." The first chart arrives comically oversized — "make this a bit smaller" fixes it on the second try. Tiny UI fixes like this are where Bolt's iterate-fast loop shines.
The daily breakdown pie chart after a size fix.Watch at 6:25 - 9
Fix regressions with plain English
Mid-build, changes can collide: buttons stop working, or a fun cursor-trail effect breaks the layout. Describe the bug plainly, ask Bolt to delete what you dislike, or use Undo. Bolt's own fix lists — six targeted changes here — usually restore everything in one pass.
A six-point fix list repairs the timer and removes the glow effect.Watch at 9:30 - 10
Add Google sign-in
To turn the app into a real product you need accounts. Prompt: "Add the ability to sign in via Google." Bolt answers with a work card — update package.json, install dependencies, create the auth context — plus step-by-step Firebase instructions for you to follow outside Bolt.
Bolt's Add Google Authentication work card.Watch at 11:00 - 11
Create the Firebase project
Follow Bolt's link to the Firebase console, create a new project (name it, pick an account), and continue to the console when it is ready. The free Spark plan covers this tutorial.
Firebase project ready — continue to the console.Watch at 11:30 - 12
Enable Google in sign-in method
In the console: Build → Authentication → Sign-in method. Enable the Google provider, then also enable Email/Password so users can sign up either way. This mirrors what Bolt's checklist told you to configure.
Google is now an enabled sign-in provider.Watch at 12:00 - 13
Paste your firebaseConfig into Bolt
In Project settings → Your apps, register a web app and copy the firebaseConfig block Bolt shows you where to paste — the config file its checklist created. Tell Bolt "I added my Firebase config" and it wires everything up, producing a working Sign up button.
The firebaseConfig block to copy into Bolt's config file.Watch at 12:30 - 14
Authorize your deployed domain
Google sign-in dies with "popup blocked" until Firebase trusts your URLs. Deploy the app from Bolt, open Firebase → Authentication → Settings → Authorized domains, and add localhost, your IDE domain, and the deployed URL (Bolt hands you the exact domain if you ask).
Authorized domains in Firebase settings.Watch at 14:00 - 15
Go live and sign in
Open the deployed URL, hit Sign in, and continue with Google — the popup now works, your avatar lands in the corner, and signing out works too. You have a deployed app with real accounts, built without writing code.
Signed in on the deployed FocusFlow app.Watch at 15:00