Modern Creator
Zen van Riel · YouTube

This Claude Code Workflow Ships Real Features

A 21-minute live demo of Zen van Riel adding a real conversation-history feature to his AI Tutor app with Claude Code — four debug iterations included.

Posted
1 years ago
Duration
Format
Tutorial
educational
Views
36.2K
738 likes
Big Idea

The argument in one line.

Claude Code ships a real conversation history feature through a disciplined five-step workflow—onboard, PRD, implement, investigate, fix—that treats the AI as a junior engineer requiring context and yielding working production code after four debug iterations.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A full-stack engineer building a production AI application who wants to see a disciplined Claude Code workflow applied to a real multi-service codebase.
  • A developer with 2+ years of experience who's skeptical of AI coding tools and needs to watch a live debug session with genuine failures and fixes.
  • Someone shipping features with Claude Code who's stuck on how to onboard the model to an unfamiliar repository before asking it to implement.
SKIP IF…
  • You're a frontend-only or backend-only engineer — this demo requires understanding FastAPI, React, and database schema simultaneously.
  • You've never used Claude Code or similar AI agents before — the video assumes you know what a Claude session is and how to interpret its file exploration.
TL;DR

The full version, fast.

Real Claude Code productivity comes from running it like a junior engineer through five disciplined steps: onboard the repo, write a PRD, implement an MVP, investigate failures, then fix with context. The walkthrough adds a persistent conversation history feature to a FastAPI plus React plus Cosmos DB app, asking Claude first to map the codebase into a CLAUDE.md file, then to draft a product requirements document covering scope, success metrics, and GDPR consent, and only then to code. When the feature breaks across four iterations, the fix comes from feeding Claude specific evidence from the network tab and database, not vague complaints. The takeaway: invest in context and verification yourself, because the quality of your debugging input determines how fast the agent converges on working code.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →
Chapters

Where the time goes.

00:0000:33

01 · Cold open — real features vs fake demos

Hook + promise: live-code a real feature with a real workflow, not another toy demo.

00:3404:05

02 · Step 1 — Repository onboarding via CLAUDE.md

Ask Claude to write a CLAUDE.md describing the codebase before touching any feature. Treats the agent like a junior engineer who needs to learn the repo first.

04:0608:40

03 · Step 2 — Product Requirements Document

Prompt Claude for a full PRD (including GDPR compliance) before writing a single line of feature code. Result is better than average professional PRDs.

08:4112:38

04 · Step 3 — MVP implementation

With PRD in hand, ask for the minimum viable implementation. Claude removes the Cosmos DB TTL, adds a list endpoint, wires the toggle flag, and builds the sidebar UI. Build errors appear and Claude fixes them across multiple iterations.

12:3914:58

05 · Step 4 — Test and investigate yourself

Feature does not work on first test. Instead of pasting it broke into Claude, Zen checks the network tab and the database directly — finds conversations are saving but not being fetched.

14:5919:02

06 · Step 5 — Targeted context to fix

Feeds Claude the raw DB document as context. Claude adds the save_conversation flag to the API payload. After one more iteration the feature ships end-to-end.

19:0321:18

07 · Outro — AI community CTA

Soft pitch for the AI native engineering community (Skool). Framed as a reward for viewers who made it to the end.

Atomic Insights

Lines worth screenshotting.

  • Starting a Claude Code session by asking the model to read the repository and create a CLAUDE.md before touching any feature is the discipline that treats the AI like a junior engineer who needs to learn the codebase before being trusted with changes.
  • A product requirements document generated by Claude — including success metrics, data structures, GDPR compliance research via web search, and a consent model sketch — is better than the average PRD from many professional teams, and it takes minutes to produce.
  • Investigating why a feature doesn't work before reporting it to Claude — checking the network tab, confirming whether data was saved to the database, identifying which layer failed — gives the model actionable context rather than a vague 'it doesn't work' prompt.
  • Four debug iterations to ship a working feature is an honest record of what real development looks like — running Claude Code in the background means those iterations cost elapsed time, not focused attention.
  • Removing the time-to-live setting from an Azure Cosmos DB container is a one-line backend change that permanently alters data retention behavior — which is the category of change that requires human verification, not just trusting that Claude described it correctly.
  • The safe conversation flag architecture — passing a boolean from the front-end toggle to the back-end API, which then decides whether to store the conversation — is the clean interface design that Claude produced without being told the implementation approach.
  • Pasting a raw database object into the chat when a feature is saving correctly but not retrieving correctly gives Claude the exact data structure to write the retrieval query against, which is faster and more accurate than asking it to guess the schema.
  • Treating Claude Code like a junior engineer who needs context and directed investigation produces better outcomes than treating it as an oracle that should get it right in one shot.
  • A PRD that ticks off completed features during implementation gives both the human and the agent a living progress tracker without requiring a separate project management tool or a manual status update process.
  • The ability to run Claude Code in the background while doing other work means debugging iterations are not expensive in human time — they are expensive in elapsed minutes and tokens, neither of which compounds the way human attention cost does.
  • GDPR compliance research via web search inside the PRD generation step is the behavior that closes 90% of the compliance gap without a dedicated legal review — the human still verifies, but the model provides a well-researched starting point.
  • A conversation history feature built against a FastAPI backend, React frontend, and Cosmos DB database — from zero to working in one session — is the proof that Claude Code handles real production stacks, not just toy projects.
  • Auto-refresh behavior after implementation is the UX detail that surfaces only when you test the live feature, not when you review the code — which is why end-to-end testing in the browser is the final quality gate, not the build step.
  • Exporting a PRD to a project management tool like GitHub or monday.com converts a Claude-generated document into a source-of-truth that the whole team works from, not just a Claude session artifact.
  • The gap between 'the feature is done' and 'the feature works correctly' is the gap that only manual testing closes — which is why Zen's workflow includes browser testing, network tab inspection, and database verification before declaring any phase complete.
Takeaway

Write a PRD Before You Write a Line of Feature Code

Claude Code workflow

Zen van Riel's five-step workflow — onboard, PRD, implement, investigate, fix with context — ships real features with Claude Code rather than producing endless toy demos.

01Cold open — real features vs fake demos
  • Real feature, real workflow, real debug iterations — the promise is not a toy demo
02Step 1 — Repository onboarding via CLAUDE.md
  • Ask Claude to write a CLAUDE.md describing the codebase before starting any feature work
  • Treating the agent like a new engineer who needs to learn the repo first changes the quality of every subsequent output
03Step 2 — Product Requirements Document
  • Prompt for a full PRD including compliance before writing any feature code — scope the work before executing it
  • The PRD output from this workflow often matches or exceeds average professional quality
04Step 3 — MVP implementation
  • With a PRD in hand, ask for the minimum viable implementation — bounded scope keeps the feedback loop manageable
  • Build errors are expected and Claude fixes them across iterations — the loop is the workflow, not a failure
05Step 4 — Test and investigate yourself
  • Feature does not work on first test — check the network tab and the database directly before asking Claude anything
  • Targeted diagnosis is the skill — finding that conversations were saving but not fetching is information that makes the next Claude prompt precise
06Step 5 — Targeted context to fix
  • Feed Claude the raw database document as context — it fixes the right thing when it sees the actual data
  • One more iteration after targeted context and the feature ships end-to-end
Glossary

Terms worth knowing.

PRD
Product Requirements Document — a written spec that defines what a feature should do, who it's for, and what constraints it must respect, used to align the AI before it writes any code.
CLAUDE.md
A markdown file placed at a project root that gives Claude Code persistent context about the codebase structure, conventions, and behavior rules for that project.
FastAPI
A modern Python web framework for building high-performance APIs, known for its automatic OpenAPI documentation and async support.
Azure Cosmos DB
Microsoft's globally distributed NoSQL database service, used here to store conversation data with configurable TTL (time-to-live) for automatic expiration.
conversation history sidebar
A UI panel — similar to ChatGPT's left sidebar — that lists past conversations a user has had, allowing them to revisit or continue previous sessions.
TTL (time-to-live)
A database setting that automatically deletes records after a specified number of seconds or days, used here to purge conversations after 30 days.
onboarding step
Zen van Riel's first workflow step: asking Claude Code to read the codebase and write a CLAUDE.md before touching any implementation, so the agent understands structure first.
debug iteration
A single cycle of identifying a bug, applying a fix, and testing again — Zen's workflow expects multiple iterations as normal before a feature is complete.
repository context
The collection of files, folder structure, and codebase details an AI agent reads to understand a project before making any changes.
Resources

Things they pointed at.

Quotables

Lines you could clip.

04:30
Even though this tool is called Claude Code, I'm not asking you to code yet.
Counterintuitive line that reframes the whole tool — stops viewers in their tracks.TikTok hook↗ Tweet quote
15:10
You do not want to go back to Claude and just type, uh-oh, the feature doesn't work.
Punchy, universally relatable frustration-to-lesson pivot.IG reel cold open↗ Tweet quote
07:45
This is better than an average product requirements document.
Bold credibility claim backed by what is on screen.newsletter pull-quote↗ Tweet quote
13:20
I could be doing something else entirely in the background and working basically in parallel to Claude Code.
Nails the async value prop of AI coding agents in one sentence.TikTok hook↗ Tweet quote
The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

analogystory
00:00Today, you and I are gonna build a real feature using Cloud Code instead of all these proof of concepts and fake demos that you see all around YouTube. I'm gonna add a new feature to my AI engineering tutor app, and this feature is gonna be about the conversation history. Because if you type a question right now, like, what is AI engineering?
00:17It's saved in a database for thirty days for abuse purposes, but, otherwise, it's automatically deleted. But some people like to actually have a chat history like you have in ChatGPT here on the left.
00:27But right now, I have not implemented this feature properly, so let's go ahead and see how we can implement it together with Cloud Code. So this is the repository, and we've got the front end and back end application of their repository running already. I'm gonna go and open up a new terminal here because then we're going to start our Cloud Code session, and I can do that by just typing Claude.
00:47There we go. Now this is actually a completely new Claude session. I don't have a Cloud Markdown file or any special instructions.
00:55What I suggest you to do always with the iCoding is to not just jump into the ask of creating this conversation history feature, but first, the AI agent actually get a better sense of how your repository works. So what I'm going to do is I'm going to ask it to create a CLODE in the file to describe the structure of the front end and back end of this project, specifically detailing how conversations are are not stored at the moment.
01:27The end goal is going to be that we will implement a new feature to show and save conversations permanently.
01:40But for now, you learning the repository is the most important focus.
01:50And by doing this, you're really treating cloud as, for example, a junior engineer, because a junior engineer, when they join a new team, really just needs to learn how the repository works first before they can add and build new features. So at this moment, you see that it's going to go ahead and search through all of my different files.
02:08And this project actually has a couple of folders, so I'll kind of collapse them right now. You've got a back end folder, a cron service folder, a embedding service folder, and a front end folder.
02:18There's some other folders here and there, but those are the actual services that this application relies on. But for this feature, we only have to edit the back end and the front end because these other folders are basically for ingesting my YouTube videos so that the AI system that this application uses is actually using all of my content to answer questions properly.
02:37What you can see now is that cloud is really investigating all of these different files in order to find all the references to how conversations are actually saved at the moment. And you can see that it's starting to create that cloud dot markdown file with the detailed project structure documentation.
02:53Oh, so it actually happened to be done right there. You And can see that it described the architecture with our FastAPI back end, the key components, authentication, API endpoints.
03:03This is important because you can indeed see that we already have an endpoint to retrieve a conversation document. So we have sort of a partial implementation already, and it knows how the front end is built with React plus Vite, which is very good.
03:16And then it's got a nice overview of all of these different services that go along with it as well as the data structure for the conversation history. It's very impressive that it was able to capture all of this in just one minute of time, so that's very good. And you can indeed see what the conversation flow looks like in this application again.
03:34So that is very cool. Now in a terminal, it asks me, do you want to make this edit to Cloudmarkdown? Yes.
03:40And I think we'll just gonna say yes and don't ask again so we can make those changes and not have to ask every single time. Alright. So it's updating its seduce, and it should tell me that it's ready for new inputs.
03:51Yep. There we go. So what I wanted to do now is create a requirements pack for this new conversation history feature, and I'm going to kinda describe what I described to you to Claude so that it's aware of how it's currently being implemented and how we want the final implementation to look like.
04:06Create a product requirements markdown for the new conversation history feature.
04:16Right now, convos are saved for thirty days for abuse detection, but not visible in the user's UI.
04:28By toggling the existing but disabled history button, users should be able to save their Convos permanently and retrieve them like in other AI UIs.
04:51Note that we need to be GDPR compliant, so it's good if there is a privacy.
05:00I suppose we can probably call this a privacy consent form that the user needs to agree with.
05:12For now, work out the requirements. Doc, and don't code yet.
05:20So here too, I'm not asking you to code yet. So even though this tool is called Cloud Code, I'm not asking you to code yet. I first wanted to create a proper requirements document so that from there, it can actually keep track of what it has and has not implemented.
05:35And even if we quit the session and come back tomorrow, we can actually just continue from where we left off. So that's why you want to have those product requirement documents. So I'm gonna go ahead and make some tea, and then I'll be right back with you when it's done.
05:48So, actually, Claude is still thinking about this, but I really wanted to share some progress already with you because some of what I'm seeing here is super impressive and shows you why so many people love Cloud Code. So first of all, if we have a look at what it's already doing, it's researched the entire conversation history UI components which already exist together with how the conversations are being stored.
06:08But what I really like is that regarding this GDPR compliance requirement, it actually does a web search to figure out if there are some existing examples for this. Now things like GDPR and being compliant with other things like ISO are really aspects that you need to verify as a human.
06:23You can't rely on AI tools to do everything for you, but by doing a web search here, it's going to at least get 90% of the way there, and I think that is already really great and saves me a lot of headache. So I will have to verify it, but it's a really great start. Oh, and look at that.
06:38We actually have a very nice product requirements document. And in this product requirements document, there are a lot of aspects of the solution like the success metrics, which I like to see apart from just the functional requirements, like how we can see here that one of the goals is to have 30% of active users enable the conversation history feature within thirty days.
06:57But right now, we're really just concerned with making this work from a functional perspective, so let's have a look at the problem statement. The current state is that conversations are deleted after thirty days. That's correct.
07:08Users lose conversation context when starting a new session. That's correct. You don't have any conversation management in UI.
07:14All of that is completely correct, and it got that from reading all of the code and a little bit of my initial input, of course. And, of course, here you can see the user pain points, like how there's context loss, there's no reference system, they cannot go back to previous conversations, etcetera. What I really like about this is that everything is segmented very well.
07:32We have core functionalities like the conversation history toggle, the privacy consent flow, etcetera. I mean, this is exactly what you want to see in a PRD. And to be quite honest, this is a better product requirements document than I see in a lot of professional use cases at the moment.
07:49So, sure, AI is not perfect, but I'm just telling you that this is better than an average product requirements document. Is it perfect?
07:57No. But this is really extensive, and it goes on for a very long time. And it doesn't just talk about the functionality, It talks about the success metrics.
08:05It talks about the potential data structures that it needs to implement, and it even has a little consent model design here. I mean, that is very cool. Right?
08:12So let's go ahead and actually just implement an MVP of this feature because the consent model is something that I'm gonna work on for sure. It's just that right now, I want to take things step by step, and I just want the ability for users to select their previous conversations simply by ID. It doesn't need to have a fancy name in the left side of the application, and then, of course, the saved conversation should persist for more than thirty days.
08:38So let's go ahead and ask Claude to implement that. I want us to first implement an MVP of this PRD, So that's minimum viable product.
08:48Right? It's smallest unit of successful work that you can create to implement a feature like this.
08:54And then we're going to say the idea being that the user can select their conversations via a list of conversation IDs on the left.
09:07This, of course, implies that Convos should be persisted in the database over thirty days.
09:17Right now, the toggle can just be enabled without the consent form. We will implement this later.
09:29And the great part is that you can even ask Claude to then update the PRD and make sure that it ticks off the boxes of the features that it has or has not implemented. And, of course, you can also move this PRD to your project management tool of choice, like GitHub or money.com, whatever you're using.
09:45You can definitely export these PRDs to a system like that as well. Alright. So it has a couple of to dos that it's gonna do.
09:52It's gonna remove the time to live from conversations container to enable permanent storage, and this is a setting on the Cosmos DB, which is a NoSQL database, uh, where the container will automatically remove data that has not been touched for thirty days. So that is exactly why we need to remove it because if you have a conversation stored right now, you wanna make sure that it's stored indefinitely unless a user deletes it.
10:15Right? And then, of course, we need a new API endpoint to list all the conversations. We need to enable the conversation history toggle in the sidebar.
10:22We need to create the conversation list UI components, add a conversation selection and switching functionality, and then, of course, we need to test end to end conversation persistence and retrieval. So all of those singular steps sound great to me, and you can see that it's actually starting to create some code changes.
10:39Now this is a terminal based coding app, so you can check out the diffs like so. But what I like to do is just check out what's going on in Visual Studio Code. So I can actually go to my branches here and see that in customers DB p y, it's changing a couple of things.
10:54It removes that default TTL, and then if we scroll down here, you can see that, for example, it's creating a new endpoints or rather function to be able to retrieve all of the conversations for a given user. So let's let it cook, and I'll be right back with you once it's done.
11:13Alright. So what you see now is that it actually has ticked off most of its to dos, but we do need to test the end to end conversation persistence and retrieval. So it seems like it wants to actually run NPM run build just to see if there are any TypeScript errors, so I'm actually gonna say yes to that.
11:29That's totally fine. I don't expect there to be a lot of errors, but you never know. And you can actually see here that there is an error when it's trying to build the full project, so that's totally fine.
11:39It's gonna go back into the code and try and fix that up, and then I'm expecting that it's going to just run everything again once it's done with fixing this. Now it's gonna build again.
11:50Yep. There we go. It's gonna build again, and hopefully we get no errors now.
11:53Nope. We do still get an error. Response data is possibly undefined, and this is exactly what the actual AI coding process looks like sometimes.
12:00It's not gonna get it right in one go, but this is running completely in the background. It's not actually interrupting my regular development flow, so I could be doing something else entirely in the background and working basically in parallel to Cloud Code.
12:12So, you know, this is totally fine. Sometimes it just needs a couple of iterations to fix stuff, and now you can indeed see, boom, it's actually able to build the entire project. We don't wanna build the project in development, but is good to know that there are no build errors.
12:27So now what it's gonna do is it's gonna test the back end. I think that's a good idea, but you know what? We are here anyway, so let's go and just test it ourselves.
12:35I'm gonna go ahead and say no. And now let's just go ahead and reload our front end and check out what actually happened in practice. So if we check out the other terminals, we have the front end application here and the back end here.
12:47So, technically, you know, this all hot reloads and changes, but just to make sure that nothing strange has happened, I'm just gonna reload both the front end and the back end just to make sure. Right?
12:58And then what we're gonna do is we're gonna go back to my browser and then check if the feature was actually implemented properly. So I'm gonna go to my browser, and then I'm gonna go back to the front end application, and it's gonna give itself a full refresh. And now you can see that this conversation history button has a toggle.
13:14At this point, if I ask a question now, it should be saved in that conversation. So I'm gonna go ahead and paste the same question here. And then once it's done with answering this, I do expect that it's gonna show on the left here in the sidebar.
13:27So let's let it ramble on about AI engineering, and then there we go. So what I'm going to do now is I'm going to give this page a full refresh, and then what we're gonna see is we are and then, unfortunately, we see that it doesn't work.
13:41So what we need to do is we actually need to go back into Cloud and report that the feature doesn't work, but we need to explain why it doesn't work. So what do we do in a situation like this where the implemented feature doesn't work? You do not want to go back to Claude and just type, uh-oh, the feature doesn't work.
13:56Why don't you just do a little bit of investigation work yourself so you can give the AI model the right context so it can actually fix the feature? What do I mean by that? Well, in this case, we can actually have a look at our network tab in our browser to get a better idea of if the conversation is being stored at all.
14:13What I mean by that is that I can ask the question, what is AI engineering again? And you can see that it creates this request for the message response, and that is indeed being streamed in at the moment.
14:25Now I'm just curious to see what happens once the message is done generating. So the message finishes, and there's no extra request.
14:32So at the very least, we know now that as far as the initial implementation goes, the front end is not responsible for saving the conversation. I suppose then in the message back end API, the conversation should have been stored to the database, but that is not happening.
14:47So now that we know that context, we can actually formulate the problem in much more detail to cloud, which will improve the chance that it can actually fix the feature. So I'm gonna go back to Visual Studio Code, and then I'm going to type the following. I tested this manually.
15:03It seems the toggle works quite well, and the convo is not saved if the toggle is off.
15:11However, if the toggle is on, the conversation is also not saved.
15:19I see the front end does not make a new call to the back end after a message is done, which makes sense.
15:29But then I assume the message back end does not properly save the conversation or something else is amiss.
15:43So I don't know exactly what's going wrong. I'm not going to investigate that completely because if I did that, I might as well code the feature myself. But I do take the effort to investigate a little bit and to test a little bit further than just seeing that the UI doesn't work.
15:57Because if you can give your AI models just a little push towards the right direction, they will figure things out much faster and much more accurately, just like how a junior engineer would operate. So that's why you should always give these AI models the right context.
16:11But the proof is in the pudding, so let's go ahead and let it search for anything that it wants and reimplement the solution and see if then it all works. Looking at our cloud session, it seems to do a couple of things differently now. For example, in the request for the message, it actually seems that we now need to pass a safe conversation flag, which is probably gonna be just a false or true.
16:33And whether it's false or true depends on what the front end toggle looks like. So if you've enabled the conversation history, safe conversation will, of course, be true. If you've not enabled the conversation history toggle, then the safe conversation value is going to be false.
16:47So that makes all the sense because based on that flag, the back end will know whether or not the conversation actually needs to be stored for a longer period of time. So that makes sense to me. Alright.
16:56What we're gonna do now is just test this implementation again. So I'm gonna fully refresh the page, and then once again, we're going to ask the question, what is AI engineering?
17:05Now if we check out that message request again and I check the headers or actually rather the payload, you can see here that in the payload, save conversation is set to true. So that's actually a good sign.
17:15Now let's let it just generate the entire response, and then we're going to, of course, refresh the page once again. So I'm gonna refresh the page, and it still doesn't work.
17:26So now I'm actually going to go into the database and see if the conversation itself was stored because that will give us a good sign, and we can pass it on to the AI model so that it understands that the data itself might have been stored, but it's not being retrieved properly. So in the database, I'm gonna go ahead and refresh my conversations, and you should indeed be able to see all of these conversations that I recently created.
17:47So it does seem like the conversations are being saved, but they're not being retrieved properly. And I'm actually going to take this and copy the entire object because it will give Cloud a good example of how the conversation has been stored.
18:00So I'm going to let it know that the conversations seem to save in the DB correctly, but they are not fetched properly.
18:12Here is an example of a stored conversation, and then it's gonna paste all of that text in.
18:23There we go. So this is another great recommendation. If you are working on a feature where there's some database interactivity, you can just go into the database and check whether or not things have been saved correctly.
18:34And if they have been saved, you can just let Cloud know. Technically, you could let Cloud connect to your development database directly, but it is very convenient sometimes to help it along yourself and just check out the data and make sure that things are or are not saved. Alright.
18:47It seems to be done. Here's hoping it did well. So we're gonna go ahead and check out the website again, and oh, it looks like it actually auto refreshed this.
18:55So this is great. You can actually see these conversations in here. That's a really good sign, but we have to test a little bit further than that.
19:01Right? Let's go ahead and disable the conversation history, and now what I'm going to do is type the following.
19:07I do not want you to save this. It's not like the AI model is actually going to listen to this specific request, but by typing something else, we can actually recognize whether or not this conversation will be saved. So let's see if when we refresh the page, this conversation will show up or not.
19:24So I'm gonna go ahead and refresh the page, and then let's go ahead and enable conversation history, and it's not in there. Now let's go ahead and do one more test.
19:34Please save this chat. And then we should see this show up on the left side here once the message has been done. Alright?
19:43So there we go. Yep. There we go.
19:46Please save this chat. But funnily enough, there is a little bit of a UI improvement that we need to make that I just realized. So as you can see here, there's only four items that can be shown at once and have to scroll.
19:57That's actually not very obvious that there even is a scroll bar, so that's something I'm gonna pick up in the second iteration, but at least the interactivity here does work. Now, of course, the AI response here is that it doesn't have the ability to save the chat conversation. Functionality would need to be handled by the platform you're using to access me, but that's exactly what we're doing here.
20:16So, of course, the AI model is not completely aware of all of the features that are on my page right now, but that's another thing that I could change. I could improve the system prompt and just tell it that there is an explicit toggle that the user can enable or disable. So clearly, there's still a lot of work to do, and this implementation is also missing the dialogue form, but it's starting to really come together.
20:36Now I have one more surprise for you because you got so far into the video, and that is me sharing a secret with you because not that many people actually care about investing in their AI coding skills or getting ahead in their careers. But you clearly do because you watched this video all the way until the end. And I just wanted to share with you that AI can be such a powerful tool to actually accelerate your career.
20:56I grew to senior much faster thanks to AI coding, and you can be part of that too. If you check out the link in the description below, you can join my AI native engineering community, where you can learn way more AI coding techniques as well as how to build full, real production AI systems like the one that I demoed in the video today.
21:14I really hope to see you there because you've got the right potential. Bye bye.
The Hook

The bait, then the rug-pull.

Most Claude Code tutorials demo toy projects that never see production. Zen van Riel opens by naming that problem directly, then spends 21 minutes proving the alternative — shipping a real conversation-history feature live, bugs and all.

Frameworks

Named ideas worth stealing.

00:34list

The 5-Step Claude Code Workflow

  1. Step 1 — Repository onboarding (write CLAUDE.md first)
  2. Step 2 — PRD before code
  3. Step 3 — Implement MVP only
  4. Step 4 — Test and investigate yourself
  5. Step 5 — Provide targeted context to fix

A repeatable process for shipping real features with AI coding agents — treat Claude like a junior engineer, scope work with docs, and do your own triage before sending bug reports back.

Steal forany Claude Code / AI agent coding tutorial or workshop
12:39concept

Investigate Before You Report

When a feature fails, spend 2-3 minutes in the network tab or database yourself before reporting to Claude. The extra context cuts iteration count roughly in half.

Steal fordebugging segment in any AI coding content
CTA Breakdown

How they asked for the click.

VERBAL ASK
19:03product
If you check out the link in the description below, you can join my AI native engineering community

Soft, earned — framed as a reward for viewers who made it to the end. No hard sell, no discount urgency.

FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

app demo — chat history toggle off
hookapp demo — chat history toggle off00:01
VS Code — Claude terminal open
setupVS Code — Claude terminal open00:34
Claude reads repo files
valueClaude reads repo files02:31
Claude drafts PRD in terminal
valueClaude drafts PRD in terminal05:11
PRD open in VS Code editor
valuePRD open in VS Code editor07:51
Claude implementing — to-do list
valueClaude implementing — to-do list10:31
Azure Cosmos DB — conversations saved
valueAzure Cosmos DB — conversations saved13:04
Python backend code being fixed
valuePython backend code being fixed15:50
Sidebar showing conversation history
payoffSidebar showing conversation history19:02
Working feature + CTA
ctaWorking feature + CTA21:10
Frame Gallery

Visual moments.

Chat about this