Build a COMPLETE Website in 15 Minutes (on Bolt.new!)

If you've ever had a great idea for a

product, a prototype, a website, or even

a simple tool for yourself, but the

setup and the creation process always

felt too complicated, then this video is

for you. Today, I'm going to show you

how to get started with all that new and

why it has truly never been easier to

bring your ideas to life. We're going to

go from a zero to a fully deployed app,

and I'll show you everything you need to

know. You'll see exactly how to generate

a complete application from just a

simple prompt. How to make quick visual

edits using the amazing inspector mode.

And finally, deploy your app live all

with a single click. You can forget

about any complex setups or terminal

commands. All you need is your idea and

bolt that new. Let's dive right in.

All right. Now, we are ready to build.

But before we type a single word, let's

talk about the most important part of

this entire process, which is the

prompt. The bolt agent is brilliant,

especially now with recently released

cloud agent, which is an extremely

advanced agent. It's widely regarded as

the best coding agent available on the

market. It's still not a mind reader,

though. The quality of your instructions

directly determines the quality of the

final app. The clearer you are, the

better the result. So, we're going to

cover two key ways to create a great

prompt. First is the iterative approach.

So let's say you have a simple idea. We

can just type make a to-do app. This

will work, but it's very very vague. A

better way is to use B's built-in

enhanced prompt feature. Watch what

happens when I click that.

As you can see, it took our simple idea

and fleshed it out with the specific

details the agent needs. talking about

adding new tasks, marking tasks as done,

editing existing tasks, deleting tasks,

all the stuff that Bolt assumed about

our project, you can check them here

before you start building. And in case

you see something you don't like,

something you want to change, something

you want to iterate on, you can change

it here directly in the prompt and only

then start building. So this is pretty

good for quick ideas on when you're

adding features to an existing app.

However, for a new project, I recommend

the second method, the detailed prompt.

This is where you think through your

idea beforehand and write clear

specifications from the start. You could

build it here directly in bold. In many

cases, you would go to cloud, you would

go to chatgpt to gemini, you would talk

with the model about your idea and at

the end, you would usually come up with

a prompt that looks something like this.

So in my prompt I have a certain

sections like the views I want to have,

how I want to add tasks in my app, how I

want those tasks to be displayed. Uh app

is choosing default UI patterns. So I'm

going to keep it a bit open. General

visual direction, accessibility

constraints, which I really like to add

in all of my prompts. Uh and acceptance

criteria. This is I think a very

underrated part of prompting. So you

sort of explain some user journeys, user

scenarios, UX scenarios that you really

want to have in your app and adding that

at the end of your prompt I think is a

really great tip. Uh so if you want to

take something out of this video today,

add acceptance criteria and constraints

to your prompts. You'll see a massive

upgrade in your prompting game.

Now that our prompt is ready, we could

already build our project. But there is

one more thing that I highly recommend

doing before building the app, which is

going into the plan mode. So we'll do

just that. We'll toggle this button on

and then click build now. So what

exactly is plan mode? You can think of

it as the agent showing you its work

before it writes a single line of code.

It gives us a complete step-by-step

blueprint of exactly what it's going to

build. So now the bolt is planning it's

analyzing the prompt analyzing the

project structure and requirements and

it's going to create a compre

comprehensive plan for the desktop first

as we asked it to be task manager. Now

you can see it's confirming it's going

to set up the database. It's going to

create layout and navigation structure

the natural language parser engine which

we asked it for all the next steps and

Bolt is currently planning. So we'll

give it a few seconds and come back when

the plan is ready.

Amazing. Our plan is now ready. It took

about 30 seconds. Uh and we can see the

summary where it explains our entire

project and then you can go step by step

analyze the entire plan. So it sort of

serves as our final confirmation that

the agent understood our prompt

perfectly. If we saw something here that

was wrong or missing, we could stay in

the plan mode uh adjust our prompt

without having wasted any time on some

flaw generations. So this is our chance

to still catch any misunderstandings

before the code is generated. Especially

if you're a non-technical builder, there

might be some elements here that you

might not fully understand. And that's

perfectly fine. Focus on the bits that

you know how you want them to look like.

for example, the task model and how the

title inputs are going to be presented

if you want multi-line description,

stuff like that. So, focus on the bits

that are important to you and you can

ignore uh the the other bits that you're

not sure about. Let's just trust Clo

agent that is going to do a great job.

So, when we are happy with the plan, we

don't see any misunderstandings. Uh

there's nothing wrong, nothing missing.

We can implement this plan and see what

Cloud Agent and Bolt will come up with.

Let's hit the button and let Bolt cook.

And now we can see our app is ready. Our

first version, first iteration plant

went well. Everything got done. Uh it

run the build and verify that everything

works. So now we can try to add our

first task. So when we go here, click

add. There are some hints on how we can

add our task. So let's say my task will

be to create this video today. It's

quite important and it's let's say for

work. When we hit save

and go to today, we can give it a

second. We can see it created a task. Uh

it's for today, it created a project

work. Uh when we go to focus, it has a

high priority. So everything works quite

well.

So now I've asked Bolt to add some mock

data to our app. So you can see how it

would look like when you're using it

every day. Adding your tasks for today,

upcoming when you have several project

and several labels for your tasks. So

when you see your app in this state and

you think okay there are some bits I

would like to change especially visually

let's say if I'm closing the sidebar

here like this icon it doesn't look like

it's closing a sidebar it's just a

random X essentially to change it we

could explain it to both here in the

prompt to change the X icon that is next

to the search tasks over here and change

it to the sidebar icon or which is much

simpler we can use the inspector mode.

So we can click on select here and you

can see we can select certain containers

and elements on our app and ask bold to

edit that specific element. So we can

click on this X and we can ask B to

change this icon to the sidebar icon

regardless of the sidebar state.

So instead of describing where this icon

exactly is, we could just go to

inspector mode, click on it, and then

Bolt will know exactly which icon to

change. Let's give him a few seconds to

change the icon for us.

So as I mentioned, Bolt now changed our

icon and now it's sidebar icon

regardless of the state. So to use

visual inspector once again, let's say

we want to change this button's color.

So, we can click on the button. You'll

see the button is selected for

inspection. And we're just going to say

make this button green. Going to hit

enter. And again, give bold a few

seconds to see how it uh changes our

button color to green.

And we are done. So, currently we've

changed our sidebar icon and we changed

our buttons color to green. So, visual

inspector, inspector mode, perfect for

making small edits inside UI. But if

you'd like to change, for example, this

background color, different icons,

different elements on the website, it's

a great way to explain which section you

want Bolt to work on. Instead of

describing it in like three sentences,

you can just click on a specific element

and Bolt will know which section of your

app or of your website you want to

change.

So to present another amazing feature of

Bolt, I've asked it to change the design

of this half to Cyberpunk and I think it

did a really good job. It actually looks

looks quite good with this design.

However, there might have been a chance

that after asking for such a big change

in our app, we are not exactly happy

with how it turned out. If that's the

case, instead of trying to explain it to

go back to the minimal simple basic

state, much easier way is to use the

version history. So over here we can see

that's our latest version. And if we

click on this one, we have the preview

of our previous version. So if anything

goes wrong at any stage during your

project, you can always restore the

previous version. We're going to have a

list of our previous changes when we had

our button blue. Now we have our button

green and the latest Cyberpunk theme. So

if you're not a big fan of the Cyberpunk

theme and you actually think, okay, let

me get back to this one and maybe let's

go for a different style, all you have

to do is restore this version. We want

to confirm that and we are back to our

previous project and our previous UI.

So now I've changed the UI of our app

again to sort of a Japanese minimalistic

zen like UI. And I'm going to ask to I'm

going to ask B to add one more feature.

So please add a calendar view to our

app. And just so you know the plan mode

is not only for the initial prompt. We

can use the plan mode again because this

prompt as before it is a little bit

fake. So we might want to see what bold

comes up with and let's make sure that

this is sort of the calendar view that

we had planned for our app. Let's give

it a few seconds and we'll get back to

it.

So Bolt came back to us uh with a few

questions to clarify our requirements.

So

for the calendar type uh we want to have

both views with ability to toggle

between them. For task display they can

be displayed as as dots is fine.

Navigation placement it should be an

item in the sidebar.

Okay, we have our answers ready. We're

going to stay in the plan mode again so

the bolt can update its initial plan uh

accordingly now that it knows our

answers. So now it has all the

information it needs to implement our

new feature. Let's wait for the bolt to

update the plan. Okay, the important

reminder that it is in the plan mode. So

it can only read the codebase to

actually write new code. Uh we need to

click on implement this plan. And again

we're going to give B some time uh to

accomplish this feature and we'll be

back seeing how it did.

So after a couple minutes we have our

calendar view ready. So as we've asked

Bolt to do we have a monthly view where

tasks are marked as dots. When we click

on a specific day we can see a list of

tasks. And when we go to a weekly view,

it works amazing as well. So if you want

to have a new feature, add something to

your app, just ask B to do it. Use the

plan mode. Ideally, you don't have to do

it, but it helps uh with making sure

that the feature looks like you wanted

it to look and just add as many features

as you want to your app.

Whenever we are happy with how our app

looks and feels, all is left for us to

do is to actually publish it online. So,

it's probably the easiest step actually

of all the steps we did today. So, we go

here, click on the publish, click on the

publish button again. And now, Bolt is

publishing our site. It will just take a

moment uh as B says, and we're going to

see our published app in just a second.

So now our app has been successfully

published. When we click on the link, we

will see that our app is now officially

online. So as I promised in the

beginning, we don't have to ever leave

Bolt to get from our idea through the

prompt, the plan mode, visual inspector,

version history, some iterations, right

to the publishing our app online. It's

really all in one solution. And whatever

your idea is, as I mentioned, regardless

if it's an app, if it's a landing page,

if it's a prototype, you can go full way

from the idea to the deployed

application.

Now, you might have noticed we have a

fully functional app, but we never once

touched a database file. That's because

Bolt's agent built and managed a real

production ready database for us

automatically. In the next video, we're

going to dive deep into that packet

magic. We'll explore the database in

more detail, look how to add user

authentication, server functions,

secrets, how to manage our users. We're

going to go over file storage,

analytics, and really get under the hood

of that back end that will generate

automatically for us. But we also want

to hear from you. Is there a specific

app or a cool feature you'd like to see

us build? Let us know in the comments

below. Your idea might just be a star of

a future video. Until then, head over to

Bold at New and give it a try. Thank you

so much for watching and I'll see you in

the next one.