Now, in this lecture, I'll just walk you through a couple
of prompts I'm sending to Cloud Code and how I iterate with Cloud Code.
I'll skip the parts where Cloud Code is thinking and spitting
out plans. And therefore, you can, of course, also skip this lecture
interested in that. At this point, this project is
now actually set up in a way that should allow us to efficiently
work on it with help of Cloud Code. And therefore, of course, typically, I
would set up sub-agents and skills in a proper Cloud MD
file at the very beginning, before starting work on the project.
I did it here step-by-step, whilst actually already starting with the
application implementation, just to give you good examples for
why we would use these different features.
But with that now all set up, we can, of course, continue working on this
application and start adding the actual main
features. And now that users can log in, the next logical
step would be to make sure that we get redirected
to the dashboard route after successful login, that we
can only go to that route if we are authenticated and access
is blocked for users that are not authenticated.
And then, of course, as next steps thereafter,
manage notes. Therefore, that's the next prompt I wanna send to
Cloud Code. I ask it to implement redirecting
the user to slash dashboard after successful
authentication, and I ask it to protect the dashboard
and all other note-related routes, except for the publicly
shared note route, from unauthenticated access.
I wanted to add protection on a per-route level.
That's something I know because with Next.js, you could try to
implement route protection with help of layouts, which is actually discouraged,
so that's some extra piece of context and information I add here so that I
don't have to fix problems later, which I already know about.
And then I tell it to use modern Next.js features and so on to
increase the likelihood of it loading the appropriate skills.
Not something you have to do, and also something you could consider
main Cloud MD file, but something I like to do from time to
time. And then I'll switch to plan mode
thing. So here, it now made another plan, and that looks
good to me, so I'll accept it with edits allowed.
And it'll go ahead and implement that, of course.
Now, with that, if I reload the dashboard route,
as it should, because I did authenticate before.
But if I open up my developer tools in the browser and I
clear that authentication cookie, and I reload, I'm
redirected to the sign-in page, which makes sense because I effectively
logged out. And if I now sign in again with
or if I create a new user, I'm redirected to the dashboard route.
So that's working the way it should, and we can then continue with the next
For the next step, I cleared my context window again,
wanna work on a different task. And I will now send a more
complex prompt to Cloud Code, or the prompt itself is
not super complex, but the task is.
It has multiple steps, multiple features it should work on,
component it should add, and then something it should add to the
route and a new note route it should add.
And I also want it to handle the submission of the new note form and
insert data into the database. And of course, I again rely on
it loading the Cloud MD file and all the necessary context it needs
due to our good project setup. So I'll switch to plan
mode, and then as always, submit this to let it do its
thing. And here's its plan. And I
actually wanna add one more thing, which I forgot.
I wanted to add a logout button to the header.
Of course, that should only show up if the user is authenticated though.
And with that, I'll then clear the
context and start implementing. So now with that,
it's done. I can already see that the header does not look right
though, that white header with the rest being dark
That's something to fix. And another issue I notice is that the
logout button is not initially there.
If I reload, it takes a short while to appear.
And that's happening because with the current implementation, we're checking the
authentication state from the client side after the page is
loaded. I would rather do that when the page is being
rendered on the server before it's sent to the client.
So I'll tell Cloud Code about that too.
And then I'll again switch to plan mode since that
should be a change. It's able to implement like this,
also clarify any things that might be unclear.
And now that it's done, that looks way better.
Clicking logout also works. I can then sign up again,
or in my case, sign in, like this, and
then if I click on new note, I'm taken to the new
note page. And now in here, this is a
rich text editor. I can make this
bold. That works. I can also make it italic,
right now. Of course, I'd like to have a little toolbar
that makes it easier for me, also because right now, I can't insert a
heading, for example. So that's something we'll have to add as
So in a new Cloud session or after clearing the context,
note or edit note page, add a toolbar that exposes the
TipTap tools we want in our app. I point at the Spack MD file here again,
know that in there, all the tools, all the text formats I wanna support are
listed. And again, I'll launch this in plan mode, and as
always, you can be more specific. You can explicitly tell it to
look up the TipTap docs and so on. Here, I trust that my
clean, proper setup ensures that this will happen.
And now with the plan implemented and actually to follow up
changes, I can indeed work with this editor
and add the various features or use the various features in
there. And by the way, of course, in case you are following along, it's
absolutely possible that the results look different for you,
doesn't work right away, not necessarily because your prompts are
bad, but because with AI, there's always a degree of
randomness involved still, no matter how good your setup is.
You can only try to create a setup that increases your chances of ending up
with good results