WEBVTT

00:00:00.080 --> 00:00:03.460
Now, as mentioned,
here we'll build an example application.

00:00:03.480 --> 00:00:06.620
And the example application we'll build
will be a

00:00:06.680 --> 00:00:10.400
note-taking app that allows users to
create

00:00:10.460 --> 00:00:14.420
notes using a rich text editor,
to use text

00:00:14.620 --> 00:00:18.500
formatting in there. Then they can,
of course, view those notes

00:00:18.560 --> 00:00:22.380
and they can also manage them,
and for example, edit them, or

00:00:22.500 --> 00:00:25.640
of course, also delete those notes.

00:00:25.680 --> 00:00:29.320
In addition,
I also will add a feature

00:00:29.380 --> 00:00:33.269
share notes publicly so
that users can view notes

00:00:33.300 --> 00:00:37.250
that don't belong to them. But therefore,
the question now, of course,

00:00:37.260 --> 00:00:40.900
is how do we start working on this
application with Claude

00:00:40.980 --> 00:00:44.940
Code?
Any problem or task you wanna tackle with

00:00:45.220 --> 00:00:49.200
starts with a prompt. So here,
when I wanna build a brand

00:00:49.240 --> 00:00:53.220
new application from scratch,
the question is, what is that prompt?

00:00:53.260 --> 00:00:57.060
And the answer for me at least is
that I wanna provide a

00:00:57.200 --> 00:01:01.070
specification document
that describes the application we're

00:01:01.100 --> 00:01:04.879
working on. And by the way, this
is also important if you're working on an

00:01:04.940 --> 00:01:08.760
existing application. Then still you want

00:01:08.820 --> 00:01:12.240
to provide this information,
you wanna describe this

00:01:12.280 --> 00:01:16.160
application to Claude. So
that matters no matter if

00:01:16.200 --> 00:01:18.850
you're working on a new application
or an existing one.

00:01:18.860 --> 00:01:22.560
Now,
I typically build those specification

00:01:22.620 --> 00:01:25.700
with help of AI. So for this demo here,
I used

00:01:25.740 --> 00:01:29.360
ChatGPT, and I described my application to

00:01:29.400 --> 00:01:33.230
ChatGPT here. By the way, this
is a one-time task, of course.

00:01:33.440 --> 00:01:37.170
I don't do this before every prompt I send
to Claude

00:01:37.240 --> 00:01:40.930
Code.
I just wanna make sure I have an initial

00:01:41.020 --> 00:01:44.520
document for this application.
So here I'm describing

00:01:44.560 --> 00:01:47.900
that we're building a note-taking web

00:01:47.980 --> 00:01:51.960
app.
I describe the core features about

00:01:52.020 --> 00:01:54.230
updating, deleting and sharing notes.

00:01:54.480 --> 00:01:57.750
I describe the tech stack, so
that I'm using

00:01:57.800 --> 00:02:01.540
Next.js with Bun and TypeScript in my
case, and for

00:02:01.660 --> 00:02:05.580
styling, Tailwind CSS. For authentication,
I'll use

00:02:05.640 --> 00:02:08.680
a third-party library,
the betterauth library.

00:02:08.720 --> 00:02:12.220
The rich text editor will be implemented
with help of yet another

00:02:12.280 --> 00:02:16.049
library, the tictac library.
We also need a database, and

00:02:16.120 --> 00:02:19.820
here I'll use SQLite because that's an
amazing database also for

00:02:19.880 --> 00:02:23.860
production,
but especially also for development

00:02:23.920 --> 00:02:27.720
and edit it locally with ease.
And then I ask

00:02:27.860 --> 00:02:31.400
ChatGPT to, in the end,
write me a technical specification

00:02:31.440 --> 00:02:34.220
document, which I got

00:02:34.320 --> 00:02:37.620
here. And you see, this is a rather

00:02:37.760 --> 00:02:41.680
long document. Now, what I'll do is I'll

00:02:41.740 --> 00:02:45.600
then copy that document here,
head over to my project,

00:02:45.640 --> 00:02:49.580
and in there,
I like to add a Spec.md file,

00:02:49.600 --> 00:02:53.300
to you.
That's not a file Claude Code expects or

00:02:53.420 --> 00:02:56.040
anything like that. That's just my choice.

00:02:56.100 --> 00:02:59.850
This Spec.md file now could do with some

00:02:59.940 --> 00:03:03.609
formatting. So now inside of my editor,
I'll

00:03:03.660 --> 00:03:07.530
save this file and I'll open Claude Code
again, and as a first

00:03:07.600 --> 00:03:10.660
step,
I'll let it improve this Spec.md file.

00:03:10.700 --> 00:03:14.680
Again, this is a one-off task
when getting started, but it can help

00:03:14.720 --> 00:03:17.170
further down the road
when working on this project.

00:03:17.180 --> 00:03:21.140
And I'll use Claude Code to first revise
this Spec.md

00:03:21.300 --> 00:03:25.220
file and format it properly. So for that,
I'll give it a prompt

00:03:25.260 --> 00:03:28.980
and say,
"We're building an app described in

00:03:29.660 --> 00:03:33.580
@spec.md." And that's the first

00:03:33.620 --> 00:03:37.340
important thing here. This is the official

00:03:37.580 --> 00:03:41.540
way of pointing Claude Code at a specific
file, of

00:03:41.600 --> 00:03:45.320
including a specific file into the
context.

00:03:45.400 --> 00:03:48.960
I have not added my instructions to this
prompt yet, but I'm already

00:03:49.000 --> 00:03:51.060
starting with the context engineering.

00:03:51.160 --> 00:03:54.700
If you know that a certain task involves a

00:03:54.800 --> 00:03:58.740
certain file or that a certain file
contains information that's

00:03:58.760 --> 00:04:02.160
important for a certain task,
you wanna typically

00:04:02.220 --> 00:04:06.140
include it in your prompt like this,
by pointing at it with that at

00:04:06.540 --> 00:04:09.810
symbol.
You don't wanna include all files

00:04:09.820 --> 00:04:13.700
potentially be relevant because here we
enter the territory

00:04:13.760 --> 00:04:16.790
of including irrelevant context,
which we don't want.

00:04:16.839 --> 00:04:20.800
That will lead to worse results. But
if we know that a certain file will be

00:04:20.839 --> 00:04:24.530
relevant, we wanna include it,
and that's what I'm doing

00:04:24.600 --> 00:04:27.640
here.
That is an important part of proper

00:04:27.700 --> 00:04:31.020
engineering. Claude Code
is absolutely capable

00:04:31.360 --> 00:04:35.300
of finding useful files itself.
You don't need to reference them all.

00:04:35.320 --> 00:04:39.040
It's no problem if you forgot a file
that's important, but if you know about a

00:04:39.060 --> 00:04:42.900
file,
explicitly pointing Claude Code at it

00:04:42.960 --> 00:04:46.940
So here I'm pointing it at that,
and then the first task here for me

00:04:46.960 --> 00:04:50.750
related to that file because I'll say,
"Please format this

00:04:50.780 --> 00:04:54.710
file as proper Markdown." So that
is my very specific

00:04:54.740 --> 00:04:58.060
instruction. It's a super simple prompt,
but it's my first prompt, though

00:04:58.740 --> 00:05:02.420
I don't stop here because I already
noticed that in my spec

00:05:02.520 --> 00:05:05.240
file here, there are some problems.

00:05:05.260 --> 00:05:08.980
For example, it describes a users table

00:05:09.400 --> 00:05:12.820
in a certain shape, but as I mentioned,
I'll use a

00:05:12.880 --> 00:05:15.660
third-party library for authentication.

00:05:15.680 --> 00:05:19.440
I'll use the betterauth library, and
that library

00:05:19.500 --> 00:05:23.320
expects a very specific database
structure.

00:05:23.420 --> 00:05:27.160
If I take a look at the schema they
expect, I can see that they expect

00:05:27.170 --> 00:05:30.440
a user table, so singular, not

00:05:30.480 --> 00:05:34.460
plural, with these fields,
and a couple of other tables

00:05:34.500 --> 00:05:37.880
as well. So what I'll do is I'll copy that

00:05:37.960 --> 00:05:40.960
documentation page as Markdown.
Many websites offer these

00:05:41.000 --> 00:05:44.820
nowadays. I could also just copy
and paste all the content,

00:05:44.880 --> 00:05:48.820
but that is the better way,
gives me just the relevant content,

00:05:49.480 --> 00:05:53.080
and I'll go back to my prompt here.
And in there I'll say,

00:05:53.100 --> 00:05:56.640
"Also update the file and update the part

00:05:57.780 --> 00:06:01.150
about the users table and

00:06:01.220 --> 00:06:05.060
auth-related tables." We're using the
betterauth

00:06:05.100 --> 00:06:08.510
library,
which expects a certain database

00:06:08.510 --> 00:06:12.260
And then I provide that article
which I copied as

00:06:12.300 --> 00:06:16.050
extra context because context engineering
is not just about

00:06:16.100 --> 00:06:19.820
inserting your instructions
and pointing at files.

00:06:19.860 --> 00:06:23.700
That's important,
but it's also about providing any other

00:06:23.740 --> 00:06:27.340
that's relevant. So in my case here,
I know that that betterauth database

00:06:27.400 --> 00:06:31.260
documentation will be relevant for
updating this Spec.md file,

00:06:31.700 --> 00:06:35.480
so I'll include it here.
And what I personally like to do is if

00:06:35.700 --> 00:06:39.600
I insert a longer piece of text,
a longer error

00:06:39.610 --> 00:06:43.440
message or an article from the
documentation, I like to use these XML

00:06:43.480 --> 00:06:47.160
tags. That's not required,
but it can help the

00:06:47.260 --> 00:06:50.940
LLM better identify where your

00:06:50.950 --> 00:06:53.620
documentation article, in this case,
starts and ends.

00:06:53.660 --> 00:06:57.500
It's not a must-do,
but in my experience it can help with

00:06:57.540 --> 00:07:01.360
getting good results.
So I'll paste this article in there,

00:07:01.400 --> 00:07:04.200
me, that's all.
That's my complete prompt with the

00:07:04.260 --> 00:07:08.060
instructions,
two instructions in this case about

00:07:08.140 --> 00:07:11.980
and about updating parts of that file,
and then providing the relevant

00:07:12.020 --> 00:07:15.720
context. Now we can send this off.
And I can do

00:07:15.840 --> 00:07:19.160
this by hitting enter,
or since I know that I wanna

00:07:19.220 --> 00:07:23.140
accept any edit requests anyways,
I'll hit shift

00:07:23.200 --> 00:07:26.560
tab to switch to this accept edits on

00:07:26.620 --> 00:07:29.040
mode, and then I'll hit enter here.

00:07:29.050 --> 00:07:32.360
And now I'll let Claude Code do its thing,
read that

00:07:32.400 --> 00:07:35.720
Spec.md file, and then convert
that file to proper

00:07:35.920 --> 00:07:39.280
Markdown. So now here it's done, and
if I take a look at

00:07:39.320 --> 00:07:42.800
Spec.md, I can see
that now in there we have proper

00:07:42.840 --> 00:07:46.620
Markdown formatting.
Now would be a good time to finally read

00:07:46.630 --> 00:07:50.220
that document one more time
and make any changes with or

00:07:50.280 --> 00:07:54.020
without AI that need changes,
and then continue with the next

00:07:54.100 --> 00:07:55.560
steps.