1

00:00:00,001 --> 00:00:01,005

2
00:00:01,005 --> 00:00:04,001
you might be wondering which tool you should use

3
00:00:04,001 --> 00:00:05,005
for a project.

4
00:00:05,005 --> 00:00:07,008
Now, some of the tools are better for beginners.

5
00:00:07,008 --> 00:00:10,002
Some of them are great at prototyping

6
00:00:10,002 --> 00:00:13,008
and some are really meant for experienced developers.

7
00:00:13,008 --> 00:00:15,005
I'm going to use two of them,

8
00:00:15,005 --> 00:00:18,000
Bolt as well as Cursor.

9
00:00:18,000 --> 00:00:21,002
Bolt is several steps beyond using a chatbot

10
00:00:21,002 --> 00:00:24,000
and it's going to give me a great starting template.

11
00:00:24,000 --> 00:00:26,006
What Bolt does best is prototype a concept

12
00:00:26,006 --> 00:00:29,004
and then give you a fantastic starting point.

13
00:00:29,004 --> 00:00:32,000
That's going to be more difficult for a tool like Cursor,

14
00:00:32,000 --> 00:00:34,005
which is really meant more for professionals.

15
00:00:34,005 --> 00:00:38,000
It's by far the most popular vibe coding tool out there.
16
00:00:38,000 --> 00:00:41,000
To get started, I'm going to use this data file right here.

17
00:00:41,000 --> 00:00:42,008
It's a set of performance metrics.

18
00:00:42,008 --> 00:00:44,001
You'll be able to find this data

19
00:00:44,001 --> 00:00:46,005
in the repository for this course.

20
00:00:46,005 --> 00:00:49,002
Let's add this to Bolt so it has context

21
00:00:49,002 --> 00:00:50,009
as to what I want to do,

22
00:00:50,009 --> 00:00:54,000
and then I'm going to start with a simple question.

23
00:00:54,000 --> 00:00:57,004
I'll just say, "Create a dashboard for analyzing this data."

24
00:00:57,004 --> 00:00:58,005
And then I'll hit Send.

25
00:00:58,005 --> 00:01:00,006
Bolt has a number of prebuilt templates

26
00:01:00,006 --> 00:01:03,009
and it's going to create a project by analyzing our data

27
00:01:03,009 --> 00:01:06,001
and then building a great looking dashboard.

28
00:01:06,001 --> 00:01:09,003
Most of the time Bolt is going to use a React project

29
00:01:09,003 --> 00:01:11,006
and it knows how to create those really well.

30
00:01:11,006 --> 00:01:14,003
The thing about vibe coding is that no two sessions

31
00:01:14,003 --> 00:01:17,001
will be the same even if you type exactly

32
00:01:17,001 --> 00:01:19,000
what I did in this course.

33
00:01:19,000 --> 00:01:22,006
The AI models take a bit of creative license when coding,

34
00:01:22,006 --> 00:01:25,003
so it's okay to start a new session

35
00:01:25,003 --> 00:01:27,000
if you don't get something you love.

36
00:01:27,000 --> 00:01:28,003
As Bolt vibe codes,

37
00:01:28,003 --> 00:01:30,001
you can actually see what it's doing here

38
00:01:30,001 --> 00:01:31,004
on the right hand side,

39
00:01:31,004 --> 00:01:33,005
and you can click on some of these files

40
00:01:33,005 --> 00:01:35,008
and see how it codes the different components.

41
00:01:35,008 --> 00:01:38,004
It looks like it's done with the application

42
00:01:38,004 --> 00:01:40,001
and you can see that it did a pretty decent job

43
00:01:40,001 --> 00:01:41,004
with the data analysis

44
00:01:41,004 --> 00:01:43,007
and it was even able to give me a light

45
00:01:43,007 --> 00:01:45,006
or dark mode version.

46
00:01:45,006 --> 00:01:48,003
Of course, I can ask Bolt to continue designing

47
00:01:48,003 --> 00:01:50,002
and modifying its project,

48
00:01:50,002 --> 00:01:52,004
but I want to show you how it pairs well

49
00:01:52,004 --> 00:01:55,002
with most professional tools like Cursor.

50
00:01:55,002 --> 00:01:57,008
So to do that, I'm going to hit this Export button

51
00:01:57,008 --> 00:02:00,009
and just download the file into my local computer

52
00:02:00,009 --> 00:02:02,009
and it'll be here in my desktop.

53
00:02:02,009 --> 00:02:05,005
So we're now done with Bolt,

54
00:02:05,005 --> 00:02:07,002
so I'll go ahead and close that window

55
00:02:07,002 --> 00:02:09,001
and I'm going to decompress this file.

56
00:02:09,001 --> 00:02:11,005
I'm going to rename this vibe-coding

57
00:02:11,005 --> 00:02:13,005
and I'll open this up in Cursor.

58
00:02:13,005 --> 00:02:15,006
Now, when you first open up Cursor, you'll see

59
00:02:15,006 --> 00:02:18,009
that there is a new chat section right here,
60
00:02:18,009 --> 00:02:21,005
which is where you're going to do most of your prompting.

61
00:02:21,005 --> 00:02:22,008
If that is not showing up,

62
00:02:22,008 --> 00:02:27,002
then click right here on this Toggle AI Pane section

63
00:02:27,002 --> 00:02:28,009
and there's a few other things that you may want

64
00:02:28,009 --> 00:02:30,005
to check before you begin.

65
00:02:30,005 --> 00:02:32,008
First off, you may want to choose the model that you want

66
00:02:32,008 --> 00:02:34,006
to use for your projects.

67
00:02:34,006 --> 00:02:37,006
You can have Cursor automatically pick a model for you

68
00:02:37,006 --> 00:02:40,003
by clicking on this Auto-select section.

69
00:02:40,003 --> 00:02:43,001
You can also choose to look at only the thinking models

70
00:02:43,001 --> 00:02:45,003
or pick whatever you want yourself.

71
00:02:45,003 --> 00:02:47,005
I'm sticking with claude-3.5-sonnet.

72
00:02:47,005 --> 00:02:50,002
It'll work really well with this project.

73
00:02:50,002 --> 00:02:52,003
The other thing that you may want to check is whether you

74
00:02:52,003 --> 00:02:54,008
want it to work in adjunctive mode, which means
75
00:02:54,008 --> 00:02:57,001
that it will do most of the changes automatically.

76
00:02:57,001 --> 00:02:59,005
You can also tell it to ask you whether

77
00:02:59,005 --> 00:03:01,004
or not you want to implement the changes,

78
00:03:01,004 --> 00:03:03,009
and then it will just give you suggestions

79
00:03:03,009 --> 00:03:05,008
and let you pick whether or not you want

80
00:03:05,008 --> 00:03:07,001
to approve those changes.

81
00:03:07,001 --> 00:03:08,006
I'm going to leave it in Agent mode.

82
00:03:08,006 --> 00:03:12,001
You may also want to check the Cursor specific settings.

83
00:03:12,001 --> 00:03:14,002
Cursor is a copy of Visual Studio Code,

84
00:03:14,002 --> 00:03:16,007
which should look familiar to most developers,

85
00:03:16,007 --> 00:03:18,007
but it has its own settings

86
00:03:18,007 --> 00:03:20,006
and you can access them right here.

87
00:03:20,006 --> 00:03:22,004
The most important thing you want to check is,

88
00:03:22,004 --> 00:03:24,003
of course, your list of models.

89
00:03:24,003 --> 00:03:27,006
This tab will control which models show up in this dropdown.

90
00:03:27,006 --> 00:03:30,006
There are some models that have the name max in them.

91
00:03:30,006 --> 00:03:34,005
These models will cost more, so I like to turn those off.

92
00:03:34,005 --> 00:03:37,006
You can also use your own API keys if you've got them,

93
00:03:37,006 --> 00:03:41,000
however, those may make some custom features not work.

94
00:03:41,000 --> 00:03:42,001
The other place that you want

95
00:03:42,001 --> 00:03:44,002
to look at is this Rules section.

96
00:03:44,002 --> 00:03:46,000
This is where you would add anything

97
00:03:46,000 --> 00:03:48,007
that you want the project to always consider.

98
00:03:48,007 --> 00:03:50,009
Think of them as system instructions,

99
00:03:50,009 --> 00:03:53,001
and you can do those for all your projects

100
00:03:53,001 --> 00:03:55,003
by putting them in this User Rules

101
00:03:55,003 --> 00:03:58,001
or create a rule for the specific project.

102
00:03:58,001 --> 00:04:01,000
Because I have quite a comprehensive project

103
00:04:01,000 --> 00:04:04,001
that Bolt has already created for me, I don't want any

104
00:04:04,001 --> 00:04:06,008
of my rules to fight what it's already done,

105
00:04:06,008 --> 00:04:08,005
so I'm going to leave those alone.

106
00:04:08,005 --> 00:04:10,008
So I'm going to go ahead and start by asking it

107
00:04:10,008 --> 00:04:12,006
to help me preview this code.

108
00:04:12,006 --> 00:04:15,005
So first it's going to look at the entire code base,

109
00:04:15,005 --> 00:04:18,006
and in this case it's going to run npm install and npm run dev

110
00:04:18,006 --> 00:04:20,008
and run a server for you.

111
00:04:20,008 --> 00:04:23,004
So you can Command click to open that up

112
00:04:23,004 --> 00:04:26,000
and here's what that social media dashboard looks like.

113
00:04:26,000 --> 00:04:27,009
Overall, I think it did a pretty good job,

114
00:04:27,009 --> 00:04:29,005
but I think my performance trends

115
00:04:29,005 --> 00:04:31,002
could be a little bit better.

116
00:04:31,002 --> 00:04:33,003
So I'm going to ask it to modify that.

117
00:04:33,003 --> 00:04:34,001
I'm going to say,

118
00:04:34,001 --> 00:04:36,004
"Can you modify the performance transaction.
119
00:04:36,004 --> 00:04:39,003
I want to see the video names when I roll over them

120
00:04:39,003 --> 00:04:41,004
and would prefer a stacked line chart."

121
00:04:41,004 --> 00:04:44,001
It's going to automatically make some suggestions

122
00:04:44,001 --> 00:04:45,009
and you can review them right here

123
00:04:45,009 --> 00:04:48,007
and accept any changes individually

124
00:04:48,007 --> 00:04:50,009
and normally if it changed multiple files,

125
00:04:50,009 --> 00:04:52,008
you would see Accept All right here,

126
00:04:52,008 --> 00:04:56,000
but because it's only one file it says, "Accept."

127
00:04:56,000 --> 00:04:57,002
I'll go ahead and say, "Yes."

128
00:04:57,002 --> 00:04:59,001
It doesn't look like it's automatically updated

129
00:04:59,001 --> 00:05:01,009
and sometimes it won't let you refresh this.

130
00:05:01,009 --> 00:05:05,004
Somehow it stops the server from running.

131
00:05:05,004 --> 00:05:06,007
I'm going to pretend I don't know that

132
00:05:06,007 --> 00:05:10,005
and I'll just say, "I can't see the preview."

133
00:05:10,005 --> 00:05:12,000
Now it started the server again.
134
00:05:12,000 --> 00:05:14,004
So I'm going to click on this server

135
00:05:14,004 --> 00:05:16,004
and you can see that when I roll over these,

136
00:05:16,004 --> 00:05:19,009
it's showing me some of the information.

137
00:05:19,009 --> 00:05:22,007
Sometimes I make the mistake of trying to explain

138
00:05:22,007 --> 00:05:25,000
to Cursor in natural language

139
00:05:25,000 --> 00:05:26,009
how to make a visual change

140
00:05:26,009 --> 00:05:30,001
when it's just a lot easier to include a screenshot.

141
00:05:30,001 --> 00:05:31,009
So I'm going to take a screenshot

142
00:05:31,009 --> 00:05:33,000
and I'm going to let it know

143
00:05:33,000 --> 00:05:36,003
that when I roll over I can't see the entire graph,

144
00:05:36,003 --> 00:05:38,004
so I'll take a screenshot here.

145
00:05:38,004 --> 00:05:42,001
I'm using a tool called Snagit so it has this nice way

146
00:05:42,001 --> 00:05:44,001
of adding little arrows so I can point to

147
00:05:44,001 --> 00:05:46,002
what I'm talking about here and I'll go ahead

148
00:05:46,002 --> 00:05:49,000
and add this as context into Cursor

149
00:05:49,000 --> 00:05:50,008
and notice that it loaded up an image.

150
00:05:50,008 --> 00:05:52,007
That's a really useful thing to do when you want

151
00:05:52,007 --> 00:05:54,007
to tell the model something

152
00:05:54,007 --> 00:05:57,000
that is more easily understood visually

153
00:05:57,000 --> 00:05:58,002
and it looks like once again,

154
00:05:58,002 --> 00:06:01,000
it lost track of its live reload.

155
00:06:01,000 --> 00:06:03,001
So this time I'm going to open up a terminal

156
00:06:03,001 --> 00:06:07,008
and just run the npm run-dev command myself over here.

157
00:06:07,008 --> 00:06:10,002
That way hopefully it won't be based

158
00:06:10,002 --> 00:06:12,006
on whatever it is on this chat.

159
00:06:12,006 --> 00:06:14,002
All right, let's go to the other window

160
00:06:14,002 --> 00:06:15,007
and we'll refresh this

161
00:06:15,007 --> 00:06:18,006
and now I can see everything a little bit better.

162
00:06:18,006 --> 00:06:20,008
Now I really would like to see some sort

163
00:06:20,008 --> 00:06:23,001
of line drawings here,

164
00:06:23,001 --> 00:06:28,001
so let's try taking another screenshot just of this section.

165
00:06:28,001 --> 00:06:31,005
And once again, I'm going to go into my little tool here

166
00:06:31,005 --> 00:06:34,007
and ask it to sort of draw some of the lines,

167
00:06:34,007 --> 00:06:38,000
something like this, and I'll move this in.

168
00:06:38,000 --> 00:06:40,006
All right, let's see if that's working a little better.

169
00:06:40,006 --> 00:06:42,005
I do like these open dots better,

170
00:06:42,005 --> 00:06:45,000
but I'm not sure it's actually giving me lines.

171
00:06:45,000 --> 00:06:46,009
So let me try one more time.

172
00:06:46,009 --> 00:06:52,005
I'll ask it to try recreating that chart from scratch.

173
00:06:52,005 --> 00:06:54,003
All right, let's take a look at what it did

174
00:06:54,003 --> 00:06:57,005
and now the data doesn't look right at all.

175
00:06:57,005 --> 00:07:00,003
Every once in a while you're going to have to roll back

176
00:07:00,003 --> 00:07:02,003
to a previous checkpoint.

177
00:07:02,003 --> 00:07:05,000
I do like when it got to this section here,
178
00:07:05,000 --> 00:07:07,009
so I'm going to restore this checkpoint

179
00:07:07,009 --> 00:07:11,000
and I'll modify this message right here.

180
00:07:11,000 --> 00:07:16,005
I'll say, "Change this to a bar chart."

181
00:07:16,005 --> 00:07:18,006
And I actually think that's a lot better.

182
00:07:18,006 --> 00:07:25,004
I'm going to try asking it to just stack this information.

183
00:07:25,004 --> 00:07:26,004
It still looks horrible.

184
00:07:26,004 --> 00:07:32,008
"Can you try stacking the text information?"

185
00:07:32,008 --> 00:07:34,009
That is looking really nice now,

186
00:07:34,009 --> 00:07:36,006
although I would like these dates

187
00:07:36,006 --> 00:07:38,005
to be a little bit more underneath.

188
00:07:38,005 --> 00:07:42,007
Let's go ahead and grab another screenshot really quick.

189
00:07:42,007 --> 00:07:45,001
This time I'm going to put my handy dandy arrows

190
00:07:45,001 --> 00:07:49,003
to these dates right here.

191
00:07:49,003 --> 00:07:53,008
I'll say, "Can you move these dates down a bit?"

192
00:07:53,008 --> 00:07:54,009
All right, let's take a look.
193
00:07:54,009 --> 00:07:57,000
That looks a lot better

194
00:07:57,000 --> 00:08:00,002
and my rollovers look fantastic.

195
00:08:00,002 --> 00:08:03,002
I do like the light and dark mode, but I'm noticing that

196
00:08:03,002 --> 00:08:05,008
whenever I refresh my screen,

197
00:08:05,008 --> 00:08:08,003
it kind of resets to light mode.

198
00:08:08,003 --> 00:08:10,004
I normally work in dark mode anyways,

199
00:08:10,004 --> 00:08:13,008
so I'm going to have it detect the mode of the computer

200
00:08:13,008 --> 00:08:15,008
and see if it can use local storage

201
00:08:15,008 --> 00:08:18,007
so that they can remember between refreshes.

202
00:08:18,007 --> 00:08:22,003
I'll say, "I noticed that if I switch to dark mode

203
00:08:22,003 --> 00:08:24,008
and refresh the page, it goes back to light mode.

204
00:08:24,008 --> 00:08:27,003
Can you make the page read the computer's mode

205
00:08:27,003 --> 00:08:29,000
and remember it between reloads."

206
00:08:29,000 --> 00:08:30,000
All right, let's check it out.

207
00:08:30,000 --> 00:08:32,007
My computer is set the dark mode by default

208
00:08:32,007 --> 00:08:33,009
and I'm going to refresh

209
00:08:33,009 --> 00:08:37,004
and it is maintaining the dark mode, so that's great.

210
00:08:37,004 --> 00:08:40,004
I'm going to switch over to light mode and if I refresh,

211
00:08:40,004 --> 00:08:42,007
it is maintaining the light mode,

212
00:08:42,007 --> 00:08:44,001
so that's awesome.

213
00:08:44,001 --> 00:08:46,001
I'll leave it in dark mode 'cause that's what I like.

214
00:08:46,001 --> 00:08:48,007
The graphs still look pretty good.

215
00:08:48,007 --> 00:08:51,004
I'm going to see if I can create a separate tab

216
00:08:51,004 --> 00:08:53,001
that has all the posts.

217
00:08:53,001 --> 00:08:56,002
I don't need all that in this page, so I'm going to ask it

218
00:08:56,002 --> 00:08:59,007
to maybe create another tab right here.

219
00:08:59,007 --> 00:09:01,006
I'll say, "Can you create some tabs

220
00:09:01,006 --> 00:09:03,005
to move the All Posts section

221
00:09:03,005 --> 00:09:05,002
and let me toggle between the dashboard

222
00:09:05,002 --> 00:09:07,008
with all the graphs and all the posts."

223
00:09:07,008 --> 00:09:10,002
All right, let's take a look at the page.

224
00:09:10,002 --> 00:09:11,007
And now, although it didn't put 'em up here,

225
00:09:11,007 --> 00:09:12,006
I think it's fine.

226
00:09:12,006 --> 00:09:14,002
It put 'em right over here.

227
00:09:14,002 --> 00:09:15,005
If I scroll, I can see

228
00:09:15,005 --> 00:09:19,005
that it doesn't have all the post information down here

229
00:09:19,005 --> 00:09:21,004
and I can toggle between this page

230
00:09:21,004 --> 00:09:23,005
that has all the post information

231
00:09:23,005 --> 00:09:26,006
and the main dashboard with all of the data.

232
00:09:26,006 --> 00:09:30,008
Let's go ahead and ask if it can add a few more charts.

233
00:09:30,008 --> 00:09:32,009
I'll say, "Can you add a few more charts

234
00:09:32,009 --> 00:09:36,005
now that you have more room under performance trends."

235
00:09:36,005 --> 00:09:38,007
And it did a few more charts.

236
00:09:38,007 --> 00:09:41,004
I'm not sure that I like this metrics legend,
237
00:09:41,004 --> 00:09:43,007
so let's see if we can switch it out

238
00:09:43,007 --> 00:09:46,004
to show me some information about the duration.

239
00:09:46,004 --> 00:09:49,002
I'll say, "Can you switch out the metrics legend

240
00:09:49,002 --> 00:09:52,000
to something that displays interesting information

241
00:09:52,000 --> 00:09:53,006
about the watched time."

242
00:09:53,006 --> 00:09:54,006
Well, let's see what it did.

243
00:09:54,006 --> 00:09:57,000
That isn't exactly what I was looking for,

244
00:09:57,000 --> 00:09:58,008
but I think this is actually a lot better

245
00:09:58,008 --> 00:10:00,002
than what I had in mind.

246
00:10:00,002 --> 00:10:02,003
I probably spend a few hours overall

247
00:10:02,003 --> 00:10:05,004
in my vibe coding session trying out different things.

248
00:10:05,004 --> 00:10:07,006
Remember to stay loose with your prompts,

249
00:10:07,006 --> 00:10:09,003
don't ask it to do too much,

250
00:10:09,003 --> 00:10:10,008
include screenshots,

251
00:10:10,008 --> 00:10:13,005
and sometimes you'll have to deal with errors
252
00:10:13,005 --> 00:10:15,008
and revert to previous points.

253
00:10:15,008 --> 00:10:18,000
Vibe coding is all about going with the flow.