Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build and Deploy a Landing Page Using Bolt!
You have completed Build and Deploy a Landing Page Using Bolt!
Preview
This workshop introduces Bolt.new, an AI-powered platform that helps you build web apps using natural language prompts. In this session, we'll build a landing page from scratch, integrate a waitlist, and deploy it—all without writing traditional code. It’s a practical, hands-on experience for anyone looking to prototype quickly and start growing an audience right away.
This is part of the AI for Everyone: Build Power Apps Without Coding track. Check out the track to see the rest of our No-Code content. Stay tuned—new content is continually being added, so be sure to check back regularly for updates!
Tools used in this video:
Documentation:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey everyone, welcome back.
0:10
It's Dan and Christian here again,
0:11
and today we're going to be building
a landing page from scratch.
0:13
Hey everyone, yep, as Dan said, we
are building a landing page from scratch.
0:16
For what landing page we're building,
we have yet to decide,
0:19
but you can hear us
talk about it, and let's get started.
0:23
You know,
I think there's a lot of other tutorials
0:26
kind of just going over
the same type of to-do list apps or a CRM.
0:29
Let's do something that someone who's on
0:35
this journey of building a MVP,
that's a product.
0:38
So why don't we do a fake product
landing page kind of featuring
0:42
what the product is,
what the features of the product can do
0:47
and how to,
I guess, sign up for news for it.
0:53
I don't know. That's just an idea.
0:57
OK, awesome.
0:59
That's great.
That's a great starting point.
0:59
So we'll do a fake
product or mock up product.
1:01
You have an idea for a product? Hmm.
1:05
I know just from the past few days
1:08
on the socials,
there's been a lot of buzz on,
1:13
let's say you're building a product.
1:18
And when I'm saying product,
it could be any product, such as software
1:22
as a service or an actual physical product
or a subscription-based product.
1:27
I've been seeing a lot of kind of TikToks
and Twitter
1:32
threads about kind of like
1:36
AI academies for kids.
1:39
Okay.
1:42
Okay. Very interesting. Okay. Yeah.
1:43
That's just an idea for a product.
1:46
Yeah, we can work.
1:49
We can work with it. Totally.
1:50
We'll hop into Bolt here
and for the uninitiated, we're at Bolt.new
1:52
Bolt is another,
you know, AI agent Another builder.
1:56
It's, you know, very similar to lovable
replant, but very much so lovable.
2:01
It has the same super base integrations
and a few other features.
2:06
But if you use lovable
or watched our other content on lovable,
2:11
you'll feel pretty
right at home here on vault.
2:14
And we'll just jump right in.
2:18
I'm just going to do a voice
to text prompt here.
2:24
And I'm going to say, can you help us
build a landing page for our AI product?
2:27
It's an AI learning platform for kids.
2:33
We just want to be able to showcase
2:37
the main features of the product,
some benefits of using the product,
2:39
who the product is for,
and an email sign up form
2:43
so people can stay up to date
about the latest updates with our app.
2:47
I'll just delete that.
2:52
and we'll go ahead and give her a shot.
2:55
So I kind of want to highlight
what Dan, when he was typing that prompt,
2:58
there are very specific things
that he said he wanted the
3:03
AI tool to do. And this is very good
3:08
kind of
3:12
advice when you're kind of what we call
vibe coding.
3:12
this is what you really want to do is
3:16
prompt the ai to understand
what you're building context is important
3:20
who it's for what you want the
3:25
the website
to look what components to have
3:28
so you heard dan
say we want a email sign up we want a
3:32
what the product is for
who it's for what features do we have
3:37
those are all things that you should be
talking about and if you don't know
3:41
I think we have suggested
3:45
that you should talk to chat GBT or Claude
about how to ideate on this idea
3:48
on whatever your idea is
and then from there write a prompt
3:54
absolutely and I'll just hide
3:59
the chat window for a second
because we have a preview ready oh
4:02
that opened the code structure
4:08
where do I see the preview
oh there it is minimize it.
4:09
I thought that would make it bigger
and I'm
4:14
actually just going to open a new window.
4:16
Okay,
so we have our hero section at the top.
4:19
Has our headline,
making AI learning fun and safe for kids.
4:22
Start learning or watch demo.
4:26
Also has a call to action
get started at the top.
4:30
All of those are pretty good.
4:33
Also, it generated a logo
4:36
for us, a little vector icon of a brain.
4:38
not a bad logo
so why choose kids AI learn
4:42
interactive learning safe environment
real-time progress
4:47
those are awesome
4:51
and it even
4:54
added some pictures stock images
4:56
not kids but it works
5:00
yeah yes that's something
we can ask it to fix
5:02
definitely and
this is I think the benefits so transform
5:06
your child's learning journey,
personalized learning paths
5:09
tailored to each child, fun gamified
lessons.
5:12
Okay, this is just the features.
5:14
Regular assessments
to track progress, safe and monitored
5:16
AI interactions,
and expert design curriculum.
5:19
Pretty good.
5:23
I mean, that sounds great.
5:23
As a parent, that sounds great.
5:25
Absolutely.
5:27
It's pretty much what we want.
5:28
Okay, this is pretty simple, pretty,
5:30
you know,
definitely good enough to get started to
5:33
hook up this email form at the bottom.
5:37
We'll probably have to connect Superbase,
so we'll do that here shortly.
5:40
But we'll definitely change this photo out
5:44
and get something better for that.
5:48
See anything else we may need?
5:52
How about we add, after
5:55
we connect the backend database,
how about we add
5:58
another page about a mock-up of About Us
and our mission statement?
6:02
Awesome, yeah, that's a great idea
Okay, so let's
6:09
head right back to Bolt
Take this back to the top
6:11
Okay, and first
6:16
We'll go ahead and I'm going to ask you
6:19
to swap out that picture
6:21
In the Transform
Your Child's Learning Journey section
6:25
There's an image And I'm assuming it's
a stock image from somewhere Unsplash
6:29
The image is of adults
6:34
Can we make it of kids learning?
6:37
Unsplash is a stock
6:41
photography website
that offers free images.
6:44
I knew that,
so I knew to reference them specifically.
6:47
But you don't have to do that.
6:50
You can simply say the stock images
you provided don't work.
6:52
Can you please try a different stock image
that has X type of person,
6:56
X image, etc.?
7:01
Does Bolt.new
have the same feature as Loveable
7:05
where you can click
on the components to edit?
7:09
I think it does.
7:13
Let me see here. Yep, inspector.
7:14
Yep, we should be able to Oh.
7:19
But if I'm not mistaken
7:24
from what I'm understanding here
7:25
Let me see just to make sure.
7:30
Yeah.
7:32
We'll do
one last selection of the button.
7:33
Yeah.
7:37
OK, so the difference here is lovable
allowed us
7:38
to select items and then edit them here.
7:41
Bolt only allows you to select the item
and then prompt about it.
7:45
So it knows specifically
what you're prompting,
7:49
but you can't edit the text, for example.
7:52
Gotcha.
7:56
Let's check on our image here.
7:58
and real quick
just because this is a smaller window
8:02
we can see that the sites are responsive
8:05
so it changed the layout for us
8:09
that is a kid learning
8:13
it is it is very interesting
very good picture it's definitely comical
8:15
so cool
8:21
we're good to go there all right
8:22
I think the next step
8:26
would be adding the super base database.
8:27
Yep. I agree.
8:30
Now I'm not entirely sure if you can ask
8:31
bolt to set it up the similar way
that you came with lovable.
8:35
So I'm just going to click the connection
button up here at the top and see what
8:38
it prompts us to do.
8:42
Okay.
8:50
No problem.
8:51
It just says I've reached my limit on
super base because I'm on the free plan,
8:52
but I can go over the super base.
8:56
And I should be able to pause
some of my other projects.
9:00
Okay, we're back here on the Superbase
projects homepage.
9:03
I see I have these two active projects
open.
9:07
I'm just going to click simple CRM.
9:10
And if I go down here to this cog,
it'll open up this project settings tab.
9:12
I can click on that.
9:16
And pause project is right here.
9:17
So I can just click to pause the project.
9:20
And then we just give it a few moments.
9:26
similar to running up
and starting a new project.
9:28
It takes a few minutes to get it going.
9:31
I'm assuming it just takes a few seconds
or a few minutes to actually shut it down
9:33
as well.
9:37
Okay, excellent.
9:57
Now we get this message.
9:58
It says the project simple CRM
is currently paused.
9:59
It says the project can be restored,
10:03
you know, as long as we do it
within the next 90 days.
10:05
If it stays paused longer than that,
it'll be deleted.
10:07
So no problem.
10:13
Sounds good.
10:15
I'll just go back to our homepage
10:17
and close out one more project.
10:20
even though I think we should get two projects, but just to be on the safe side.
10:24
So both of our
10:33
projects have now been paused.
10:34
We should be able
to go back to the homepage.
10:37
Project is paused, paused, paused.
10:39
Yep, everything I have is paused.
10:42
So let's go back to Bolt, exit out,
10:44
and let's try this again.
10:48
Okay, awesome.
10:51
and we're allowed
to connect a new project.
10:52
And if you haven't already created
the new project at Superbase,
10:56
you know, superbase.com, you can do that
here at create a new project.
10:59
And we'll just name this kids AI.
11:06
We'll ask it to generate a password.
11:12
And we will create a new project.
11:16
And similar to whether you do this
11:21
Natively in Superbase
or in Lovable Or here in Bolt,
11:23
this does take a few seconds to start up
11:26
That's completely normal
So just give it a second
11:29
As it
says here, it can take up to 5 minutes
11:34
So it says it's all connected
I think on the Superbase end
11:37
It may be taking a few more moments
to spin up
11:42
So while it does that
11:46
let's create that about page.
11:49
Guide me with a prompt, Christian,
and then I'll type it out for us.
11:51
Yeah.
11:55
You can say,
can you create a separate page
11:56
called about us?
12:01
Where it has a short
12:11
blurb on
12:14
kids AI learn.
12:16
And also a segment
12:18
or hero section
12:22
for our mission statement.
12:28
Perfect.
12:34
That's it. Cool.
12:34
Sounds good.
12:35
Then we'll go ahead and submit this.
12:36
And you'll notice
that I said the word hero section.
12:40
If you are unfamiliar with that term,
12:43
it's basically a big section
on that new page
12:47
that will just be dedicated
to the mission statement.
12:51
When we call it the hero,
it is the spotlight
12:55
in which the person who's viewing
your website will see right away.
12:59
Yes, that above the
13:04
fold is what they call in web design
terms, it's that above the fold section.
13:06
So the first thing you see on your main
screen,
13:10
that's the hero section
or what's known as above the fold.
13:13
Everything underneath
that is below the fold.
13:17
I didn't know that.
13:21
So I learned something new. Hmm.
13:22
It said it had an issue.
13:26
Interesting.
13:30
But it's still spinning
it's trying to do something.
13:31
I see where it started here
13:38
We'll just hit retry
13:43
Okay awesome
13:50
It just restarting the code Okay awesome
It just restarting the code
13:51
It's still so wild to me
how fast it spits out the code.
14:05
Absolutely.
14:11
Now, one thing I'm curious about, I kind
of just picked up on the corner of my eye.
14:12
it reproduced
the entire code for the homepage
14:17
before jumping into producing the code
for the about page.
14:21
So I'm curious
if it edited anything on our homepage.
14:25
Do you think it might have edited
14:30
the nav bar kind of addition?
14:33
That could, I think you're right.
14:36
Cause that's right there.
14:39
I just do a double check.
14:40
It broke our image though.
14:42
But other than that we look good
14:46
So let's just go to about us
14:47
Our myth There you go
14:51
Our values, our vision Our impact
14:54
Who we are
14:58
That is pretty Impressive who we are
15:00
We'll go to this Full tab view
15:04
and we'll check it out again Here
15:06
I That the mission and the Values, vision,
15:11
and impact are all right
there on that hero section you requested.
15:14
you don't have to go below the fold
to get any of that information.
15:18
But it does have the who we are section.
15:23
Do you think if someone who's
never kind of
15:26
built a product landing page or
15:29
any product,
the way it's displayed about our mission,
15:33
our values, our vision, our impact,
Do you think from a designer
15:36
point of view, is that a good thing
to consider moving forward
15:39
for someone who's never done this before?
15:43
To always have that for now, at least?
15:45
Do you mean?
15:50
In terms
15:52
of having a dedicated page
15:54
that talks just about this,
who we are, our values, etc.
15:57
Is that something
that should be at the forefront
16:02
when someone is building something
or should be added later?
16:05
I think, you know, most mainly
16:11
most of these design decisions
16:13
and all these projects we're working on
and that the users at home are working on.
16:16
It all kind of depends on.
16:20
Your preferences and what
16:23
you're building
now, Now, our mission for the About page
16:25
with our values, our vision, our impact,
that's incredible and great to have.
16:29
And I think for something Kids
AI Learn, it's critical.
16:34
, I think we would be doing ourselves
a disservice
16:38
not having this information on the page.
16:40
Whereas if it was, you know,
16:43
a more simpler product or something fun, ,
you know, chocolate bars, for instance,
16:47
you may not have to start out with that
or you may not need that initially.
16:52
but every brand in every business
eventually
16:56
should kind of get to that point
to where they're adding an about us
16:59
so they can
17:03
learn more about your business, more
about your company, more about you even.
17:03
And, you know,
17:07
definitely more about your mission and
your impact and what you're trying to do,
17:08
not only with your business
and your product and your project overall,
17:12
but just your overall vision
so the community
17:16
can have that context as well,
your audience can have that context.
17:20
so in a way it's kind of I think
17:24
what this conversation is alluding to
is the idea
17:28
of a brand image right?
17:31
Right absolutely it helps explain
17:34
the personality
the about the why of your brand
17:38
it gives you more context
than just that simple surface
17:42
level of the branding
17:45
and I'm just going to go back down here
and yep that image is broke
17:49
so we'll just tell it to fix that
real fast
17:52
and the image in the transform
your child's learning journey
18:01
section is broken
it's no longer showing that image
18:13
can you fix the link please
18:16
now not that
18:27
it makes a huge difference in
you know what we're building
18:28
since this is hypothetical
18:31
but i'm curious to see
if it's going to be the same image
18:32
or if it just kind of
randomly finds another image
18:35
if it's the same image great
18:40
if it finds
another kind of spontaneous one
18:42
that would be hilarious
18:47
That's a completely different
18:52
one Completely different image
and not what we want at
18:53
all So alright, both,
this is not what we requested
18:57
We needed an image from Unsplash
that has to do with children
19:00
Learning AI or learning technology
or just children learning in general
19:05
Think school settings, home settings
where people are learning
19:09
Or where children are learning,
but this is an image of a phone
19:13
not what we wanted
19:17
I thought I said boat instead of bolt
but no worries
19:24
it will understand hopefully
19:29
we'll get the image of a boat
19:33
on the on the water
19:34
but we shall see
19:38
now if you are you know
19:40
doing this for a while
you and you know a bit of HTML or CSS
19:42
you don't have to waste a prompt
in changing your image.
19:46
You can probably go
to the actual line of code
19:50
where the image is usually stored
and just upload your own.
19:53
Okay.
20:01
It doesn't actually have kids,
but it kind of works in that realm.
20:02
It gives you, you know, there's books
and blocks and it seems it's for kids.
20:06
We'll use it for now.
20:11
It's a good staged classroom.
20:13
Yeah.
20:16
Excellent.
20:18
Then just to go back to Bolt
and just to, you know, reiterate
20:19
what Christian was saying,
you would just hit this code tab up here.
20:24
And then if you're comfortable
editing your code,
20:28
you could just go through
and make changes.
20:30
And if we go through here
20:33
I'm not super familiar With
20:39
this is react that we're looking at
20:42
But let me see here
20:45
Yep right
20:49
Oh hmm
20:54
what are you noticing okay
21:07
first of all this image
tag it's not closed
21:11
which definitely would cause an error
cause the error
21:16
yeah but it's fixed on the front end
21:20
and we have everything needed it's
almost it
21:23
stopped
generating the code that first issue.
21:27
Let me
21:32
this reset button up here.
21:33
That didn't do much.
21:38
Okay, one thing I'm going to do, I'm
21:43
going to check the preview again.
21:44
Do you think every time we're prompting
it, it's entirely
21:47
always rewriting the entire code
21:52
base for that homepage?
21:57
It all depends on the AI.
22:00
Some products do,
and in some use cases it does.
22:02
Sometimes it will rewrite the
entire page.
22:06
That's when you
22:09
can start to ask for a new feature
and end up breaking old features.
22:10
That's why that commonly happens.
22:14
I don't feel it's necessary.
22:18
It doesn't seem
you should have to do that.
22:20
What I'm going to do,
22:23
I'm going to highlight all this code.
22:25
I'm going to just give it to Bolt.
22:27
I'm going to say
22:32
our homepage is showing up fine,
22:34
but the code doesn't look
22:38
complete on the back end.
22:41
Will you take a look
22:45
at this page specifically?
22:48
Fix that.
22:53
okay as I submitted that
23:00
it also noticed that there was a problem
23:02
I wonder if it's due to the token
limit per
23:06
per prompt
23:11
if it's continually rewriting
23:14
the whole page
which you kind of noticed the first time
23:16
it might be
that might be the case instead of hey
23:20
can you only change the image code right
23:22
no I think that that very well
23:28
could be the case
23:30
let's check the code
if they fixed they'll do
23:35
looks good on the front end
homepage here no
23:38
that's a really weird error
23:48
now it's saying there's a terminal issue
so we'll go ahead
23:49
and try to fix that For those of you
23:53
who are maybe experiencing
similar problems,
23:59
when we say token limits, every query
24:03
that you do to these AI platform,
24:06
they have a limit in which you can put in
and they can output.
24:11
And each of them,
they kind of chunk what your content
24:16
is into token sizes,
and that will determine the token limit.
24:20
Some token limits are , you know,
24:25
$200,000, $5 million, things that.
24:28
So that will alter the response length.
24:31
That's why if you've experienced
ChatGPT a few months ago,
24:36
the limit response has always been short,
but now it's been a lot longer.
24:40
Absolutely.
24:46
And I think A big thing
24:47
with the Token limits is you know that
they count Tokens almost characters
24:51
So each character counts
as part of the Token so you can Think of
24:55
you know each character As you know
25:00
Every character in your prompt
25:04
Adds to that token Limit
so it decreases The amount of tokens
25:06
that can be used on the response
So when I'm
25:10
Asking for something
and then I'm pasting in all the code,
25:15
I'm definitely decreasing
the amount of tokens it has to work with.
25:18
Now, when I click that
25:23
that prompt to fix the terminal error,
it actually said
25:26
it was due to an incomplete URL
or an incomplete image URL,
25:30
which was the exact problem
we were having.
25:35
So I'm going to actually go to the code
25:38
and we're just
going to check on that again.
25:41
I'm hoping it fixed it this time
25:45
No No That is strange It really is And it
25:47
It has this orange dot next to it
Which kind of means
25:53
it's being worked on Or the code
has been recently edited or changed
25:56
So that's really odd
26:01
Now I know enough to know
26:07
I need to close this
so I'm just going to do that
26:10
but I'm not going to add anything else
26:14
but I do feel
26:17
there would need to be some closing tags
26:19
to these similar to up
26:21
here here you have the div
26:25
class the div class name
you have all these divs right here
26:26
and if we go down
we have these closing divs these slashes
26:30
and we don't have those down here
we just have our opening divs
26:36
so that's a little weird
26:41
but that's probably
a bug issue on the bolt side of things
26:44
I wonder if if we export
26:54
this code base into cursor
and then run run it through
26:57
there as a local host
would it still produce the image
27:01
my gut feeling says no
because it's not complete?
27:06
I kind of think the same.
27:11
I think it may show the image, possibly,
27:12
but it could be distorted or not
where we want it.
27:16
So there's a couple ways
we could think of that.
27:20
But that's interesting
and it's kind of worth exploring.
27:24
So let's see
27:27
what our options are up here.
27:29
Oh, what's happening?
27:34
I click deploy.
27:36
Okay, it's going to help deploy it to
Netlify, which I didn't know it would do.
27:37
And it can do it because
27:42
there some issues with our Yep
27:44
So let attempt to fix these yet again
27:51
For those of you
who don't know what Netlify is, it's
27:54
a free platform
that can host your web app, your website.
27:57
And then if you want to kind of continue
using it, there's also the pricing plans
28:03
to kind of make it your own customized
domain, etc.
28:08
Yep, absolutely.
28:12
Oh, interesting.
28:19
Okay, so unlike
28:21
lovable, which can export the code
directly to GitHub,
28:24
you have to download the code here.
28:28
So, yeah, we still have that error.
28:33
yeah it's really struggling with that
it seems
28:44
so let's try downloading the code
28:47
and then let's try
bringing cursor into play
28:54
okay we're back in cursor
28:59
I've downloaded our project as a zip file
29:01
I've extracted the zip file just double
click on mac it'll bring up a new folder
29:05
so now we should be able to
find this folder and open it
29:09
so let's go
29:13
project and open
29:16
okay awesome
29:21
we have our project files here on the side
29:22
yep everything's right here
29:25
perfect perfect perfect
29:34
and there's our home page
29:36
and we'll go down
29:40
and yep it's only the image tag
is only closed because i did that
29:41
but it does not have the rest
29:46
so i'm just going to ask the agent to
29:49
please look over
29:55
my home.tsx file
which i have attached up here
29:57
please look over this for any errors
and debug them
30:03
or fix them if you can.
30:05
And we'll submit that.
30:10
So there's several problems.
30:22
It's missing some dependencies.
30:24
It's got improper
TypeScript configurations.
30:27
and complete JSX structure,
30:31
the image URL was invalid
30:35
and it didn't have those closing
tags that I mentioned.
30:38
So it's working on fixes to all of those.
30:42
That's quite a bit.
30:46
That's kind of surprising that
with all those errors,
30:47
Bolt was still giving us a viewable
landing page.
30:50
No, absolutely.
30:54
Okay.
30:56
Okay.
30:58
look at that
31:01
closed all our code for us
it's fixing the type script
31:05
I'm just accepting all the changes
it's making
31:09
and down here at the bottom
31:13
you will see it will say accept changes
when there's new changes
31:15
but you can also reject the changes
if you don't them
31:19
and you can stop them as well
to stop the agent from coding
31:21
and working on your project
31:25
but awesome.
31:31
It's doing a real good job here.
31:33
It says it fixed all those errors
it found.
31:36
Code should now be free of the issues.
31:45
The remaining errors should be resolved
once you install dependencies.
31:47
Would you to help me build
a tool configuration or improvement?
31:51
I'm just going to ask it.
31:53
Can you please install those
dependencies that we need?
31:55
Now, if you're wondering,
32:06
, this was supposed to be
a simple landing page about our product.
32:07
And now why are we in cursor
going through this whole debugging phase?
32:10
this is the
32:15
behind the scenes of what
a lot of these other YouTube
32:17
people would not show you to kind of show
you it's so easy to do this
32:21
anyway can do it but you can see
32:26
they probably won't show you this
this is part of the
32:29
the process of learning
how to fix issues with different
32:32
AI tools that you have at your disposal
if you don't have cursor another option
32:37
could just be using ChatGP to your cloud
to help you troubleshoot it.
32:41
If you don't use Cursor
and you're using a free
32:46
IDE, VS Code, what you would do is import
32:51
it to VS Code, take a snapshot
or a screenshot of the code,
32:55
upload it into ChatGP to your cloud,
ask it the same prompting that we did
33:00
here, copy and paste the code that it
spits out, and then hopefully that works.
33:05
That's a great idea.
33:11
And the reason why you would to
33:12
or want to take it to Cursor or ChatGPT
33:15
is because if you remember and you notice,
33:19
we kept asking Bolt to fix that error.
33:21
We probably asked
at least two or three times.
33:24
I have a personal feeling
that we were entering a loop.
33:27
and you know when you fight those loops
33:32
you may eventually get the outcome
that you were hoping for
33:35
but you can run through your tokens
really quickly
33:39
that or run
through your credits really fast that
33:42
and that's one way
33:47
we're trying to be
33:48
knowledgeable of
is how many credits we have
33:51
and to get the most out of them
33:54
and it's still just
34:00
adding a few different things it feels
we need.
34:01
It's on to Tailwind right now.
34:04
Awesome.
34:13
Now we can actually run the project,
which if we wanted to do this,
34:13
we would open up the terminal and type in
34:18
npm run dev,
34:22
but we have it right here
and we can just hit run command.
34:25
But just know you can ask for the command
to run your project.
34:28
Then you will never have to ask it
to run it again if you don't want to.
34:32
And I just say that because, again,
if you're using cursor,
34:37
that can use your credits
every time you run a command.
34:41
Okay it's
35:04
trying to get us going here
It's still working on it
35:04
but it's actually saying
we might have an error
35:08
But if I can I'm going
to try to go ahead and
35:12
Take a sneak peek at what we got
35:16
Oh yep definitely shows an error
35:19
I'll just copy this error
35:35
just in case cursor needs it as reference
35:36
but it may do just fine
35:39
fixing it itself
35:43
Okay,
35:49
yeah, it seems it's
trying a few different things.
35:53
I'm not sure what all is working.
36:00
I'm just going to go ahead and paste
in this code.
36:04
okay after
36:21
I posted in that code
it says it sees the issue
36:22
it's a react router dom
36:25
but it's not okay
it has it imported the file
36:29
but it's not installed
so it's working on that now
36:31
and I'll
37:00
click this to go back
37:01
Okay, so this is our project on localhost.
37:05
It did get it running. Hmm.
37:09
I don't that.
37:18
So if you'll notice, the image is broken,
37:20
and we can't go any further, as
37:25
if the rest of the page might be gone.
37:27
Interesting.
37:32
but that could be about us if you click on
37:33
those those work works good
37:39
we still have everything
37:42
now I noticed it was trying to install
and hook up some dependencies
37:45
maybe there was an issue
oh do you think it's
37:50
because of the database
trying to hook up but
37:54
because we downloaded the code that
37:57
wasn't part of it
38:01
I don't think so
because we hooked up super base
38:02
but we didn't ask it to
integrate with that form yet
38:05
and there is no subscribe button or
38:10
yeah the whole section is gone
it deleted it or lost it
38:12
so I'm going to head back to cursor
and see why
38:16
that is
38:19
I see it's still
38:24
working
I'm just going to accept everything.
38:29
And if you'll notice my terminal down
38:34
here, notice there's some problems.
38:36
Okay, mail is declared,
38:40
but the value is never,
38:41
can't see the entire issue, but
38:46
it does have some issues here.
38:48
So I'm actually going
to take a screenshot,
38:53
bring it right in here,
39:00
and say, can you look at that
39:02
middle section towards
the bottom underneath the problems?
39:06
It shows that there's three problems,
39:10
mainly dealing with the mail, email
and handle submit.
39:12
Can you fix these issues, please?
39:16
And I'm just going to let it cook
and do its thing right there.
39:23
but one other thing
I kind of noticed we could probably do
39:27
is this is our
39:33
benefits section
39:37
the section we have issues with
let me see if that's correct
39:38
no I don't think it's the benefits
it might be
39:44
it's on progress
39:50
I think it was
39:57
oh no it's right here okay okay okay
40:02
so this makes a lot of sense now okay
40:04
of why we have certain issues
40:09
so walk us through
what you're thinking about then
40:12
OK, what I was thinking initially was
40:16
we only had that one broken section
of our homepage on Bolt.
40:20
I could select this.
40:25
Copy it and bring it over.
40:28
And I'm just going to copy it
now, so I have it.
40:30
But I noticed a few different issues.
40:33
Mainly, if you remember on our homepage,
40:36
when we looked at localhost,
our image didn't work.
40:40
And that's
because it just completely changed the URL
40:44
to slash
images, backslash kids learning. Now,
40:47
this backslash images,
that means there should be an images
40:54
folder with the image inside of it,
which we don't have.
40:57
So, of course,
that's not going to populate.
41:01
But let's go back.
41:05
Okay,
41:16
I'll just refresh the page
Can't be reached,
41:16
okay, let's go back to cursor
41:20
This is very typical,
this is not a big deal When you get the,
41:23
this site can't be reached
That normally just means
41:26
you need to run your project again
41:29
Mm-hmm Run back to cursor here
41:33
You notice
after we asked it to fix those things
41:41
we don have those problem issues anymore
so we should be good
41:43
there
41:46
we'll go back to the terminal
41:56
oh there we go,
42:02
we're back in the terminal,
and I'm just going to do that npm run dev,
42:08
excellent, now the project
42:15
started, and we have another link,
let me just click that
42:16
link, alright,
42:20
I don't that, I don't that at all,
42:31
the image is still broken,
which I knew it would be because we didn't
42:34
ask for it to fix it.
42:36
But it just tried
to kind of recreate the email form.
42:38
It kind of lost that original layout
we had.
42:43
So what I'm going to do
is actually go back to Cursor
42:47
and take that piece of code I mentioned.
42:51
And from when we were in there last time
and I was highlighting it,
42:54
I already copied it.
42:57
So let's just head over to Bolt
and see if we can't fix that issue
42:58
by kind of adding that in.
43:01
And I'm going to space this down here
so I don't lose this URL.
43:05
I'm going to replace this code.
43:10
Oh, it even has an ask
bolt, so that's kind of neat.
43:13
But I'll paste the code in.
43:17
Okay, there we go.
43:19
I'm going to highlight our link,
43:21
delete this entirely.
43:24
And I'm going to go back to our link here.
43:27
This is where the image path is
43:32
and we'll paste where the actual image is.
43:35
I'm going to click save.
43:38
Okay, it saved those changes.
43:39
And now
43:46
let's try looking at those again.
43:49
Oh, No
43:57
preview available.
44:04
Let's see.
44:07
Is there an issue with our project?
44:10
As it's currently saying,
there's no preview available.
44:12
we got this error hmm
44:29
Now, I don't know if this is
44:44
because we exported the project
or deployed it.
44:46
Let's see what happens if we try to deploy
44:52
again.
44:54
Showed one problem.
44:59
Attempt to fix.
45:00
More errors.
45:24
We'll just highlight
these specific errors.
45:27
Okay.
46:07
We keep getting this tool
invocation must have a result error.
46:08
again
46:13
I'm not the most technical person
in the room so I don't necessarily
46:14
know what that means I can't help
but think
46:19
it has something to do
46:23
with when we try to deploy
now it thinks the project isn't
46:25
on bolt natively
and it doesn't think it can't edit it
46:29
so I'm just going to now
46:35
look for a checkpoint
46:38
okay here's a rollback
46:41
here's a rollback
46:45
trying to find a rollback
that happens before
46:51
we try to deploy the Netlify
which I think is
46:53
right here
46:56
okay excellent
47:01
we're reverting back to a few prompts ago
47:02
okay now that it's done
this should bring back our project
47:07
nothing we try
47:15
refreshing
47:17
error huh
47:20
okay let's
47:26
see it's
47:32
stack
both in the bulk this may take a moment
47:37
okay let's go back here
47:48
okay awesome it's working on that fix now
47:58
it was just an issue with the home page
and rolling us back
48:00
at least got us to where the AI agent
is working with us again.
48:05
Because if you'll notice before,
I kept getting that tool error to
48:09
where the AI agent
wouldn't even work on our code.
48:12
So we've at least
48:15
gotten far enough back that we can have
the AI agent work on our project again.
48:17
And it's back.
48:22
Oh, let's see here.
48:23
Actually,
48:28
okay there we go in a new tab
48:33
and we'll go down
48:37
we have our cute kid image back again
48:41
and perfect perfect
48:44
we're back to where we wanted
do we have our about page still yes we do
48:47
excellent now let's go back.
48:53
It basically fixed everything for us.
48:58
Let's check on that homepage
and see if it was able
49:00
to fix the code this time.
49:04
If you'll notice, let's see here.
49:09
This was the benefits section.
49:13
You can even scroll back or scrub
back a few minutes
49:15
to where we were working on this
a little while ago.
49:18
You'll notice the benefits section stopped
49:20
a little bit after the image, but now it
49:24
continues and goes all the way down.
49:27
So it actually looks very complete.
49:31
Yeah, it's complete
and coded out the rest of our page.
49:33
So now I think we can go ahead
49:36
and ask for the email.
49:40
So let's just say
49:44
I have an email form
at the very bottom of our landing page.
49:48
this is for our newsletter
I want to set it up in Superbase
49:52
so it actually works
so when I submit my email
49:55
it's recorded on the back end
and I'm able to be
49:59
added to the mailing list
so I can get updates in the future
50:03
now of
course this should record the ability
50:12
or this should create the ability for it
to record our email when we submit it
50:15
but we would have to set up
our own separate
50:19
email newsletter
and the ability to do all that.
50:22
It's not going to do all that for us.
50:26
This is just so we can collect emails.
50:30
Okay, we'll just go back
and I'll just talk about some changes
50:46
it made real quick.
50:49
Let's do that.
50:51
So it's going to work
on our newsletter subscription
50:54
and it went in the super base
50:57
and added the new database that we needed
and the new integrations.
50:59
It set everything up.
51:03
And then it started to work on the homepage so it could integrate it there as well.
51:05
So, again, it created the initial database
51:13
feature that we needed to record
those emails that are submitted.
51:17
And it even updated the homepage,
so it would kind of take those
51:21
as they were submitted on the homepage
and actually add them to our database.
51:25
It just went over what it did.
51:30
And then, of course, we have to apply
those changes to our Superbase database.
51:33
So we'll just accept those.
51:38
There we go.
51:44
It should be working now.
51:45
We'll open a new tab, connect it.
51:47
I'm not a fan that you have to connect
51:50
every time you go to a new tab.
51:52
Yeah.
51:56
That is an extra click that we don't need.
51:58
Yeah, I how lovable just loads it.
52:01
Okay, and we should be working here.
52:04
Try it out.
52:08
And it says it worked.
52:13
Thanks for subscribing.
52:14
You'll receive updates soon.
52:15
Perfect.
52:17
Now, let's just confirm that.
52:18
We'll go to Superbase.
52:28
We'll find our Kids AI project.
52:31
Settle into the database.
52:38
And we have email.
52:43
See tables.
52:46
Yep, newsletter subscriptions.
52:48
Perfect.
52:54
Now, it's a little buried down in here,
so it definitely takes a little bit
52:55
to find, but I'll just kind of go back
and show you what I did.
52:58
You want to go to the database,
53:01
and then here it shows you
the different types of
53:03
inputs or values it's collecting.
53:08
There's an ID,
53:10
an email, a subscribed at, and a status.
53:12
It's basically an ID is for each unique
53:16
entry.
53:20
Email is for the actual email.
53:21
The subscribe that is for what time
they subscribe.
53:24
And status is probably just for
if it successfully went through.
53:27
Now, what you want to do is go to tables.
53:31
Here will be all your data.
53:34
And as you've noticed,
53:36
we only have added the feature
to get those newsletter subscriptions.
53:37
So that's all we have.
53:41
And you'll just want to click
on these three dots
53:43
and click a view in table editor.
53:46
And this is where all of our values are.
53:49
So you'll notice we have the email
I put in here.
53:51
But if we go back,
53:54
we can just try another one.
53:56
We'll just say Jack at Jack dot com.
53:59
Thanks for describing.
54:05
You'll receive our updates soon.
54:06
Perfect. Perfect. Boom.
54:08
There you go.
54:11
Perfect.
54:13
There you go.
54:15
I think that pretty much shows
how you can,
54:16
you know, build out a full landing page.
54:19
Now, hopefully your experience
will go a little bit smoother.
54:22
Landing pages are kind of the easier
products to make when using these agents.
54:26
But hopefully now you have a little bit
of extra context to understand
54:31
how to debug or work around these issues
when you're facing them.
54:36
Yeah,
and have fun making your landing pages.
54:43
Try different types of landing
pages, different colors,
54:46
different types of effects
you can draw inspiration from.
54:50
If you have a landing page that
you really enjoy, put that in your prompt.
54:55
, I want you to make a copy of this
landing page, but with my information.
55:00
Yeah, absolutely.
55:05
You can provide a URL
if the AI agent can read URLs.
55:06
Some can, some can't.
55:10
But if you can't, just take a screenshot
and provide that screenshot,
55:11
and it should know what to do.
55:16
But I think that'll do it for this video.
55:18
I think that
55:21
thoroughly showed us
how to get around these errors
55:23
and complete our landing page. And I hope
55:25
everyone has a great time building,
and we'll see you in the next one.
55:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up