Transcripts
1. Course Introduction: This course, we are going to
talk about how you can build production grade applications
all with the help of AI without writing a
single line of code. Well, you don't even
need to know coding. That is what we
are going to learn and we are going to
learn in a hands on way. I'm facil, and I'm
thrilled to be your guide in this hands on big no friendly course where we explore how artificial
intelligence can help you bring your app ideas to life without writing
single line of code. In this particular
course, we dive into an amazing piece of
software called bolt dot N. This is a cutting
edge tool that lets you build fully
functional applications just by describing
what you want. Now, whether you are
a curious beginner, non technical founder or simply
someone who is looking to prototype your ideas quickly so that you can validate things. This course will
help you understand how you can do that easier, faster, and how it's more
accessible than ever. Is how the course flows. So we'll first understand
what bolt dot Nu is. What is this EI tool
and how it works. We will set up our
account workspace, and then we will begin
writing a application. So we'll make use
of bolt dot neu the software to generate
an application for us. We'll understand its interface and all the nitty
gritties that are needed for us to build a fully functional production
grade application. And then we will build
our second project, which will be even
more complex project than the first one and this is where we will understand the
true power of such AI tools. I will not only build products in a hands on way
and showcase it to you, but also I'll highlight how
you can refine your product, how you can do improvements, how you can iterate on designs, and how you can fix bugs
in your application. All of that in a
completely hands on way, wherein we will actually
be fixing bags, actually improving layouts and adding new features
to our application. Whenever you build
something new, it's really important that
you deploy it somewhere on the Internet so that the
world can access it, right? So this is also covered in the course wherein
we will take help of bolt dot new and we will add a database
to our application, and we will also
have it deployed to a live server so that
the world can access it. By the end of the
course, you will not only have multiple apps working, but you will also have the
confidence to keep building, testing and launching your
ideas at lightning speed. And this course is perfect for beginners having no
coding background. Even if you have coding
background, you are welcome. You will learn how
coding is much more faster these days with
the help of these AI tools. But beginners with no coding
background are also welcomed entrepreneurs and creators who want to prototype their ideas. This course is for them as well. Also, this course is for
anyone who is curious about how AI can be used for building production
grade application. No technical skills, no problem. All you need is an idea and this amazing
piece of software, which is bold dot new, which will help you do the rest. So let's get started and watch your ideas come to life
with the help of AI.
2. What is Bolt.new?: So let's start talking
about bolt. What is bolt? So bolt EI is an innovative EI powered
web development platform that allows users to create, run, and edit and even deploy full stack web
applications directly in their web browser or
via the web browser. Instead of writing
code line by line, you just describe what
you want to build using natural language and this tool, which is bolt AI will generate
the corresponding code. Okay. So here head of word to your favorite search engine.
So I've opened Google. You can open any search
engine of your choice, and you can just search
for bolt over here. Now, when you search for bolt, the first website that
you will see over here is likely going to
be bold dot new. Okay? So you can click on
this and you can come over to this particular
website over here. So this is the official website. Or if for some reason, you don't see this
as the first result, feel free to scroll down a bit. Okay? It might be the second
or third result for you. Or you can alternatively
directly type the same. So far so good, okay? Now, here, you can see
this punch line over here. What do you want to build?
Create stunning apps and websites by
chatting with AI. Yes, so that's what
this tool does. It makes use of artificial intelligence and
machine learning algorithm into various
stages of development, and it builds a full
fledged product for you. And this product, you can
even connect to database. You can deploy it onto the Internet and you can make
it accessible for anyone. So here, if you are on
this particular website, you can simply give
this prompt over here. You can see, you can
click over here. Create a financial app. Now, the moment you
see this, okay, it is going to take you through
this chat page over here. So we have not signed up
or done anything yet. We just clicked on, create
a new financial app, and you can see it started importing the project into bold and it said it will
create a moment, and you can see over here it is importing this
financial app NPM install, it is running this application. Okay, so it has set up
this application for us without us telling too
much about the application. And you can see this is a basic application that is
built with bolt already. Okay? So this application must be built with bolt already, and that is what you're
seeing over here. Now, if you go to
the homepage again, there are quite a few options over here, you can take a look. You can even import
things from Figma or Github if you wish to
and build it over here. Okay? And here at the top, you'll see community
enterprise option over here, and then you have an
option for pricing. Now when we talk about pricing, we will of course be making use of the free version, okay? I don't think you are going
to need paid version, but if you are building this seriously or working
on it seriously, working with this
tool seriously, then you can upgrade to Pro in future and you can compare
the benefits over here, okay? But for learning, experimenting,
building projects, okay, as long as we are within the
minutes sorry, not minutes. As long as we are within
the limits over here, okay, you do need to upgrade. So a free version should
be fine over here. Now here you can see over
here in free version, you get public and
private projects, okay, which means your projects
can be private to you and not be shared with anyone or not
be seen with anyone. You get 1 million
tokens per month, okay? So here you can see
in pro version, like the $20 per month plan, you get 10 million
tokens per month. Here you're getting
1 million tokens per month. What are tokens? We'll come to that shortly, and you are getting this
as the deal in limit. Okay, this is the daily
limit for the tokens. So let's talk about tokens.
Now, what are tokens? You can think of token as a
currency, basically, okay? Or let me go over
here to resources. I'll go to Docs
and Health Center. Okay. And here on
the left hand side, so this is the official
documentation of bold. Here on the left hand
side, if you scroll down, you'll see something
called as tokens. So select this, and
you can see over here. Okay, Tokens are small
pieces of text, okay? Now, I love cats, and
then exclamation. Okay, these are all
tokens over here. So if you count this, one, two, three, and four. Okay, this becomes four token. So language learning
model like LLMs, they process text as tokens, and this basically is the unit
over here or the currency, using which you are charged. Okay? So if you are
giving in a lot of input, if you're doing a
lot of development, if you're iterating
over the code a lot and your usage is high, then of course, you'll be making use of high number of tokens. If you're making high
number of tokens, if you're making use of
high number of tokens, you're going to
need the provotion. Okay? That is what
I'm coming to. Okay? So as long as your usage is within 1 million
tokens per month, you are good to go
for the free plan. Okay. So this is something
that you need to understand. You can see over here,
a simple function will make use of 5,200 tokens. Medium script will make
use of this much of token. A full application will make
use of this much of token. And here you can
see if you're using an LLM through paid
service like bold, costs are often calculated based on the number
of tokens processed. Okay. Fewer tokens
means lower cost. So basically, it's a unit of it's like your currency,
you can think of it. So here, this is what Token is, and this is the official
documentation over here. So I would highly encourage
you can play around with this documentation if you need any sort of help in the future. But yeah, for now, it's important that you
understand what tokens are. All right. So this is
about bolt over here. This is the product, okay? You can click on these
various options. It can even help you
build a mobile app. So you can click on these
various options and explore this product apet. I hope this has
been useful so far.
3. Your First App Built By AI Using Bolt.new: So now is the time that we
go a little bit hands on, set up our workspace, and even build one
first application that gives us the feel of EI. Okay? So I'm going to
click on Get Started. If you already have an account, you can hit sign in and you'll be taken to the
sign in page, okay. But I'm going to follow
all these steps for new users so that if you are new to this setup,
you follow along. So I'll say get started.
You see this page. So you have sign in with Google Github, email and password, so you can choose the appropriate option
based on your preference, okay, and create an account. Now remember, if you sign
in with email and password, you will have to
verify your email as well. So that's one step. So I'm going to quickly click on sign in with
Google over here. So you can see over here, I authenticated myself
using Google, and I have been bought
to this same web page, which is nothing but the
home page over here, okay? And you can see here
at the bottom, okay, I have this side pane, Okay, which we can
explore later on. So to create the
web application, I'm going to give my
inputs over here, okay? And the application that I'm going to build, it
can be any application, first of all, but the
application that I've chosen is a random inspirational
code generator, right? And I'll describe my
application over here, okay? So I'm telling the AI model
or boulg dot new over here. I'm telling you that
create a web page with a central button that
says generate a new code. When clicked, display a
random inspirational code below the button. That's it. It's a very simple application. It just displays random codes. Okay? Now, I can quickly say, go over here, okay? Or if you are not sure
and if you want to enhance this particular prompt a bit, then there
is this button. Okay, you can see this
button, enhance prompt, and there is an option
to upload the files as. So if you want to give
additional context, you can upload files as well. But I'm going to say
enhance the prompt, okay? And the moment you click
on enhance the prompt, it is going to
enhance this prompt, make it more detailed. So you can see over here or
you can read through it. Okay. You can read through it. Create a responsive
web page using the following design
a clean centered layout with prominent button. It contains this text, uses an appealing
color scheme and modern styling has over
and click effects on the interaction is easily clickable on board desktops
and mobile devices. When it's clicked, so
you can see over here, I can fetch the code from a
predefined array on an EPI, display the code
below the button, and you can see over here, there are a few
more pointers and styling requirements
that have been added. So just added two lines, and here, this prompt is enhanced to add more
detailed information. Now you're free to tweak this information
the way you want, if you don't want
any sort of things, for example, if you don't
want these animation, so you can get rid of this line. If you want to add
something else, you can add it over here. So you can enhance the prompt, and the better the input you are giving or the text written or the description that
you're giving of the application that you desire
to have to the AI model, the better the response will be. So this is very elaborate Okay, it does describe
each and everything, and that is the benefit of making use of this enhanced
prompt option over here. Okay? You can see the conformation
prompt has been enhanced. So I'm going to
say, go over here. And you can see you'll be
taken to this kind of a page, which is, you know, which is going to basically
start working on it. And here on the right hand
side, you're going to see the preview your
application preview, right? So you can see it's thinking, I thoughts for 8 seconds. Okay? And if you want to see the thought process,
you can click on this. Okay. So here's the
thinking process. So it created this and it is now generating this entire code. So you can see it's setting up the entire project for you. It is updating
this file for you. It is writing code
for you essentially. So we'll wait for a while. Until the entire code
generation process is complete. Okay? Now, if you want
to see the code as well, here is an option at the top, which is code button
and you'll see the entire code being generated
and updated over here. But I'll just skip that. I'll just select preview because I'll let AI
do the job for me. Okay, we'll wait
for a while until this entire process is complete. It will take a few
seconds or minutes. So that was quick. It generated this kind of an application. You can see over here.
Daily inspiration, discover wisdom that
sparks motivation and ignites your potential
with every click. Interesting. Click the button above to reveal your
first inspirational code. Great. So here you
can see this button. It has a good animation
and a good hover effect. You can see. Did we design this? Did we develop this?
Absolutely, no. Okay? It's all generated by. If you click on this, it's going to generate a new code for you. You can see if you're
working on something that you really care about, you
don't have to be pushed. The vision pulls you. This is a code by Steve Jobs. Interesting. Okay. So I did not even have to give the list
of codes and all of that. It has just done the job
for me. You can see. This is a very
simple application that is very presentable. It is like it is a
presentable application. You can deploy it
onto production and you can have it as
your simple application that you built hardly in 10 minutes using AI or
5 minutes using AI. I hope this gives you a sense
of how powerful EI can be. So this platform, you
can see over here, it thought so based
on your input, first of all, we did not
give this elaborate input. We just gave two lines. We asked Air to
enhance the prompt. It enhanced it this way, okay? And then it thought for
8 seconds over here. You can go through the
thought process as well as to what it
thought over here. By clicking on this,
I'll just collapse this. Then it basically reiterated
over what it understood. So it reiterated
over this, okay? And it created a plan and
it published over here. And then it started
developing the application, and you can see the
response over here. Okay? So yeah, this is your first application
generated using AI. I hope this has been awesome and I hope you are able
to follow along.
4. Understanding the Interface and Features: Now it's time that
we would go through the interface and understand the different options
that we see over here. So here, on the left
hand side, of course, it's quite evident that you see the chat and whatever you
are adding over here, whatever iterations you do, whatever bolt is telling you, you see everything over here
and the entire progress. Now, immediately on
the right hand side. So this was the left
hand side, okay? And this is the right hand side. On the right hand side,
you're going to see the window where a
preview is enabled. And whatever is being
developed by EI, that is something that
you are seeing here in the window, life. Now if you want to
see the source code, you have this code button at the top that
you can click on, and clicking on this,
you will be taken to this source code
window where you can see the entire source
code of the application. Now, this is just
like the source code that you would see on
your local machine. Now, if you understand tech, you would understand
all the source code that is written over here. Okay? So if there is any need wherein you want to
access the source code, you can check the
source code over here. All right. So this
is about this. You can even go full screen like this by clicking on
this option over here. You can search for files
as well. All right. So this is about
the code window. Here you have access to
the terminal as well. So you can see over here, you have access to your terminal. So you can basically, if you want to build, deploy anything
manually, you can do all those stuffs from
the terminal as well. But we'll switch over
to preview Window. And here you have some options
on the right hand side, so you can see this open
preview in a separate tab. So you can click over here and it's going to ask you in
order to see your preview, you need to connect this
tab to the project, okay? So you can say connect
to the project, and it is going to
show you the preview of the entire project over here. Okay, so whatever you are seeing over there, you're going
to see it over here. You can see something like this. You keep on refreshing
the coat, like so. All right. So this
is the preview tab, and then you have
this responsive mode. So this is basically a
toggle that helps you switch between the mobile
view and the desktop view. So here you can see
this is on iPhone 16. So this is how it'll
look on iPhone 16. All right, iPhone 16, Pixel nine, Galaxy 24. Okay, you can zoom in
a pit if you wish to. So iPhone 16, I'll zoom in 200%. Okay. And this is
how you will see it on your phone,
like the iPhone. So I'll just switch back
to desktop over here. Here, you have the inspector. So you can click
over here and you can basically see over here. I've selected this
and you can see this has been selected over
here in the chat. Okay? And you can chat about
this element over here. That is something you can do. So I'll just clear this out. Okay. You can go full
screen with this as well. So these are a few options
that you should be aware of. At the top, you have
options to export. You can download the source code and open in stack plates. Okay? But if you want to do some local development,
you can download. There is an integration tab, so Bolt supports these
integrations right now. Stripe, super base, get up. You might see more
integrations down the line. They keep adding integration,
so you might see more. But as of now, as
I'm recording this, I'm seeing like
three integrations. All right? Now here on the left hand side, you
will see this option. So if you hold on this,
this will open up, right? So you have your chats. So this is the chat that we are doing today
or the chat application, sorry, not the chat application, but the code generator
application that we have built. There is an option
to get free tokens, so you can refer users
and earn tokens. This is an amazing
way to add tokens to your account without
upgrading to Pro, right? So you can check that out.
You have settings as well. So if you want to modify
any sort of settings, appear in settings, right
now, I'm on dark Mode. You can switch to light mode as well. Okay, you can do that. Editor related settings, team
related, you have tokens. So what all tokens you've used. All that information
will come over here, your plan information and
everything, basically, right? Now, coming to apps over here, you have so we saw that
integration tab, right? And here also, you'll see a similar list of applications that you
can connect over here. So you can connect
Netlife Net Life is basically allowing Net life is a server or a cloud based platform that can help you host your application
over the Internet. Super Base is a service that helps you host
a SQL database. And then you have Figma from where you can input the designs and the bolt will analyze those designs and
it will convert it to cool. And then you have
GitHub as well. If you want to take the backup of this source code or
store it on GitHub, you can do so by
connecting GitHub. First of all, what
is feature preview? Feature preview is a
option wherein you can see all the upcoming features to bolt. Okay, you can access. No, first feature
over here is DIFS. So what you can do is you can enable this DIF
approach over here. Using this DIF approach, it is going to edit the existing files rather than rewriting the entire
file for each change, which means it'll
be making use of less tokens if you enable
this mode over here. Okay? Now, this is only
available for paid plans, so I don't have this option
because I'm on free plan. Dynamic reason so if you want to increase
the reasoning ability, you can toggle this. Okay? Then you have access
to the knowledge base. So here, you can define any project specific
instructions or any sort of global instructions you
can define over here. And yeah, you have
backups and network. So these are some of these
settings that exist, and then you have
your subscription, like what sort of
subscription you are having. So I'm on free plan. Okay, if you upgrade
to something, you'll see your current
plan over here, and then you have an
option to sign out. Okay? So this is the
entire interface. At the top, you have the
name of the project, and this project is private. You can rename the project
if you wish to you can duplicate it and you can change
its visibility over here. So if I want to rename
this to something else, beautiful code
generator, or I can say random or I can
say inspirational. Code generator, I
can do that, right? So I hope this is making sense, and I hope you are
clear on the interface.
5. Building a Bit Complex Project - A To-Do List Application!: So now is the time that we begin working on our
second application, which is going to be a
little bit complex one, and this application is going to be the to
do list application. So it's a little bit complex than what we
already developed. Okay? This is going to have a
few moving parts over here. And I'm here on this main page. You can come on this main page by heading over to this URL bool dot Nu or you can go over here
and say, start a new chat. You say start a new chat,
you will by default be redirected to this
particular page over here. So you can see the previous chat histories over here
as well, right? So this is the first application
that we built. Okay. So over here, what we
are going to do is I'm going to add a prompt that
I have already written. So I'm telling
this app over here or Boltea here is create a
simple to do List application. App should have an input field for new task and
add Task button. Added task should be
displayed as list below. Okay? Now, this
particular thing is a description of what thoughts I have about the
application in my mind. And I'm just giving
these thoughts to the to bolt over here or to any sort of artificial
intelligence over here, right? Now, if I say go, okay, it will start working on this, but before doing
that, I'm going to enhance this prompt
a bit, right? So let us enhance this so that
we can get better result. So it's going to improvise and elaborate on what
all we need over here. If you want, you can
go through all this. So you can see user
interface elements. It is defining the
user interface. Add clearly visible add to Task button next to
the input field. Display list of tasks
below the input area. Functionality wise, it
is asking users to enter the task description
in the input field when Add task is clicked. Okay, each task, when
add task is clicked, it is added to the list. And then each task is being displayed as a
separate list item. Over here, don't allow
empty tasks to be added. So this is one sort of
validation that has been added. Clear the input after
adding the task. So you can see how it's
describing and how it has enhanced the prompt for us. Visual design wise, it has
added few pointers over here, and here you can see some
optional enhancements that it has mentioned
over here. All right. If you want to modify the
optional enhancement, you can do so over here, but I'm not going to do that. All right. Or we can
keep it focus over here. Focused. So let us or
we'll keep it this way. Let's see what is
the output we get. I'll say, go ahead.
Okay. So here I got a prompt as soon
as I said, go ahead. So it is telling me that hey, tell us a bit about yourself, and you'll be rewarded 1
million upon completion. So it seems like
there is some sort of I don't see this usually, but this is a sort of offer or some sort of research
work going on by the stool. So I can just give some
information about myself. I'm an educator. Here and I'm a freelancer solo or working
for a large enterprise. Whatever you are, you
can choose it over here, and I'm advanced level person. So I'll just say next, and I'm building
products for myself. I'll just say next.
Okay? And what are you looking to
achieve with bold? So launch app or website,
complete. All right. And once you do this,
1 million tokens will be added for free into your account. So that's awesome. Just tell some information about yourself and you
get something for free. Okay, coming back over here, you can see it is
creating initial files, so you can see all the
steps that it has added. And if you scroll
up, it has retreated on the requirements
that you've given, and it is creating
all the files. You can see all the files
being generated over here. If you go to app dot TSX, it is writing all the
code you can see. It's writing app dot TSX. Right? Now, if you
go to preview here, it has started the application, and it is telling I've created a comprehensive to
do flow application. So you can see the application
up here over here. And here you can see, it's a decent
looking application. To do flow, stay organized and productive with your
beautiful task manager. Good tagline. I would say,
what needs to be done? So it has a 500 character
limit, as you can see, and this limit should change and when you type
in, that's good. You have this plus button. No tasks yet, so you need
to add all the tasks. So I believe once
you add the task, the task would appear over here. Awesome. And here
you see some tips like press Enter to add
or Escape to clear. Awesome. Let us test this. I'm going to see
bring groceries. Like so, let me say Enter. All right. And I'm
getting this sort of a UI over here where
it's telling me bring groceries along with this
checkmark over here. And it's also giving
me the time and date as to when I
added this task, and it is categorizing this
as active task, insane. So it's telling me total
one task I have added, active is one and done is zero. Okay, I can say I need to
say make or go to the gym. Go to the gym,
something like this. And let me tick one
task over here. Oh, so you can see it has beautifully bifurcated the
active and completed tasks. Did we have this given somewhere in the list of
requirements over here, optional enhancements, o, Implement task categories
or priority levels. So this was there in the
optional enhancement. So you can see over here, it has completed all the optional
enhancement as well. It has added a checkbox next to task to make
market as complete. It has also included
the delete button. Has it included
the delete button? Yes, it has a delete button. Awesome. It has added basic animations when adding and removing task that is done, and it has implemented task categories or
priority levels. So these are nothing but task
categories, as you can see. And it is also showing me
the progress over here. Has the progress thing been
added over here, okay, I can't find it, but it
has added by itself, I believe, which is awesome. Okay? I don't think
the progress thing is added in the requirements. So this is insane, okay, just by giving it a few things, it has basically created an
entire app for ourselves. One tip I would like
to mention over here, when this prompt was
generated and you saw optional enhancement,
I did not remove it. I was about to remove it,
but I did not remove it. So if you're not
getting a good output, if you add enhanced a prompt and there were some optional
enhancements added, okay? And the response or
the output that you got was not desirable and
not something that you want. What you can do
is you can reduce the load over here
by getting rid of the optional enhancement and keep your task really,
really focused. If you do that, you can expect
better output from the AI. But here in my case, even
with optional enhancements, I could see like the
output is really great. I don't see any issues
over here, right? So the output is great, but this is just a tip that I
want to highlight. If you feel that the
output is not that great, then you can keep your prompt
really, really focused. You can keep your
input really, really focused on the core of the functionality that you're building and you
can see the output. Your output will
always be better. So we can try testing
this clear, completed. Okay? The completed
items were cleared. It works fine. I can get
this cleared as well. Okay, so this was
cleared as well. I can say good or study today. Presenter. Okay, active tasks. I don't think anything
else is left for testing. Okay? Testing. And I'll
see I'll get decided. Okay, it's working fine is
what I can see over here. Application is working fine. And if you want to add so in
the first version itself, I must say we have added
decent amount of features. For example, adding removing
task is what we've added. The functionality to strike out the task is
what we've added. Categorization is
what has been added. There is also a
dashboard over here, the Progress dashboard that is also added all in one prompt. So that's impressive. There is also a tip that has been added. Now, something that I can
add over here is a footer. So I can say, add a
professional footer at the bottom that
talks about company. So I can add that about company and it can mention
copyright information. Something like this. So I can give this
kind of prompt over here and you can modify this
based on your requirements. I'm not going to enhance
this prompt, right, because it's just a footer, and I'll just send this
or give this as an input. So let us see it's telling, it is adding the
professional footer over here and it is
creating this component. So you can see if
you click on this, it is creating this component.
It is writing this code. If you click on
this, you can see, it's completely
writing this code, and you can see it live. So once this is
written, it is going to update the app dot TSX. You can see the entire file
is being updated over here. So we'll wait until
this happens. So this is done. All right. And here you can see all the things that
were done over here. So it added company info, quick links, and email contact
and social media links. So let me scroll
down and see, Okay, company info over here is added and social media
links like this. So let me take this full screen. Oops, not this part. So I will better okay,
the preview is gone. So I'll just open
this in a new tab and I'll connect to
the project. Okay. And here. Alright, so this is how it looks or
it appears over here. So it is coming
vertically over here. It's coming vertically over
here because this space or the area or the size of
this window is very less. So that is why I opened it in a different tab to
get a feel of it. It's looking decent. You can iterate over here
it if you wish to. And here, what you can do is
you can try working on this, okay, you can see, im. Okay, so you can see
this is looking good. It's a decent application, I would say, right? And if you check the responsiveness
of this on iPhone 16. So let's check on
mobile devices. I'll get this to be 100%. So on mobile devices, okay, let me zoom out a bit. So if it's at 90%, you can see this is
how it looks like, right? It's decent enough. Okay. So the output
that we have got is quite decent enough
for Version 1.2, and I'm happy with this, right? Without writing a
single line of code, you can see the power of
AI tools like pooled. I hope this has been useful.
6. Iterative Development with Bolt.new: Now it's time that we start talking about
iterative development. So here we have
this version 1.2 or whatever version you call
this particular application. There will be situations wherein you want to improve
certain things, add new features, or
remove certain features. So that is something
that you can absolutely do over here with
the help of chat. Now, here, you can
see this plus button. Let's say I don't
like this plus button and I can tell the
AI model over here, so I can improve or enhance the plus button to say add text. Okay, something like this
and give it a better color. So I can say
something like this. I can enhance the prompt
over here to make it much more elaborate so that
I get better response. So you can see over here, it has elaborated this and
let me send this. Let's see what
happens. All right. The output will definitely
be the better one. So you can see it's updating this particular file over here. We'll wait for a while. So you can see the update is done. It has described the update, and here it has added
this ad text, right? And now if I say, go to the gym, you can see the button pops out. So it's definitely it's definitely an improvement
over what we had early on. Of course, we did not describe
a lot in the changes, but if you have any sort
of specific requirement or specific color
scheme to be used, you can definitely mention that over here when giving the input. All right? Now, any kind of
issues that you encounter, there will be scenarios wherein you also encounter issues. So for example, if I go over
here in the responsive mode, and if I go to iPhone 16
and if I zoom in a bit, you can see there is this text
overlap over here, right? So there is a text overlap in the input field if you
go into responsive mode. So what I will do is to
communicate this issue better, I will just take a screenshot of this and I'll paste
it over here. So you can just
take a screenshot, save it on your device, and just post it over here
using this upload option, or you can directly take this screenshot and
paste it over here. That is something
you can do as well. And you can see, uh, so I've described my issue. I've told it that hey, take a look at hint
in the output box. Sorry, hint in the input box. It's not readable in responsive mode and
works fine in desktop, but not on the mobile
devices like Iphone 16. So the more you can elaborate, the better output
you'll get, right? So I've elaborated well I feel, I'll just say send and let us see if it's able
to fix this for us. We'll wait for a while until it finishes processing for us. So you can see over here, it
has updated the application, and here it is given
the description of what update it has done. And now you can see this
text box is full width. Okay, so if you read what
changes it has done, it has added better spacing, touch friendly and
clear separation. So if you type in anything
here, this is better. Go to Team. You can see on mobile
devices, it'll looking cool. And if you add it, it'll look
good. No issues as such. So on mobile devices,
also, it's working fine. Let us check on desktop also. Nothing is broken, so nothing is broken.
It's looking good. So yes, the changes
have been good, and this is how you
can iterate on it. Now you can even now what we saw over here,
we fixed issues. We did some improvements. Now, if you want to add any
sort of features over here, you can add more features. So, for example, if I want
to edit the two do list, I can definitely
do that as well. So here I can say, please add functionality for me to edit
22 that have been added. Okay. And I can enhance this and let us see what
the enhancement looks like. So you can see, access it to ID or the unique
identifier as the input. Let users modify the two do title description and dueDate. So there's no due
date over here, neither description, and priority level is
also not there. So I'll just get rid of
this. Validate edited information before saving
and save it over here, confirmation message,
handle any errors, return the updated todo item
after editing is complete. Let us see if this goes well. So I've given this as the
input, let us wait for a while. So the updates have been done. You can see whatever has
been updated over here. It has added the Edit icon. There is a validation, save cancel buttons, and
visual feedback. Okay, so let us test this. So I'll just add a Tulu, go to three All right. Now let us come over here
and there is an edit icon. Awesome. I'll just
click on Edit. You can see you are
already in edit mode, go to the gym today and you
can see save over here. The moment you say Save, you can see todo read
it successfully. It's great. And you
can improve this. I can edit this again. You can see. This is decent. Now, if you don't want the
message to appear over here or message to
appear at the bottom, you can give all those sort of inputs over here and
you can get that fixed. But I'm fine with this.
This is looking awesome. And I feel it's good It's a good output that
we have got so far based on the inputs
that we have given. All right, so I hope you are
clear on the entire process. I hope you also understand how powerful
these tools can be.
7. Integrating Database into Bolt.new: So. Now it's time that we start talking about data
in our application. So this is the application
that we have built so far. It's open over here
in the new tab. It's also open over
here as a preview. But over here in
our application, we are generating data. Data, meaning there is
some user generated data like tasks, the
completed tasks. Data is being updated also, because once the data
is being generated, there is a provision in our application to allow
users to update the data, he can mark the data as complete or mark
the task as complete. So data is also being updated, created, deleted. All
of that is happening. As of now, this data is being stored locally in
our browser, right? And you can check
this out, okay? If you scroll up over here
right in the first prompt. This is the first
prompt that I had given to create the
Todo list application. And once we gave the prompt, you can see over here after understanding all the features, AI or bolt AI itself mentioned that it will be making use of
local storage persistence, which means all the
data, the Todo list, everything that you're
generating over here is being stored in the
browser itself. So if you do a refresh,
let us do a refresh. I'll have to connect
to the project. We're connected to the project, and you can see the data is
not persisting over here. Now, if I add some task, so let me first show you where
the data is being stored. So I'll show you a quick way how you can see
the data in Chrome window. So you have to right click
you have to go to inspect. So this might seem a little bit overwhelming to
non tech audience, but just hang in there. You
don't need to try this out. I'm just trying to
explain a concept. Here you have to click on arrows and here go to application. Now here in
application, you have all the storage information that is happening
in the browser. Click on local storage
and select your URL. So this is your application
URL, select this. Now here, you will see
all the information about all the information that is being stored for this
application in the browser. Now, this is not
visible clearly, so I'm going to click on this and I'm going to
take this to the bottom. So this is much better now. So you can see over
here. Okay, and I will close this.
I'll also close this. I'll also get rid of
the console from here. Okay, so this is fair enough. Now you can see the
todos over here. So if you expand this a bit, you can see todos
that are empty. Right? So you can
see this is how Todos are being managed
in our application. It's being stored in browser. Now if I try to add any todo, I say, go to Jim, if I say Enter, you can see, there is a unique ID over here. The text is go to Jim. Is it marked as completed? No, so that is marked as
false over here. You can see. So it's pretty clear that this is how data is being
managed in our application. So I've just zoomed out
so that you can see this well and let me expand this
so you can see over here. Completed, created
at, ID and text. All of this is there over here. Now, the moment I
mark it as complete, so if I mark it as complete, you will see this updated that
completed is set to true. Now, this is not the idle way in which production grade
applications manage data. You cannot manage data
in the browser, right? What if tomorrow,
let's say you close this session and you try to access this application
from your mobile phone. The data is siding
in the browser, so this data won't show up in the mobile browser. Now,
how do you fix this? So to fix this, production grade
applications make use of a database that is hosted
somewhere in the cloud. Now for this over here, if you come, here we have
this integration tab, and there is an integration that bolt allows us to
do with Super Base. So Super Base, we can make use of Super Base database
within our application, and we can get it
configured over here. Now the question is,
what is Superbase? So what I would recommend
is you head over to your favorite search engine
and search for Super Base, or you can directly
go to superbs.com. So if you open this
tab over here, you can see this is the
official website of Super Base, and Super Base is the PoscRs development
platform. What is PoscRs? PosgRs is a database vendor. All right, there are
multiple database vendors that are available
in the market, like Pascris SQL, then you
have MySQL, you have SQLLit. So Posgris is one of
the database vendors. So Superbs makes use of Poscris and it is
hosted in the Cloud, and you can start your project
with Poscris database, authentication, Instant
APIs, H function, all of this it offers. Now, the best part over
here so you can scroll down and explore all
the features, right? I hope you're clear as
to what Super Bse is. It is going to allow us
to store our database. Into the Cloud, which
is hosted, okay? And this database will
be a remote database. It will persist star data. So tomorrow if you add a todo
over here in this browser, and if you try to access the same application
from your mobile phone, the data that you
have added will be shown provided it's
linked to your account. Okay? So I hope this
is making sense. And as of now, what is happening is we
are storing it locally, like I've demonstrated
this to you. If you're not able
to get this in your machine or if you're using some other
browser, don't stress. This was just my
way of showing you how the data is being
stored locally. So I wanted to
prove and show you how data is being stored
in the browser itself. So this is what is being used
over here. So this is done. I'll just close this tab. It might look overwhelming
if you're a non coder. So coming over here, we are
going to integrate Super Bs into our application and all the data that is being
stored, all the todos, all is being stored all
will be stored into a cloud database that will be created for us and it won't
be stored in the browser. Now for doing this, we'll have
to talk to bolt and here, I'm going to say persist all the data in our
application into a database, and I'm going to
enhance this prompt. So it is going to elaborate this requirement
and make it better. So you can see over
here, identifies and maps all the data, implements appropriate database tables with relationships, use best practices,
include all of this. The solution should be scalable and all of this.
It has elaborated. Your elaboration might
differ from that of mine, but I'm just going to send this. I'm not going to modify this and let us see how this works. Now the thing over
here is we have not integrated a super Base
yet into our account. Neither we have an account that we have created
with Super Base. So let us see how
this process works if you are a new user
with Super Base. I don't have an
account right now, and I'll take you
through. So let us see. So here, what it's
doing is it is creating a migration script under
the migration folder, superbs Migrations, and it has named this
file, something like this. I'll wait for a while until all of these steps are completed. So after a while, it
created quite a few files. It took some time, and it created these many files
that run certain commands, and it started the application. But on the right hand
side, I'm seeing some error, which is fine. Now here, if you scroll down, it is telling me it is prompting me for a Superbase connection. So it's prompting me and what I will do is need a new Superbase
connection. Yes, I need. So what I will do is,
I'll come over here, I'll say at data Bese. So I'll click on this
option over here and I'll be immediately taken to this website called subbase.com, the website which we just saw. Now here, if you have an
account, you can sign in. If you don't have an
account, you can sign up. You won't be charged anything. You don't need any sort or you don't need to spend any sort of
money is what I mean. If we go to pricing, they
have a generous free tier, which should be enough for us to launch and validate
our ideas, right? So this is a free plan. That
is what we'll be using. And what I will do is I'll
enter my information, everything over here, and
I'll get the account created. After you enter the
email and password, you will be asked for
email verification. So do that verification,
and I'll see you there. Now when I clicked on the confirmation link within
the confirmation email, I was asked for authorizing
the API access for bolt. So bolt here is trying to
connect to my Superbse account, and it is asking for
all these permissions. I'm just going to say
create an organization. So I'll just go ahead
with the permissions. And for that, we'll
create an organization. Now you can enter the
organization name over here. Okay, so I'll say
FaslsOg over here. You can enter whatever
name you want, select the type, the plan. We are on free plan. We don't
need to spend anything. I'll say create organization. And we'll wait for a while. So it's asking for this again, and I'll say authorize. So it's connecting
to bolt and you can see the connection has
been established successfully. Now, if you come over here,
it has shown me a pop up, and it is telling that
you need to select your Super Bs Data Bs
or Super Bees project. So SuperbsPject
is supposed to be connected or created, basically,
if you don't have it. So I'll just create it because I don't have any project yet. So I'll say my project name is to do app, something like that. You can enter the password. I'll just enter or generate
some sort of password. Okay. So make sure that your password is strong
enough over here, and here you can see the generate
password option as well. So I've just clicked on this. Okay? So the moment
you click on this, it is going to generate
a database password for you and you can
select the region. I'll just keep it default and you can see
create a project. Now, the project will be
created automatically, and we did not have we did not take a lot
of efforts over here. So you can see over here,
the integration is done. You can see this is
installed Supervase. And here you can see, it's
connected to the database. It's connected to Superbase, it's connected to project, it's set up authentication. It has created database
and finalized this setup. All of this is
done, and now it is asking me to create
the database schema, so I'll say apply
and let us wait. So it is applying the applying the database
migration, okay, the database migration has
not been applied correctly, and here it has also
shown me this pop up. So it has identified some issue and it is giving me this
option to attempt to fix. So I'm, of course, going
to say attempt to fix, and I'm going to let it fix. And we'll also come
to this error on the right hand side,
but just hang in there. So it's fixing this. It's doing it by itself. We'll wait for a while until
these fixes are applied. So it did apply a few
changes over here, and my application is reloaded. I don't see the
application working yet. I still see an error, but it's asking me to complete
the migration, so I'm going to say apply, and it's showing me some
problems over here, so I'm going to
attempt it to fix. So it has identified
the problem that I was seeing on the right hand side
and it is trying to fix it. So you can see all these
errors that it is showing me. So this was the error that we
were seeing in the browser. So once the previous
issue was fixed, okay, the previous fix was clicked
over here as attempt fix. I'm again seeing another issue, so I'm again clicking
this attempt fix. So let's see how many iterations are there for resolving
all the issues. What is happening
over here is it is detecting the issues itself, and it is prompting me to fix. So I'm just going to do that and iterate over it to get
the final product. So after a couple of iterations and clicking attempt
Fix a couple of times, I could see the issue on
the right hand side fixed, and now I'm seeing this another issue, which
is this problem. So I'm just going
to say attempt fix. So now all the issues
have been fixed. I got a few pop ups over
here asking me that hey, this issue is identified
and fixed fixed issue. So I did it a few times, and now all the identified issues, so
you can see over here. All these issues have
been fixed already, if you take a look at the chat. Okay? And we see
this sign in page. All right. So we did not ask
Bowl to add authentication. But since you're
adding database, it has added
authentication by itself. Also if you scroll up the
chats and see from the point where you asked it to add the database
into the application, you would realize that
there was a mentioned, like Bolt mentioned
that it is adding authentication as well because, you know, here is all the functionality
that is being added. User session management,
password research. And this is being added by Bolt itself without us telling
because we're adding database, and every todo
should be associated with the user at the
end of the day, right? Because you want to
manage the session. So if you're logging
in from Browser you should see your
todos in the browser, and if you're login
from your phone, you should see your
todos over there. And this can only be done if your todos are associated
with an account. All right. So this has been
taken care by bolt itself. Now, what I'm going to do is I'm going to take a
look at the speech. I don't have an
account yet. So what I will do is I'll say
sign up over here, and I'll enter my
email over here. I'll enter the password as well. Okay. And I'll say
sign up at 123, and I'll just say
create an account. So the account is created, and I came back to the sign in page, and
in the sign in page, I've entered my email
and the password, and I'm going to see
sign in over here. All right. So the
sign in is done. Now, this email
that I'm using is a dummy email and not my
actual email over here. Okay? I've just created this for the purpose
of this course. So here, I have signed up
with this dummy email, and now you can see over here, this is our main application
page that you see, right? And if you come to
Super Base now, let us see if our
account information is being stored in
Super Base account. So here, I'm going to go to the sidebar and
here in database. Let us go to database. So under database, if you go to tables. Okay, so you can see over
your schema visualizer, which is going to give
you a visualization on what all schemas exist. So here you can see
user preferences wherein you have
user ID and all. This is storing the
user preference. Then you have to do tags, then you have to do, and
then to do categories. So all this information is
being stored in the database. If you go to tables, you're going to see the
tables over here. You can see all these tables. Now, where is the user table? So user table you won't find
over here under database. You have to go to
authentication. So under authentication,
you'll see this table. You'll see the users over
here on the left hand side. On the right hand
side, you can see the users that are being
created in your application. So this is one user, which is a user using which
I just signed up, and you can see this
has just been created. This is my user ID, right? So you are seeing some
information over here. Now, let's go to database.
Let's go to tables. And here you are seeing quite
a few tables over here. Okay. And if you
go to todos, okay? So if you go to view
in table Editor, so let us go to table Editor. So here you can see
now all the data that resides within
these tables. Okay? This is there
in table Editor. Now, let us add a
tu do and let us see if the Todo is
being added over here. So I'll come over
here. And here, I'm going to say,
let's say, go to him. Something like that.
You can add any todo. I'll say Enter. Okay, so we
are seeing Todo being added. And if you come
over here, Alright, we don't see any activity yet. Do we have a way to
refresh over here? So I see the Todo uppear. I just clicked on this todo, and it just reloaded
the data over here. You can see. Go to
gym as appeared. So you have to come over here. We'll add one more
todo. I'll say go to Market,
something like this. Come over here. You won't see Gudo maketUeO here.
Click on Todos. Okay, or switch like this. Okay, I don't see
the data up here. It's taking maybe a
while to load the data, or let me refresh over here. Okay, so I should
see Goodomrket, so you will have to
do a full refresh if the data does not
appear over here. So yeah, this is
coming in over here, and you can see it's
linked to my user ID. This is the Todo ID. It's all being stored
in the database, right, createdd upgraded ad, all the information
is being stored and completed is marked as false.
So it's not complete yet. And if you complete
any of the Too, for example, if I complete
GoodoGym over here. So that is completed task. And if you come over here
and if I refresh this, so I'm going to see that
GoodoGym is completed, marked as true. You can see. So it's being updated in
the database as well, and database has been added. All right. And you can see the effort that we took
right now to add database. This database
exists in the Cloud in the Cloud meaning
over the Internet. It's not locally on our system. It's there in the Internet. And if you deploy your application over
the Internet tomorrow, this database would be
your production database. Okay? So I hope this
is making sense and I hope you're able to follow along as to
what all we have done. Now, any sort of iteration or anything you want
to do over here, you can absolutely tell
Bol to do over here. But this has been
amazing so far, and you also get a
Sinnot button over here. You can see your sign information
with a Sinnot button. Let me open this
in a separate tab over here. I'll
connect the project. And you can see
how this appears. Okay, so I just have to
sign in again, okay? Okay, so you can see over here
or you can see over here. All right, so it's telling
me migrate your todos. We have found your
to do saved locally. Would you like to migrate
them to the account? Okay, so migrate migration is also a functionality that
has been added over here. So if the user did
not have the account, then it would allow
user to migrate. So basically, once you
update the application, if this application
was deployed, you can just click Migrate and all the todos would be
added to the account. So let us see. All
right, good gym. So probably earlier,
I had added GoTo Jim. So that is why it's
being added twice. And let me delete this, so
I'll delete this one GoTo Jim. Okay. So you can see
it's all working fine. So I hope you have been
able to follow along, and I hope you have found
this to be super useful.
8. Deploying Your App to Production: We have made a decent
progress in our application, and what now we would
want to do is we want to deploy this application
over the Internet, and I would want to let's say I would want to share
this application, the URL with all my friends. But can I share the URL and
everything with my users, friends, or whoever
I want to share it? Can anyone over the Internet come and access
this application? The answer is no. It is residing in your
account over here, and this is not a public URL. So here, if I copy this URL, this is our application URL. And if I open a new incognito mode or a guest browser session,
let us try to access this. So you would see it
is asking me that, hey, in order to
see your preview, you need to connect this
tab to its project, which means you need to be authenticated and login
to your bold new account. So if I say connect the project, you will see it could not find the project. So we
need to log in. So my friends are
not going to have or my users or anyone over the Internet is not going to
have access to my account. I'm not going to share
credentials with everyone, right? So how do we solve this? So the answer to this is, we will have to deploy
this application publicly or I should
not say publicly. We have to deploy this
application over the Internet. We have to make use of
a hosting provider. So I'm going to tell
Bolt New to do this. So I'm going to say over here, deploy this application for me. You can just enter this prompt. I've just told this to deploy. Clean deploy instructions.
Let us see what it does. All right, I've not
enhanced this prompt. Let us see what is the
output that it gives me. I'll tell you, bold
makes use of Netify. So you can see, I'll deploy your application to Netlify
for you. Now what is Netlify? I'll just select this. I'll just search Netlify over
here. What is Net leaf? If you go to Netefy I'll just
give you an introduction. It allows you to host
your web applications, and it is very simple. It's a very easy to use platform is what I
should say, over here. And you can see there
are so many deployments that have been done,
35 million plus. It's being used by 7
million developers. So it's definitely one of the popular solutions out there, and you don't need
to pay for this. It gives you a generous
plan for free. So here you can see
there is a decent Like I have quite a few
I use Netliee a lot, and I have quite a few websites
hostit there for free. If you're bulling
something over here, you can make use of Netlifee for free. You don't
need to pay anything. You can pay only once you scale and you need pro features. So we'll need Netlify over here. You can see here
it's prompting us to deploy our
application to Netlife. So if you scroll down over here, you can see I'm
building and deploying. So it ran a few
commands over here. It built our website using
some commands, and it said, I'm building and deploying
your application to Netlify, and this will create a
production ready version of your beautiful to do application with all the features
and everything. The site has been
successfully deployed. So it has already deployed the site over here on this URL. So let me access this URL. Yes, it has been deployed. You can see over here,
this is a public URL. So if you try to open
this application here in another tab, you're
going to see this. So this is a public URL. It's a Netlify URL. And let me tell you
something we don't have a domain name
mapped over here. Right? We don't have a
domain name mapped over here because we have
not done that, right? So this is a public URL, which is provided to us by Ntlefy and with the help of
bolt, we've got this URL. ND is deployed this
application to Netlify, and it is telling us to transfer this Netlify project
to your own account. You can use this URL to claim
claim this application. So I'll click on
this URL over here, and it's going to
take me to this. So this application
is deployed, it said, and you need to claim
this application to get it moved to
your account, right? So if you click on
the claim button, like the claim URL over here, which Bolt has provided. You'll be shown this login page because you need to
authenticate over here. Now, if you don't
have an account with Netlify, that's absolutely okay. You can click on the sign up and get your account created. But I do have an
account over here. I'm a Netlify user, so I'm
just going to sign in. If you don't have an account,
feel free to sign up. Sign up process is very easy and it won't cost you anything. So you can see over here, I have logged in to my Netlify account. If you've signed
up, you will see something like this over here, claim your bold apps on Netlify or if you get lost over here
after the sign up process, what you can do is you can
click on this URL again. Right? So I see this claim Maps, and I'm going to see
claymps over here. So it's saying claiming
apps and the app has been claimed and transferred to my account over
here. You can see. It is deployed from
bolt over here, and this is a time
when it was published, and from here, you can
even open this in pooled. So you can see the kind of integration that
they are having with Netefy and this is the
URL that you have caught. And if you want to
map any domain, let's say I bought a domain, todo list dot app, for example, or todo app.com. This is a
domain that I've bought. You can go to Domain Management. And you can add the
domain over here, and you will have to read
up the docs over here, how you can add a custom
or your own domain. Custom domain meaning you
can add your own domain, your application,
you'll have to go through this steps if
you click on this. We'll give you the steps,
and you can follow the steps and get your
domain added over here. Okay? So that's what it is, and you are getting
this over here. So if you try to
access it over here, you can see it is going to work. If I open this in a
different tab over here, you can see it is
working over here, let me login using the account that I have
created over here. Something like
this, you can see, I've logged in and I can see
my todos over here as well. This was a new browser section, if you remember, I've
opened this in guess mode. I authenticated
using my account and the todos that I had added
along with the streets. Everything is being
saved in the browser, or sorry, not in the browser, but in the application,
using the database. And wherever I log in, I'm
going to see the same thing. Even if I login from
my mobile phone using this URL, it is
going to work for me. So our application
is now available in production is what I
mean to say over here. And special tanks
to bold, right? Bold has run the job so easy. So here you can
see, these are all the integrations as
well that you can do. So I don't see
Netlify over here, but we did not actually connect bolt account with Netlify, but we've got it
deployed to Netlify, and we claimed the project over here. That is what we did. I hope this has been useful
and I hope you have been able to understand the power of AI
and how tools like PLT can, you know, make your life so much easy and
how you can test your ideas or do a lot of
stuff with all this knowledge. I hope this has been useful.
9. Course Conclusion: And now we have reached
the conclusion of our journey where
we have learned how we can build production grade applications
with the help of artificial intelligence and
tools like bolt dot Nu. Throughout this journey,
we have explored how these tools
empower you to build real production
ready applications without writing in a
single line of code. We began by understanding
what bool dot new is and familiarized ourselves with its intuitive interface
and features. From there, you built your very first AI
generated application, experiencing firsthand how simple prom driven
development can be. We then leveled up to create
a to do list application wherein we started diving into iterative
development with AI, learning how to refine and expand your projects
in just minutes. Next, you saw how you can
integrate database into your application and you
unlocked data storage and retrieval with this. You also learned how you can deploy your
application to production, and this has enabled your application to be accessible across
over the Internet. And if you have any sort of ideas that you wish
to take to the world, this is the best
way wherein you can build your application
prototype and get it deployed along with a
full fledged database and share it with
the entire world. Remember, one thing, this
is just the beginning bolt dot new and AI
driven development are evolving every day, and there's more to explore. I encourage you to continue experimenting with the
application concepts, new product ideas,
refining your workflow, and sharing your
creations with the world. Thank you for joining me on this no code, AI
powered journey. I hope this course has inspired you and made you confident
to keep building, iterating and launching
innovative application ideas more faster and consistently
than ever before. With this class,
you will also find a class project in
the project section. You can go and check it out, and I would highly
encourage you all to finish the project and share it
with the entire class. Until then, happy Building and I can't wait to see
what you create next.
Faisal Memon, Product | Engineer | Entrepreneur
