YT YouTube2Text

YouTube2Text → Transcripts → How Senior Engineers Actually Build with AI in 2026 | Build a Full Stack Job Applications Platform

How Senior Engineers Actually Build with AI in 2026 | Build a Full Stack Job Applications Platform — Transcript

by JavaScript Mastery · 29,691 words · 4,267 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Something changed this year. Every
0:02developer I know is quietly asking the
0:04same question. Do the skills I spent
0:07years building still matter? It's a fair
0:10question. AI writes better code every
0:13month. The gap between junior and senior
0:16is closing. And the more you delegate,
0:18the more the output starts to look the
0:21same. Generic and inconsistent. It's
0:24impressive for 5 minutes of glory on X,
0:27but becomes impossible to maintain by
0:30the third feature. But that's not the
0:32real story. AI doesn't make developers
0:35less valuable. It makes the gap between
0:38developers with a system and developers
0:40without one larger than it's ever been.
0:43Anyone can open up Clawude and get code
0:45out. That's easy. What almost no one
0:48figures out is how to give the agent
0:50enough context, structure, and direction
0:53to build something that holds together,
0:55something you can ship, maintain, and
0:58trust. That's the actual skill, and it's
1:02completely learnable. This is Job Pilot,
1:05a full stack AI agent that finds jobs,
1:09scores each role against your profile,
1:12and then sends real browsers across the
1:15open web to research the company behind
1:18every listing. It writes your cover
1:20letter and tailor your resume to match.
1:23This application would have taken a team
1:26of developers at least a month to build.
1:29Now, I built it on my own in a couple of
1:32days. without writing a single line by
1:35hand. And by the end of this video,
1:37you'll have built it, too. Same stack,
1:40same way I did. If you know basic
1:42JavaScript, you can follow along. But
1:45the app isn't why you're here. You're
1:48here for this. Five open-source agent
1:50skills: architect, remember, review,
1:54recover, and imprint. They'll give your
1:57agent memory, focus, and the ability to
2:00ship without drifting. You install them
2:02once and then use them on every project
2:04after today. They're free, open- source,
2:08and completely yours after this video.
2:10You can get them from a GitHub repo down
2:12below. And I also took the time to write
2:14a full guide covering exactly how to use
2:17each one of these skills in more detail.
2:19I'll put it in the description, too.
2:21Now, the stack next.js GS16, INSForge
2:25for the back end, browser base and stage
2:27hand for real browser automation, GPT40
2:31for intelligence, PostHog for analytics.
2:34By the end, you won't just have a
2:36working AI agent. You'll have a system
2:39for building anything. A system that
2:42doesn't get replaced by the next model,
2:44but instead gets stronger every time you
2:46use it. We are now at a time where one
2:49engineer with the right system has no
2:51ceiling on what gets shipped. So let's
2:55build.
3:06Before we touch a single tool, give me 5
3:09minutes to tell you about the part that
3:12decides whether your build ships or
3:15falls apart halfway through. There's no
3:17quote in this section yet. It's the most
3:20important one in this entire video
3:22because this is the process of how I
3:24think before I write a single prompt.
3:27Without it, even the best model will
3:29drift. It'll start contradicting itself
3:32and just break your codebase. If you've
3:35felt that, you know what I mean. And if
3:37you haven't, first of all, you're crazy.
3:40Great job. But you [music] most likely
3:42will. The problem is that most
3:44developers using AI do the same thing.
3:48They open up the editor, describe what
3:50they want, the code appears, and they
3:53react to whatever comes out. Sometimes
3:55it's great, sometimes it's broken. Fix
3:58it, move on, and repeat. That's great
4:01for demo apps, but that workflow has a
4:05ceiling, and most devs hit it fast. The
4:08problem is that AI has no idea of what
4:11you're building. It knows what you said
4:13in the last message, maybe a few
4:15messages back, but it doesn't know the
4:18decisions you made 3 days ago, what you
4:21decided not to build, your conventions,
4:24your folder structure, or where your
4:26project stands today. So, it guesses and
4:30those guesses compound. 3 weeks in, your
4:33database is full of contradictions that
4:36nobody can fully explain. So, here's how
4:39to fix it. The first half of the fix is
4:43context. Not just telling the agent what
4:46to build, but giving it a complete
4:48picture of the system it's building
4:50inside of. For job pilot, I wrote nine
4:53context files before the agent touched
4:56the line. What the product is and who is
4:58it for? architecture, folder structure,
5:02code standards, UI rules, design tokens,
5:06library specific patterns, a build plan,
5:09and a living progress tracker that
5:11updates as we go. Nine files so that the
5:15agent never has to guess. It is some
5:18real time upfront, but you only have to
5:20write them once. And then these files
5:23travel with the project for its entire
5:25life. And if you keep watching, I'll
5:26show you how we can set them up together
5:28when we start the project. Now, the
5:31second half of the fix are agent skills.
5:34In my previous video, I used spec files.
5:37One spec per feature each build session.
5:41It worked, but it was pretty heavy as
5:44every feature needed a new document. But
5:47this time, I improved that workflow.
5:50What you're watching today is the latest
5:52workflow I'm working with after years of
5:55improving it. This time I replaced specs
5:58with something better. Five agent skills
6:02built from real production builds, real
6:04failures I've encountered, and real
6:06sessions where the agent drifted and I
6:09had to figure out why. Each skill came
6:11from a specific problem that I kept
6:13hitting until I refined the solution.
6:16And each one is just a command you run
6:19inside of your AI session. Here's what
6:21they do and what they prevent. First one
6:23on the list is architect, which you run
6:27before any complex feature. Without it,
6:30you start typing a prompt, the agent
6:33builds, and then halfway through you
6:35realize you never decided how O would
6:38work for this. Your agent just made a
6:40guess, and now you're refactoring with
6:43it. When you run architect, it reads
6:45your context files, asks focused
6:48questions one at a time, surfaces the
6:50decisions you haven't made yet, and
6:52produces a plan. That's the conversation
6:55you should be having before every
6:57serious feature. And now it happens
7:00automatically. The second skill is
7:02called remember. You use it at the end
7:05of every session. Without it, every new
7:08session starts from zero. You spend 10
7:11minutes reexplaining what was decided
7:13yesterday or you don't and the agent
7:16contradicts itself by lunch with it. You
7:19run remember when you wrap up it
7:22compresses what happened, decisions
7:24made, patterns established, progress
7:26completed into a memory file. Then the
7:28next session loads it on open which
7:31gives you continuity without
7:33reexplaining.
7:35Then there's review which you run after
7:38a feature is built. Without it, the
7:41agent finishes a feature 400 lines. You
7:44skim, you commit, and 3 days later you
7:47find a bug. With it, you run review. It
7:51checks if the implementation matched the
7:53plan, if it respects your architecture
7:55boundaries, and if it's production
7:57ready. It then returns issues by
8:00severity, critical, important, minor,
8:04and it never autofixes things, so you
8:06stay in control. I also came up with
8:09recover for when things break. Without
8:12it, something's wrong. You're 4 hours
8:15into a session. You don't know if it's a
8:18targeted bug, a polluted context, or a
8:21wrong assumption from earlier. So, the
8:24AI starts spiraling, and you spiral,
8:26too. With it, you run recover. It
8:30diagnoses which failure mode you're in
8:33and gives you the right correct
8:34response. That's one prompt instead of a
8:37very frustrated afternoon. And finally,
8:41there's imprint, which I use after
8:43building any UIs because without it,
8:47three sessions in your buttons all look
8:50different. spacing is a tiny bit off and
8:53your design system has mistakes that you
8:56didn't really notice with it. When you
8:59run imprint, it captures the new
9:01components patterns into your UI
9:03registry. So you run it across the
9:05codebase, it finds the inconsistencies
9:08and produces a fixed list. That way the
9:11design system stays coherent across
9:14every sessions. Five skills handles
9:18every serious failure mode developers
9:20hit when building with AI agents. Drift,
9:24inconsistency, broken sessions, UI
9:27chaos, and lost memory. One skill for
9:31each one of them. It took a lot of trial
9:33and error and frustration to come up
9:36with them, but here they are, and
9:38they're open source, not just locked to
9:41this project or this stack or this
9:43agent. You can install them once and use
9:46them anywhere. So, I'll leave the link
9:48in the description. And to make it even
9:51easier, I've also put together a guide
9:54covering exactly how to use each skill
9:57in more detail, when to run them, and
10:00how to set up your own context files for
10:02any project you build. I'll put it in
10:04the description, too. So, here's the
10:07full loop. Start every project by
10:10writing context files. nine documents
10:13that give the agent complete knowledge
10:15of what you're building. That's the
10:17foundation. And I just realized that I
10:19didn't go into too much depth about the
10:21nine files in this crash course, but I
10:24did write more about them within the
10:26guide that I just mentioned. So you can
10:28check it out there. But these files are
10:30the foundation. Then you build feature
10:33by feature. Before any complex feature,
10:36run architect. After you implement it,
10:39run imprint if it's UI. review if it's
10:43complex and at the end of the session
10:45remember and when something breaks call
10:48recover context makes sure the agent
10:52knows your system and the skills make
10:54sure that every session is focused every
10:57feature is reviewed and that nothing
10:59gets lost between conversations. That's
11:02the system and it is simple on paper,
11:06but what matters is using it on a real
11:08project under real pressure. And that's
11:11what the rest of this video is for. Here
11:14you just heard about some new skills and
11:16new concepts that you might end up
11:18using. But if you continue watching
11:20until the end, I'll show you how you can
11:23actually use them to build job pilot.
11:26every feature, every session, same
11:28workflow and to also be able to use them
11:31across all of your future projects. And
11:34if you want to go deeper, the Agentic
11:37Dev course teaches all of this from the
11:40ground up, the fundamentals, the
11:42architecture thinking, and the patterns
11:44that made me come up with these five
11:47skills in the first place. So, within
11:49the course, I'll take these skills apart
11:51and show you how you can make yours.
11:54Those are the patterns that make AI work
11:56on serious projects. So, I'll leave the
11:59weight list link in the description so
12:01you can know when the course is out. So,
12:04now that you understand the workflow,
12:06let's learn it and practice it in
12:08action. Time to build.
12:13That's the system and the product you
12:15build with it is almost beside the
12:17point. If you swap job pilot for
12:20anything else, the workflow won't
12:22change, but you still need a stack to
12:24build on. So here's what we are using
12:27for this build and why each piece earns
12:30its spot in an app like this. For the
12:32entire back end, we'll use ins. Job
12:36pilot needs three things on day one. O,
12:40a database and file storage. Almost
12:43every single app needs this. Google and
12:46GitHub login, tables for profiles and
12:49jobs, and a bucket to hold resume PDFs.
12:52Ins gives you all of this in one
12:55platform. And the part that matters for
12:57this is the MCP server because your
13:00agent connects straight to your backend,
13:02reads the live schema, and wires things
13:05all on its own instead of guessing
13:07against an API it half remembers. And
13:10the free tier covers everything that we
13:12built today. So, while we're here, let's
13:14immediately create an account. Click the
13:16Ins link down in the description, sign
13:19up, and you'll be redirected to your
13:21dashboard so that later on we can
13:23immediately start using it. For browser
13:25automation, you'll use browserbase along
13:28with their AI browser SDK, Stage Hand. A
13:32big chunk of Job Pilot runs in a real
13:34browser, reading any job URL you paste
13:38in and sending an agent across the web
13:41to research a company before you apply.
13:43You don't want that running on a
13:45headless browser on your own machine
13:47because it crashes and some companies
13:49can detect it as a bot. Browserbase
13:51instead gives you a real managed browser
13:54in the cloud with session recording and
13:57a live view. You can drop straight into
13:59the app so users watch the agent work.
14:02Stage hand sits on top of that and lets
14:05the agent read and pull data from any
14:07page in plain language instead of using
14:10the brittle CSS selectors. Once again,
14:13it's free to start and everything we'll
14:15do will fall under that free plan. Click
14:18the special link down in the description
14:20so you can follow along and see exactly
14:22what I'm seeing later on when we set it
14:24up. For now, just creating an account is
14:27enough. And for analytics, you'll use
14:30Post Hog. Once people are searching,
14:32researching companies, and tailoring
14:34resumes, you want to see what's actually
14:36happening, which actions get used, what
14:39lands, and where people drop off.
14:42Posthog roles analytics, session
14:45replays, and feature flags into one
14:47tool. And it's super quick to wire up
14:49thanks to their Post Hog wizard. It'll
14:51power your full analytics and help you
14:53use this new workflow that I'm teaching
14:55in this video with so much more
14:57potential because you'll make educated
14:59decisions on what you want to build now
15:01that you can actually build super fast,
15:04allowing you to build the features that
15:05your users actually want. Once again,
15:08their free tier is super generous and
15:11I'll leave the link down in the
15:12description so you can create an account
15:14and later on we can just one-click
15:16install it with a wizard. So, if you
15:18haven't, pause the video and create
15:20accounts as we'll be using them within
15:22the first couple of lessons. If you've
15:24done that, perfect. Now we are ready to
15:27build job pilot feature by feature while
15:30following this workflow that I taught
15:32you in the crash course but that we'll
15:34now together explore throughout the full
15:37build. So let's go.
15:42Okay, I hope you're ready to get started
15:44developing our application in this new
15:47agentic workflow that I want to teach
15:49you. We'll start straight from the
15:52beginning by creating a new empty folder
15:54on our desktop. And you can go ahead and
15:57call it something like job pilot, which
15:59is going to be the name of our
16:01application. And then simply drag and
16:03drop it into your VS code or cursor or
16:06any other text editor or IDE that you
16:09use nowadays. I mean, even the concept
16:11of what a text editor is is changing
16:14nowadays. Cursor and Codeex for some
16:17time have been using this view where on
16:19the left side you have a list of
16:20conversations you have with your agents.
16:22In the middle you have the actual
16:24conversation contents and then on the
16:26right you can have either code or a
16:28preview of the browser. Recently VS Code
16:30came up with that option as well. You
16:32just need to search for the agents
16:34window or click the button in the top
16:36right and it'll open up something that
16:38looks like this where no longer you have
16:40the files on the left side and then the
16:42code in the middle and that's it. where
16:44you have a list of sessions on the left
16:45side and then the actual conversation in
16:48the middle. Love it or hate it, what it
16:50means to be a developer or an engineer
16:52is changing. And that's exactly the goal
16:55of this video to guide you through that
16:57transition smoothly and to help you stay
16:59on top of it. So now that we have an
17:01empty project, go ahead and open up your
17:03integrated terminal while that still
17:05exists. Jokes aside, I think there's
17:08always going to be place for a terminal
17:10and create a new Nex.js application. You
17:13can do that by running mpx create next
17:16app at latest and then just dot to
17:18create it within the current directory.
17:20It'll ask you whether you want to
17:21install the create next app installer.
17:24So just go ahead and say why yes. And
17:26it'll ask you some questions such as
17:28would you like to use the nextgs
17:29defaults. In this case, we're going to
17:31proceed with that as it's going to turn
17:33on TypeScript, ESLint, no React
17:36compiler, T1 CSS, no source directory,
17:39app router, and the default agents.mmd
17:42file. So, let's go with the recommended
17:45options. Give it a minute to set
17:46everything up. Once that's done, you
17:48can, of course, go ahead and run mpm
17:50rundev to spin up the project on
17:53localhost 3000 and then open it up
17:55within your browser. This is new. I
17:57commandcllicked it expecting that it's
17:59going to open it up in my default
18:00browser like it used to do for years,
18:03but instead it actually opened up the
18:05app as a tab in my VS Code window. This
18:07is pretty cool. It's an integrated
18:09browser within which local host links
18:11automatically open up. Pretty cool. You
18:13can use it just as a regular browser or
18:16you can also turn on the inspect element
18:19so you can select specific elements and
18:21then it automatically puts them within
18:24your agentic chat session. I love this.
18:28So far, you had to use a third party app
18:30or a browser extension in order to be
18:32able to do that, but now it's integrated
18:35directly within your VS Code. This is
18:38amazing. So, it knows that this is
18:40referring to your app, that is referring
18:42to an H1, and it even passes a
18:44screenshot to the part that you're
18:46trying to fix. So, now you can just say
18:48modify this, and it'll immediately do
18:50it. Love it. We'll definitely use this
18:53later on. You can also add element to
18:56chat, add screenshot to chat, or add
18:58console logs to chat. Pretty cool stuff.
19:01And there's a full browser console and
19:03elements tab right here. Love it. Now,
19:06let's go ahead and modify some of the
19:08default files right here by heading over
19:10into the app and then page. We can clean
19:13this page up by just running rafc. If
19:16that isn't working for you, you can head
19:18over to extensions and install React
19:22snippets. There's a couple of different
19:24packages. Uh there's the simple React
19:26snippets that I have right now within
19:28which you can simply say sfc to create a
19:31stateless functional component, but
19:32there's also this ES7 react redux react
19:35native snippets that allows you to use
19:37the RAFCE keyword. So you can either use
19:41that or you can use the sfc from the
19:44other one. Either way works for me.
19:47Let's call this page home. And then
19:49within the home, we can simply return an
19:51H1 that says job pilot. And I think I'm
19:55zoomed in a bit too much. So I'll zoom
19:58out a bit. And you can hopefully still
19:59see everything on the screen. Now let's
20:02head over into the globals.css
20:04where we have the default styling. Right
20:07now we want to remove all of that
20:09default styling, but just keep the
20:11import to tailwind CSS so we can use all
20:14of its utilities. Later on, we will fill
20:16in this root as well as the theme in
20:20line as well as some media where it
20:23prefers the color scheme set to dark.
20:26So, we can specify the dark mode of our
20:29application where we'll be able to
20:31modify some root classes and then of
20:33course there is the body uh in case we
20:36want to do some resets. Later on, I'll
20:38provide you with the styling so that we
20:40can focus on what matters and that is
20:42learning about this agentic workflow.
20:44Let's also head over into our public and
20:47remove everything from it. The only
20:49thing we'll keep is the empty public
20:51folder because later on we'll fill it in
20:53with additional assets. So now that we
20:55have an empty slate of our application
20:57like it's completely empty, there's
20:59nothing there. We want to set up our
21:01agentic skills and context files that
21:03we'll use in all of the upcoming lessons
21:05of this video, but also in every
21:08upcoming project that you work on.
21:12To start setting up our agentic
21:14workflow, we'll need some context files.
21:17And just so you don't have to create one
21:19by one by hand, down in the description,
21:21I'll leave a video kit link which is
21:24going to look something like this. Here
21:25you have different useful links such as
21:27the link to the open source codebase of
21:29this project, the deployment, the
21:31assets, and some guides, Discord
21:33channels, and so on. And on the right
21:35side, you have some snippets that I'll
21:36refer to throughout this video. So, I've
21:39put all that neatly in one place so that
21:41you can refer to it as we go through the
21:43build. Let's start off with the assets
21:45part. So, click on this. It'll lead you
21:48to this Google Drive where you can
21:50download the public folder zip as well
21:52as the context zip. Once you get them,
21:55you can unzip them, remove this public
21:57folder, and then simply drag and drop
22:00both of these folders right here at the
22:03root of your application. And you can
22:05say copy folders.
22:07public is going to be simple. Here we
22:09have our job pilot logo as well as the
22:12images we'll be using later on for our
22:14agents dashboard and so on. And then the
22:17context is where the magic happens. But
22:20before I go through each one of these
22:22individually and explain them in this
22:25video, I'll teach you how to take your
22:26agentic development workflow even
22:28further by using custom skills. I've
22:31been writing code using AI for many
22:34years now, but especially throughout the
22:36last 6 to 12 months, I doubled down on
22:38it. Ever since Claude Opus 46 came out,
22:41and since then, I've been improving my
22:43workflows, but I didn't feel like
22:45rewriting all my rules for every single
22:48project. So, skills made a lot of sense.
22:51I created a series of skills that
22:54combine all of my workflows and
22:56learnings and struggles of years of
22:58working with agents into a set of skills
23:00that you can install into any project.
23:02And installing them is super simple. You
23:04just have to run MPX skills at latest
23:07add JavaScript Mastery Pro skills or you
23:10can install them individually. Below you
23:12can find some info on each one of these
23:14skills. But don't worry as that's
23:16exactly the point of this video to teach
23:18you how to use these skills. If you want
23:20to know how I created these skills in
23:22the first place, how I came up with the
23:24ideas, and why I thought these specific
23:26workflows need to be turned into skills,
23:28you'll likely be interested in the
23:30agentic development course that I'm
23:32working on. That's going to be a
23:33collection of all of my learnings over
23:35the years of trying to tell AI to write
23:38code. Now, it actually can, and I'm
23:41ready to compile it into a single
23:43course. So, for now, you can only join
23:45the wait list, but it's going to be out
23:47soon. Now with that in mind, you can
23:49head back over into a terminal and you
23:51can open up a second window and within
23:54it run MPX skills add latest add
23:57JavaScript Mastery Pro skills. It'll ask
24:00you whether you want to install the
24:01skills installer. So you can say Y.
24:03Proceed. And then it'll ask you which
24:05skills you want to install. In this
24:07case, you can select all of them.
24:09There's just five. It'll ask you for
24:11which agents you want to install those
24:13skills. You can select the one you're
24:15using. You have a lot of options right
24:17here. Um, we can use clot code or we can
24:20use something like codeex or gemini.
24:24That's going to be completely up to you.
24:26Of course, there's also cursor, but you
24:28can see for it that's universal and it
24:30works right out of the box. So, press
24:32enter. Install it either on the project
24:34or globally through sim link and proceed
24:38with installation. Now, after now, after
24:41you install it, if you would be so kind,
24:43you can also give this repo a star. So,
24:46as more of us use these skills, we'll
24:48get more issues and pull requests to
24:50improve them even further and make them
24:53better. Once installed, you'll see these
24:56skills appear directly within your
24:57project right within agents. And here
25:00they are. In the crash course, you
25:02already learned about when and how we'll
25:04be using these skills. And very soon,
25:07we'll start putting that to practice.
25:09Now, before we start using our context
25:11files, which are going to work together
25:13with our skills, I want you to think
25:16about something. Imagine you're a
25:18developer and a client comes to you and
25:20says, "Build me a website." With no
25:23brief, no requirements, no design, just
25:27that. What do you do? I mean, you make
25:29guesses, right? Assumptions. You build
25:31something that made sense to you, but
25:33not necessarily what they wanted. That's
25:36exactly what happens when you open up a
25:38chat window like I do right here and
25:41then you tell it something like build me
25:43a SAS app. The model, whichever one
25:46you're using nowadays, isn't stupid. It
25:48just has no idea what you actually want.
25:50So, it fills the gaps with its best
25:52guesses. And three sessions in, those
25:54guesses compound into something that,
25:57well, nobody asked for. So, before we
26:00write a single prompt, we want to give
26:02our agent everything it needs to know.
26:04And that's coming in form of these nine
26:07files. Each one of which gives the agent
26:10a specific layer of knowledge that it
26:12would otherwise have to guess. It starts
26:14with the big picture, which is the
26:17project overview. Here we tell the agent
26:20what job pilot or whatever project
26:22you're working on. Actually, it's a full
26:25stack AI powered job hunting assistant.
26:27The user sets up their profile once,
26:30uploads their resume, and the agent
26:31automatically discovers relevant jobs
26:34from LinkedIn, scoring each one against
26:36the user's profile using GPD40 or later
26:39on we can switch this. So, we tell it
26:42what it is and what problem it solves,
26:44and we tell it about the problem it
26:47solves. Job hunting is one of the most
26:49repetitive and timeconuming tasks a
26:51developer faces.
26:53So, the goal here is to eliminate all of
26:56that. Now, why are we telling it that?
26:59Well, the more context it has, the
27:01better decisions it'll be able to make
27:03with the limited context that we give it
27:05through the prompts. Then, we also give
27:08it every single page and the full user
27:11flow, how the user moves from page to
27:13page and exactly what happens. We also
27:16give it some more information about the
27:18specific functionalities of the app,
27:20which in this case is finding actual
27:23jobs and provide more info. Then a bit
27:26below we talk about what's in scope but
27:29also at the same time and this is
27:31important what's out of scope for this
27:34application. The agent reads this file
27:36once and knows exactly what we're
27:39building and more importantly what we're
27:42not. That way there's no scope creep.
27:45It's simple for it to understand our
27:47success criteria. So once it knows what
27:50we're building, it also needs to know
27:52how it's built. And for that there's
27:55another context file called
27:57architecture.mmd.
28:00You can also open it up in markdown.
28:03It's going to look something like this.
28:04And this file is all about the stack as
28:08well as the folder structure of the
28:09application. The system boundaries and
28:12data flow as well as database schemas
28:15and a set of rules that our AI agent
28:18must never violate. For example, API
28:21routes contain no UI logic. Components
28:24contain no DB logic. Agent code in agent
28:28never imports from components or
28:30actions. Server actions never call
28:32agents. And you you get the idea. That's
28:35the architecture. That was the
28:37architecture. But now it needs to know
28:40what to build and in what order. And
28:43that's what the build plan is for.
28:46Within the build plan, we tell it how we
28:48want to split this build into phases.
28:51For example, we're going to have 25
28:54total features across five phases with
28:57every feature being defined, scoped, and
29:00sequenced correctly. So that way, the
29:03agent never has to decide what comes
29:05next because it already knows it. This
29:07is the road map that we follow for the
29:10entire build. And if you're wondering,
29:12but hey, how do I actually come up with
29:14all of this? or do I have to prompt my
29:17AI agent to create this before we even
29:20begin? The answer is yes. That's
29:23something that we'll dive much deeper
29:24within in the agentic development
29:26course.
29:28But yeah, through the conversation with
29:30AI before you even begin with the build,
29:32you come up with these rules and
29:34different things that you want to build.
29:36It can easily split it into different
29:38features one by one for you and then
29:40that's the plan that we can follow. Of
29:42course, we can choose to deviate from
29:44it, but more or less we're going to
29:46stick with it. So once we know what to
29:48build, then it needs to know how to
29:51write the code. And that's what the code
29:53standards file is for. Here we tell it a
29:57bit about the TypeScript rules. For
29:59example, the naming conventions or NexJS
30:0316 conventions, the file and folder
30:05naming, the component structure, how we
30:08handle specific errors or server
30:11actions.
30:12Basically, every single convention that
30:14you follow that you can think of, write
30:17it down once. And this is what keeps the
30:20agent consistent across every session
30:23instead of simply drifting away into its
30:25own style by week two. And it also needs
30:28to know how to use the tools. So for
30:31that, we have the library docs.md.
30:35This file is not just generic
30:37documentation.
30:38It's on exactly how we use each library
30:42in a specific project like job pilot in
30:45this case. So before using any library
30:48check if an MCP server is configured for
30:50that library read that file and only
30:54then act. In this case we'll be using
30:56ins. So we tell it how we can use it and
30:59some rules that it can follow. Same
31:01thing for o dbqueries and browser base
31:04which we'll be using later on to
31:06actually scrape the data. check for the
31:08MCP of this library that we want to use
31:11and some examples of how we can use it.
31:13Of course, I was super detailed right
31:15here, but these context files are
31:17something that you can build along the
31:19way as you're building the application,
31:21but of course, the more you prepare at
31:23the start, the better. Now, for the UI
31:26layer, there's three files, each
31:28handling a different part. Let's start
31:31with UI tokens. Here we define every
31:34single color, spacing value, border
31:37radius or typography scale and we pull
31:40it directly from the design defined as
31:42CSS variables. The agent will use these
31:46exact values with no hard-coded hex
31:49values or no inconsistency between the
31:51pages. So once it knows the primitives,
31:54we can head over into the UI rules.mmd.
31:58Here we tell it how the UI behaves. uh
32:02things like the font, the layout and how
32:05cards should look like, the button
32:08styles too, the badges and everything.
32:11And this is what keeps every page
32:13feeling like it belongs to the same
32:15product. You know that if you're
32:16building with AI, very often the AI will
32:19start deviating from the general design.
32:22But with this in place, you can
32:23essentially consider it your entire
32:25design system. write the visual rules
32:28here once and then the agent will follow
32:30them across every page. And if you
32:32already have a Figma design, you can use
32:34a Figma MCP or just feed it over into AI
32:38and it'll generate this for you.
32:40Finally, there's the UI registry. This
32:43is a living document, so we're
32:45essentially starting it empty. Later on,
32:47I'll teach you how to use the import
32:49scale, which fills it automatically as
32:51we build components. So, as soon as you
32:53create some of the components, it'll
32:56check if a similar component exists. If
32:58yes, it'll match its exact classes. If
33:01no, it'll build it following the UI
33:03rules and UI tokens and then add it
33:05here. This is super powerful if you're
33:08building without a design, and it's what
33:10keeps your components consistent across
33:12the entire codebase. There's also
33:14another file called progress tracker,
33:16which also begins kind of empty. None of
33:19the check boxes have been checked, but
33:21it'll be automatically updated after we
33:24complete every new feature. So, at the
33:26start of any new session, the agent
33:28knows exactly where we left off with no
33:31reexlaining needed. That's it. These are
33:34the nine files that give the agent the
33:36full picture of what we're building, how
33:39the system works, what to build next,
33:41how to write the code, how to use the
33:44tools, and how the UI should look and
33:46behave. In this case, I was super
33:49detailed. When you're building these for
33:51your projects, you can start slow and
33:53then keep adding things as you go. And
33:56you'll most likely keep adding things as
33:58you switch it from a project to another
34:00project because you'll figure out what
34:02works and you'll want to stick with it,
34:04but then modify just slightly to suit
34:06that new project. In this case, I took
34:09the time and I made it very detailed for
34:11two reasons. First of all, you can
34:14browse these files and try to understand
34:16the process that I follow while writing
34:18them. Again, within the agentic
34:20development course, I'll give you the
34:22full uncut version of me actually
34:24generating these files with AI. And the
34:27second reason is that since we're
34:28building this application together, I
34:30want both of our agents to give us more
34:32or less the same output. The less
34:34specific you are, the less similar and
34:37less perfect output you're going to get.
34:39But with this detailed context files, we
34:42should be getting almost the same output
34:44so that you can easily follow along
34:46until the end of this course. So how do
34:48we tie all of this together? Well, it
34:51has to do with the agents.mmd file,
34:53which right now is completely empty. If
34:56you head back over to your video kit,
34:58you'll see a final agents.md file right
35:01here, which you can copy and simply
35:04paste it right here. It's simple. It
35:06just ties everything together. Here
35:08we're speaking directly to the agent. We
35:10tell it to read in this exact order
35:13before any implementation.
35:15Read all of these nine files. And if you
35:18think that making it read these files is
35:21going to consume a lot of tokens, trust
35:23me, it's going to consume significantly
35:25less tokens than it would take it to
35:28generate some stuff that you'll end up
35:29scrapping and never using and going back
35:32and forth and fixing it. This workflow
35:35is made for the highest speed of
35:37development, but also the lowest token
35:39cost. Trust me on that, and you'll see
35:42for yourself as you continue following
35:44along. There's also some rules that
35:46never change, like no hard-coded hex
35:48values, update the progress tracker
35:50after every feature, load the skill
35:53before touching any third party
35:54libraries, and it lists all the skills
35:57and exactly when to use them. Think of
36:00it like this. The context files are the
36:03knowledge
36:05and the agents. MD file is the
36:07instruction manual that tells the agent
36:10how to use that knowledge. Without it,
36:12the agent might skip a file, read them
36:15in the wrong order, or miss a rule. With
36:18it, every session starts exactly the
36:21same way, consistent, focused, and fully
36:24loaded. If you're using Claude, you'll
36:26need a claw.md file, which in this case
36:29should automatically point to the
36:31agents.mmd file. So, this should be good
36:34no matter which agent you're using.
36:35You'll also notice that under context,
36:38there's this designs folder. This is to
36:40make sure that every page has a visual
36:42reference so that when the agent builds
36:44UI, it's not inventing. It's simply
36:47trying to match what's already there.
36:49That's how you get consistent and
36:51polished UI without correcting it every
36:54session. And if you're finding all this
36:55overwhelming, just follow along with
36:58this video, build it with me, and I
37:00think you're going to get a pretty good
37:02idea of how you can use this workflow
37:04for your own projects. Of course, if you
37:06want to dive deeper and learn how to
37:08create these files from scratch, you can
37:10join the weight list for the full Aente
37:12course. But while that's not out, I
37:15actually already prepared the full AI
37:18development starter kit, including these
37:21context files, workflows, and the skills
37:24that we talked about, all within a
37:26single reference book that you can
37:27always go back to and look at when
37:30you're crafting these for your own
37:31projects. So, now that the context is
37:33ready and our agents MD file is here,
37:36we're officially ready to start
37:38developing our application.
37:41Now, just before we run our first
37:44prompt, I want to tell you about the
37:46workflow that we'll be using. So, no
37:48matter which agent you go with, the
37:50interface is more or less the same. You
37:53can open it up by pressing command
37:55shiftp and then search for chat. At
37:57least that's how it's called in VS Code.
38:00Here you'll see that you have the
38:01regular chat belonging to VS Code,
38:04Microsoft, and Copilot. There's also
38:07claude code and Codex. And these right
38:09here are just extensions. So if you head
38:12over to extensions and search for Codex,
38:15you can see it right here. It has almost
38:1710 million downloads. And as soon as you
38:20install it, it'll appear right here.
38:22Same situation is happening with Claude
38:24or any other agent you decide to use.
38:26You install them and they appear right
38:29here. So this video is completely
38:32agnostic when it comes to the tool
38:33you're using. The thinking and the specs
38:36are what actually matters. the tool is
38:39your call.
38:41That said, here's what I'd recommend.
38:43Claude Code is amazing and you can
38:45totally use it on the sonnet model which
38:48is cost effective and that's what I've
38:50done for the past two videos. In this
38:52one, I'll be using Codex. Lately, I was
38:55able to achieve a lot with very little
38:58token spent and that's what most people
39:00are running these days. It's also the
39:02most budget option available as they
39:04have the go plan for only about eight
39:07bucks per month, a plus plan, and
39:09they're usually giving away a month for
39:11free depending on your region. In my
39:13case, I'll go with plus. Either way,
39:15I'll make sure you don't burn through a
39:17ton of tokens regardless of what you
39:19pick. And sure, you can also use a Codex
39:23app or cursor or whatever you want or
39:25this agent window in VS Code. everything
39:28works. The context and the workflow that
39:31we're going to go through and use
39:33together throughout this video is
39:35agnostic to whichever tools you or your
39:38team are using. So, go ahead and open up
39:40your agent of choice. You can do that by
39:42pressing commandshift I, which
39:44automatically opens up the chat window,
39:47and you can just select the agent you
39:48want to use. So, let's start with
39:51setting up our design foundation.
39:54Everything we defined within UI tokens,
39:57we also need to put within our
39:59globals.css before the agent touches a
40:02single component. We want to do this
40:04first and then every page we build after
40:07will be consistent from the start. If
40:09you skip it, the agent will just start
40:11guessing. So, open up CEX or your agent
40:13of choice. Moving forward, when I say
40:15codex, you can think of that as your own
40:17agent. And let's tell it something like
40:20this. Read the agents.mmd file
40:26and follow the reading order specified.
40:30Confirm once you've read all context
40:33files and are ready to build. With this
40:37prompt, the agent will read everything,
40:40confirm it's loaded, and then we build.
40:42So let's run it once to see what it has
40:44to say. And here you'll also be able to
40:47watch it do its things like read the
40:50agents MD and then finally moving
40:53through the files that we gave it UI
40:55token UI rules UI registry and so on.
40:59Now, we want to make sure that the agent
41:01uses Tailwind CSS V4, not V3. And for
41:06these types of situations, there's a
41:08package called context 7, which has
41:10up-to-date docs for LLMs and AI code
41:13editors.
41:15For example, the NexJS docs was changed
41:1754 minutes ago, better raw 20 hours ago,
41:21and here's Tailwind CSS changed 20 hours
41:24ago. You want to click on it and then we
41:26want to give this info over to our agent
41:29so that it has the latest data
41:30available. We can do that right here
41:32within our terminal by running mpx ctx7
41:36context 7 skills search tailwind CSS.
41:41It'll ask us whether you want to install
41:42the context and then you can select some
41:45of the skills. There's going to be many,
41:47but you can go with Tailwind CSS,
41:50Tailwind CSS patterns, Tailwind CSS
41:54utility components, I think, is going to
41:56be another one that we want to use. Yep,
41:59utility classes right here. And finally,
42:01the best practices. So, that's going to
42:03look something like this. And then press
42:06enter. You can install them right here.
42:08And now the agent will have both our
42:10project tokens and up-to-date Tailwind
42:13CSS v4 knowledge which means that we are
42:15ready to write the globals.css prompt.
42:19In this case we don't have to use the
42:21architect skill because there's no
42:23logic. It's just straightforward setup.
42:26So I'll tell it to read the UI tokens.m
42:30MD file and use Tailwind installed
42:35skills to check the correct Tailwind v4
42:39setup and then set up the globals.css
42:44file. This fairly detailed context and
42:47skill setup allows us to write very
42:49short and quick prompts. So you'll see
42:52now that the setup is done how we can
42:54very quickly progress through the
42:55application given that the right context
42:58has already been put into place. Give it
43:00some time to think about it. And you
43:03might want to pause this video for a
43:05couple of minutes until the agent does
43:06this on your end. For me, it took about
43:083 minutes. It first checked the Tailwind
43:11skills, verified the Nex.js docs, and
43:14only once it understood which
43:16technologies it's working with, it made
43:19sure that the CSS matches the token
43:21specification cleanly. Then it made sure
43:23that the build is running, that the
43:26fonts are being set up properly, and
43:28that's it. It set up Tailm for globals
43:31in app.globals globals using the token
43:33pattern from the context UI tokens a
43:36full theme and it also aligned the
43:39layout with the project font rule by
43:41switching it to enter. Great. So now if
43:43you want to check out the
43:44app.globals.css,
43:46it's going to look something like this.
43:48We get all of these new styles that now
43:50we can use within our application. So,
43:52back within the homepage, if you head
43:54over here and give it a class name of
43:58something like let's head over into our
44:00globals to see which fonts can we use,
44:03there's going to be the font text color
44:07info dark for example. So, you can give
44:09it a class name of something like bg
44:12info dark and also text dash white as
44:17well as text dash 3xl.
44:21And then if you head back, you can see
44:22that all of these styles got applied.
44:24This means that our globals.css
44:27had been set up properly, at least for
44:29the initial primitive colors that we can
44:30use across our application to have
44:33consistent styling. So now that the
44:34globals file has been set up,
44:36immediately in the next lesson, let's
44:38build the homepage.
44:42Now that our design tokens are in place,
44:44we're ready to build the first page. And
44:47this is where everything we set up
44:48starts to pay off. Since we're going to
44:51start a new session, so you can head
44:53over into codeex and exit the current
44:56session, want to start a new context for
44:58every new feature we're building. Start
45:00with a new chat. And whenever you do so,
45:03I always like to tell it to read the
45:05agents.md file and follow the specified
45:07reading order and then confirm once it's
45:10actually read out. You can think of this
45:12as a pre-step that I always like to do
45:14before I start working on more complex
45:16features. And then while it's doing its
45:18thing, we can already start prompting it
45:20to build a feature. So I'll tell it to
45:23build the complete homepage exactly as
45:27shown in and then here we can utilize
45:30our design images under context
45:34landing page.png.
45:36I want to provide it with an image of
45:38the design that you can either find
45:40online or design it using Figma or some
45:44other design tools. So as shown in and
45:47this is going to be the landing page.png
45:50file and want to say use images from the
45:55public folder when needed
45:59and run it just at the right time when
46:02it finished reading the agents MD file
46:04and all the other context files. And
46:06notice just how short that prompt is. No
46:10stack explanation, no folder structure,
46:13no UI rules because the agent already
46:16has all of that from the context files.
46:18We just tell it what to build and where
46:21the visual references. That's it. And
46:23this is where the magic happens. Codex
46:26immediately started treating this as
46:28phase 1 feature 01 homepage. So it's
46:32loading the relevant build skills, the
46:34current homepage layout files, the
46:36Nex.js local docs and available assets.
46:39So we can match the design cleanly
46:41before touching the code. The app is
46:44still very small which is good for
46:46matching the design precisely. It got
46:48the design loaded. It's going to also
46:50take a look at some images. It dissected
46:52it and it's loading the front-end design
46:55guidance. It's using the architect skill
46:58for the homepage structure and the
47:00imprint after implementation so we can
47:02keep this first feature deliberate and
47:05consistent with the project rules. And
47:07all of this is happening from a single
47:10short prompt that we gave it. We're
47:12building a fully designed marketing
47:14homepage that matches the landing page
47:17design with a topnap bar, hero, and
47:20everything else. The language that it's
47:22locking in exactly as shown. Use images
47:25from public complete homepage decisions
47:28that it's making. It made a decision to
47:31split the code into components to stay
47:34within the existing project token system
47:37and to make sure that it works on
47:38desktop but also mobile. It made some
47:41assumptions which is good and then it
47:43created a stepbystep list of how it can
47:46start doing it. Finally, after all of
47:49that, it's moving into implementation
47:52and it'll keep the component shapes
47:54close to the architecture docs.
47:57Now it's editing creating one component
47:59after another. The homepage structure is
48:02done and then it'll even lint it to
48:05check for any TypeScript or app router
48:07issues before it does the required
48:10registry or progress updates in the
48:12visual cleanup. There we go. Lint is
48:15clean. It's going to do another compile
48:18level check to catch any server errors
48:20or next images issues by running mpm run
48:23build. Looks like the production build
48:25failed, which is amazing that we ran it.
48:27So, we're able to notice this issue. And
48:29that's because Next Font couldn't reach
48:31Google Fonts from the sandbox. So, it's
48:33going to rerun that build with network
48:35approval so we can verify the homepage
48:37compiles end to end. The build is
48:41passing. It's doing the final repo
48:43required bookkeeping next, such as
48:46marking the phase one feature homepage
48:4801 complete in the tracker and
48:51imprinting that homepage patterns into
48:53the UI registry so future pages stay
48:56visually consistent. It's updating the
48:59two live docs right now, both the
49:02feature completion and the exact
49:04homepage class patterns we established.
49:07This is great. And I think even at this
49:09point, while we haven't yet checked out
49:11the output, you can see why that initial
49:15grunt work that we needed to do to set
49:17everything up is paying off
49:19significantly. While it's finishing, you
49:22can review the modified files starting
49:25from the globals where it added some new
49:27component specific styles to the layout
49:30where it updated the title and the
49:32description, which is amazing. We didn't
49:35even ask it to do that, but it did it.
49:37Here is the homepage and check just how
49:40clean that is. There's a navbar, there's
49:43a hero, there's a how it works, there's
49:45the features, success stories, call to
49:48action session exactly as I would have
49:50coded it. So to people who say that the
49:53AI generated code isn't clean and
49:56readable and scalable, simply share them
49:58this part of the video. So after the
50:00homepage, there are the individual
50:02components like the call to action
50:04section which is also super clean. the
50:07features section where it even extracted
50:09the data before the actual output. The
50:13hero section, how it works, success
50:15stories, footer, logo, all of these are
50:18just some representational components.
50:20And on top of changing these, it also
50:22updated the progress tracker.md. So we
50:26can go ahead and preview it. It simply
50:28marked the homepage as complete as well
50:32as the UI registry where now it added
50:34some new files like the landing footer
50:38so that if it needs to be reused later
50:40on, it knows exactly how a footer should
50:43look like within our application or
50:45maybe a call to action banner or maybe a
50:48testimonial section. All of these are
50:50likely to appear on other pages. And
50:53now, believe it or not, our agent
50:56documented these features for us. And
50:59thanks to the context system we have put
51:01in place, it'll simply refer to this UI
51:04registry whenever it needs to do
51:06something similar in the future. So, I
51:09guess this is the moment of truth. We
51:12have to run our application and see how
51:15does this homepage look like. I'll open
51:17it up right here in the preview. Zoom it
51:20to a proper size. And check this out.
51:23Besides these buttons, which are fully
51:25dark, which we're going to fix, and I'm
51:27super happy that there's something this
51:29obviously wrong, we're going to fix it.
51:31Don't worry. Take a look at the rest of
51:34the application. I mean, you can hover
51:36over these buttons and they move. The
51:38hero section and the font size and
51:40colors are done incredibly well. The
51:42subheading as well. It used this image
51:45from the assets and displayed it nicely.
51:48There's a second section right here.
51:50Manage your job search with ease.
51:52Another section apply with more
51:54confidence where it used another image.
51:57A full page success stories using Tom
52:00Wilson and its image from the public
52:02folder as well as a little ending part
52:05and then the footer. It did about a 99%
52:09match on the first try with no back and
52:12forth, no corrections, and no
52:14reexplaining the design system. The
52:17context files did the work up front, so
52:20we don't have to do it here. But I
52:22definitely want to fix the buttons. And
52:24thanks to our design system, we only
52:26have to fix it once. This is actually a
52:29situation where I'm going to use this
52:30new VS code add element to chat feature
52:34where I'm going to select a button and
52:36add a corrective prompt
52:39saying that all the buttons on the
52:41screen right now appear fully black
52:44background and dark text which is not
52:47visible on the dark background. Make
52:49them match the actual design and updated
52:52within the registry and the globals. So,
52:55all the buttons on the screen look
52:57great. And you can see that now we're
52:58passing it all the info and the
53:00screenshot. In the screenshot, I can
53:02actually see the text right here, which
53:04is too dark. But, as I said, the
53:06contrast just isn't good. So, we have to
53:09fix it. It's going to trace where button
53:11colors and tokens are defined.
53:14Collect all the project rules. Confirm
53:16the token intent for the button. And all
53:19of this is happening super quickly right
53:21now. It's basically doing it in real
53:22time as I'm speaking. It identified the
53:25button class usage. It found a
53:28conflicting token definitions in the
53:29repo. So, it's going to inspect it
53:31further by allowing it access to the
53:34browser. It'll now take a look at the
53:36application and see why it hasn't been
53:38done properly. It pinpointed the root
53:41cause. The text accent foreground
53:44utility is not taking effect on those
53:46dark CTAs, so they inherit dark text.
53:50It'll simply fix the globals.css, CSS,
53:52which is now super simple, modify it
53:55across all the buttons and update the UI
53:58registry so that mistake doesn't happen
54:00again. But after some time, it found
54:04that the approach wasn't being emitted
54:05into compiled CSS properly. So it tried
54:08switching back to a more reliable
54:10approach, but then at the end of the day
54:12just brought it back to dark buttons.
54:16And it told me that Copilot has been
54:18working for a while and that it can
54:20continue to iterate, but maybe we need
54:22to refine the prompt. And then I figured
54:25that in this case it did it using
54:27Copilot because when we added this
54:30inspect element, it only works with VS
54:34Code's native chat application. But
54:36instead, we can copy this prompt and
54:38paste it as a corrective prompt directly
54:41into the codeex agent or whichever agent
54:43you used because this one already has
54:46all the info from our context and it
54:48should be able to fix it without
54:49necessarily pointing to it. It knows
54:51what the buttons are. So, this was
54:54actually a good experiment. Let's see
54:56how much more powerful this agent is
54:59considering that it has the context from
55:01before when we gave it the task to
55:03actually create this landing page. Oh,
55:06wait. It actually did it super quickly.
55:08It found that the homepage was styling
55:11CTA's ad hoc and it replaced that with
55:14the landing button primary and landing
55:16button secondary classes in globals.
55:19Updated it and now it looks great on the
55:22navbar as well as on the hero section
55:25and everywhere else where the buttons
55:27are being used. I think that's right
55:29here in the footer. So you can see that
55:31one corrective prompt, even without
55:34pointing to it with our finger, was able
55:36to immediately make a huge difference to
55:39our landing page. And that's it. The
55:42homepage is now done. The only thing
55:44that you need to do if you want to stay
55:46consistent with my workflow is to save
55:49the session before we move on. So open
55:52up your chat and simply run forward
55:54slash remember. What this does is it'll
55:57save only the most important parts of
55:59the session so that the agent can refer
56:01to them later on. For example, about the
56:04buttons not being correct. And how can
56:06you know exactly what got saved? Well,
56:09it's simple. You can just head over into
56:11the memory.md file which it now created.
56:14If we preview it in markdown, you can
56:17see right here that the current state is
56:20that the homepage is fully implemented
56:22and matches the design and it knows that
56:24the next session should start with the
56:27second feature of the phase one which is
56:30the authentication. Perfect. So in the
56:33next lesson, let's implement the O.
56:37Now, just before we start adding
56:39authentication to our project, let me
56:41introduce you to the tool that's going
56:43to be powering the entire back end of
56:45this project, including the O. It's
56:48called Ins. And if you haven't heard of
56:50it, pay attention because it changes how
56:53you build backends with AI. Ins gives
56:57your agent a complete backend in one
56:59platform that includes authentication,
57:03database, storage, edge functions, model
57:06gateways, real-time functionalities, and
57:08the vector search and embeddings. And
57:10all of it working directly with your
57:12coding agents, which makes it the
57:14perfect fit for this video and the
57:16workflow that I want to teach you. It's
57:18not retrofitted for AI workflows, but
57:21rather built for them from the ground
57:23up. What that means in practice is
57:25instead of your agent guessing how to
57:27wire up authentication for example or
57:30writing database queries against an API
57:32that it half knows ins ships with an MCP
57:36server. Your agent then connects
57:38directly to your backend reads live
57:40schemas manages tables and configures
57:42authentication based on all of these
57:45tools and knowledge that it has. That's
57:47the difference between a copilot and an
57:49agent that actually builds things for
57:51you from the ground up. And for our job
57:54pilot project, InsForge is going to
57:56handle everything behind the scenes,
57:57including the O, the entire database,
58:00resume storage, and all of it. It's a
58:03single platform, one connection, and no
58:05configuration that we have to manage
58:07ourselves. To start hooking it up, open
58:09up your agents, start a new chat, and
58:12run the remember command. This is the
58:15first time we're using it. Specifically,
58:17we want to say restore what it
58:19remembered before. This is only going to
58:21pull up the most important history so
58:23that it can use that data to do better
58:25work in the future. Now, before we go
58:27ahead and set up ins, go ahead and copy
58:30your entire agents.m MD file as it is
58:34and save it somewhere safe. That's
58:36because when ins
58:38writes its own instructions into agents
58:40and sometimes it may overwrite your
58:42custom content and we need that content
58:44back after the setup. So, make sure to
58:46copy everything that is in here. Then
58:48head back over to InsForge. I'll leave
58:50the link down in the description that
58:52you can click on to follow along and see
58:55exactly what I'm seeing and start
58:57building today. You can log in through
58:59either GitHub or Google. And when you're
59:01in, you can create your project. You can
59:03start with JSM
59:06call it something like job pilot or
59:09maybe your own name and choose the
59:10region that is closest to you. Once you
59:12create it, it's going to load the
59:14interface and you can either install it
59:16through the CLI or you can install it in
59:19agent mode. You can proceed with the CLI
59:21or select any of the agents here. I'll
59:23go ahead and click install on the codeex
59:26part since that's what we're using.
59:28It'll give you the option of the CLI.
59:30So, you can simply copy and paste this
59:32or an MCP, which is what I want to teach
59:34you how to implement. Simply copy the
59:36installation prompt. Open up a new Codex
59:39chat and simply paste what you copied.
59:42I'm using InsForge as my backend
59:44platform. Please run this command to
59:46install the Ins MCP server. And I
59:48believe for this the medium reasoning
59:50model is going to be fine. And I'll be
59:52using GPT 5.5. This should do the trick.
59:54It'll now install the Ins MCP server
59:57with the exact command we provided. Now
59:59it said that the install command failed
1:00:01in sandbox because network access to mpm
1:00:04is blocked. So we can either run it
1:00:06manually or we can approve the
1:00:09permissions. So I'll say approve and
1:00:12it'll try it once again with these added
1:00:15permissions. Either way is totally fine.
1:00:17The next step is to restart the coding
1:00:19agent to check whether it has been
1:00:21installed properly. So to verify the
1:00:24connection we can simply start a new
1:00:26session and tell it something like I'm
1:00:29using ins as my backend platform call
1:00:32ins MCP's fetch docs to learn about ins
1:00:36and now we can see whether it'll
1:00:38actually call the ins mcp and confirm
1:00:41the connection. You can see that right
1:00:44here fetch docs. There we go. And it has
1:00:47the full info. Now open up the
1:00:48agents.mmd file. You can see that ins
1:00:51added its own contents into the
1:00:53agents.mmd file. Thankfully, I told you
1:00:56to copy your previous agents.mmd. So, we
1:00:59can still bring it back. So, right on
1:01:01top of the insk documentation, you can
1:01:03bring back what was previously within
1:01:05your agents.mmd. These instructions are
1:01:08important because they tell the agent
1:01:10how to use the backend. Your custom
1:01:12instructions tell it how to build this
1:01:14specific project, but both need to be
1:01:16here. Neither replaces one another. So
1:01:18now with ins set up we are ready to
1:01:21implement authentication. Go ahead and
1:01:24open up your agent by heading over to
1:01:26codex and within a new chat we can tell
1:01:29it something like check the progress
1:01:32tracker and also the build plan right
1:01:36because there we listed everything we
1:01:38want to do. then use the INSF forge MCP
1:01:43to fetch the latest ins
1:01:47documentation before we start
1:01:50implementing O. So again, you'll see me
1:01:53ask it to pull all the data together
1:01:56before it starts implementing things so
1:01:58that we know it's going to do it in the
1:02:00proper way. It'll read the progress
1:02:01tracker to figure out where we are right
1:02:04now in the process of developing the
1:02:05project. Then it'll check out the build
1:02:08plan to know what it needs to build next
1:02:11and finally fetch the ins docs via the
1:02:14MCP. So notice what's happening here.
1:02:17The agent is checking where we are in
1:02:19the build, what the O requires, and then
1:02:22pulling live ins documentation through
1:02:25an MCP, not some outdated data. So now
1:02:28it's going to confirm the build plan.
1:02:30The next feature is O covering UI,
1:02:33Google GitHub, OOTH, callback handling,
1:02:35and so on. It has the latest ins docs
1:02:37and the only thing you have to do now is
1:02:39to say something like start or go ahead
1:02:42given all the context we have that's
1:02:44enough to spin it up and give it the
1:02:46permission to start developing the
1:02:48feature O2 in this case O since this one
1:02:52touches routing middleware client server
1:02:55boundaries and the login UI it's going
1:02:57to use the architect skill to form the
1:03:00blueprint it knows that it has to be a
1:03:02custom ins flow and it pulled the latest
1:03:04nextGS6 16 docs where it noticed that
1:03:07middleware was replaced with proxy.
1:03:09Since most of the codebase online has
1:03:12been written with older versions of
1:03:13Nex.js, if we didn't have these very
1:03:16detailed instructions on pulling the
1:03:17latest docs and using them, it is highly
1:03:19likely that the agent would have used
1:03:22the older version of the middleware and
1:03:24placed it at the wrong spot, therefore
1:03:26breaking the app. But since we have all
1:03:28of this setup done, it did it properly.
1:03:31So, let's give it some time and see the
1:03:33implementation. Feel free to pause the
1:03:35video um as this actually took 8 minutes
1:03:38for me on medium reasoning. But yeah,
1:03:41after 8 minutes or so, it implemented
1:03:43the full O feature includes the insk O
1:03:48setup, the OOTH start routes with Google
1:03:51and GitHub, server routes for OOTH
1:03:54callback exchange, refresh and logout
1:03:56routes, Nex.js 16 route protection via
1:03:59proxy. So definitely make sure that you
1:04:01have a proxy right here in the root of
1:04:03the application and not a middleware
1:04:05file because this changed in next.js
1:04:08version 16 and our agent caught it.
1:04:11Added login UI which we'll check out
1:04:13soon. Minimal protected placeholders and
1:04:16it updated the progress tracker and UI
1:04:18registry. We also have to add thev file
1:04:21to our application because currently
1:04:23doesn't exist. And in there we have to
1:04:25add the next public ins URL and ins add
1:04:28an add-on key. So, let's do that right
1:04:30away. We don't want the agent to handle
1:04:33our environment variables. We're going
1:04:34to do it ourselves by creating a
1:04:37new.env.local.
1:04:38Heading back over to our ins dashboard
1:04:42under install at the bottom there's
1:04:44going to be API keys. It's always great
1:04:46to fetch them in case we need to use
1:04:48them later on. So, I'll look at the
1:04:50project URL. That's going to be ins
1:04:54project URL. And after that we'll have
1:04:57the next public ins URL as well as the
1:05:00next public inson key. So prep both of
1:05:04them and then simply paste the keys you
1:05:07can get directly from the dashboard. We
1:05:09can revisit this later on in case we
1:05:11need to update them. But yeah, let's go
1:05:13ahead and check it out. If you head over
1:05:15to your localhost 3000, either open it
1:05:17locally or you can open it up in your
1:05:19browser. Click get started and it'll
1:05:22redirect you to this beautifully
1:05:24designed authentication page. And now
1:05:27one thing that I want to point out here
1:05:29is that we never actually gave it a
1:05:32design for the o page itself. Keep that
1:05:35in mind. We did give it a design for the
1:05:38landing page and that included some
1:05:40primitives, some assets that it can use
1:05:42and the general idea of where we want to
1:05:44take the design of this application. But
1:05:47off page we didn't give it a design for.
1:05:50And take a look at just how polished and
1:05:53on brand this looks like. But now the
1:05:55big question is can we actually log in?
1:05:57I'll go ahead and proceed with Google.
1:05:59And it says we could not start that
1:06:01signin method. Please try again. And I'm
1:06:04actually super glad this happened
1:06:06because I get a chance to show you
1:06:08another one of the skills that I created
1:06:10and that'll become a huge part of your
1:06:12workflow. It's called recover. So go
1:06:15ahead and open up the chat that you were
1:06:18within and in the same window use the
1:06:21recover skill. So when something goes
1:06:24wrong during build, it's going to
1:06:26diagnose the problem and fix it properly
1:06:29and not just lose its way around it. So
1:06:31in most cases, it's going to be just
1:06:33enough for you to pass the error message
1:06:35that you're seeing. But you can also add
1:06:37some additional context like
1:06:38authentication is not working properly.
1:06:41Press enter and just watch how it'll
1:06:43recover itself.
1:06:45figure out exactly what the issue is,
1:06:47diagnose the problem, and then make only
1:06:50one targeted change once the root cause
1:06:53is clear. Looks like failure mode one, a
1:06:55specific thing is broken. And it was
1:06:57able to find it within a second. Root
1:07:00cause next public ins for URL is set to
1:07:02an IK key value, not the ins backend
1:07:05URL. So, we have to make the next public
1:07:07ins for URL this one right here. So
1:07:10simply head over into ourv and make sure
1:07:12that the next public infford URL is set
1:07:14to an actual URL and not a key that I
1:07:17had right here. This was on me, but
1:07:20again I'm glad to show you just how
1:07:22powerful the recover skill is. So once
1:07:24you fix the envitize
1:07:29and you'll be redirected back to your
1:07:31profile.
1:07:33Currently there is nothing there but
1:07:35just the fact that we are logged in is
1:07:37perfect.
1:07:39You can go ahead and log out if you want
1:07:41to. That's working as well. Now, if you
1:07:44go to the profile, it's going to bring
1:07:45you back to the O. And once again, you
1:07:48can just log in. And that's it. We're
1:07:51in. So, now that we know that the
1:07:53feature has been implemented properly,
1:07:55we can make use of another skill called
1:07:57review. So, after building a feature, we
1:08:00want to verify that it matches what was
1:08:02planned, respecting the system
1:08:04architecture and design standards, and
1:08:07is ready to proceed. The skill is super
1:08:09quick, less than a minute. It gives us
1:08:11back the findings. The critical one that
1:08:13oath wasn't able to start without the
1:08:16proper env. That's on me. Uh that the O
1:08:19route handlers do not follow the
1:08:21required error handling. Okay. Do not
1:08:24wrap the route logic in try catch as
1:08:26project standards require every route
1:08:28handler to catch log errors and return
1:08:30human safe responses. The ooth buttons
1:08:33use a link to sideffecting API routes.
1:08:37In production link behavior can include
1:08:39pre-fetching, navigation optimizations,
1:08:41side effects and so on. So that's
1:08:43something that we can fix. So it found
1:08:45the issues. The plan pieces are mostly
1:08:47present. Login UI, Google GitHub oath
1:08:50routes and so on. Some issues that we've
1:08:52seen. So now before we move on to
1:08:54implementing the next feature and you
1:08:56can see it already knows what it is
1:08:57because of our context files, we can
1:08:59tell it to fix it. It quickly noticed
1:09:02that we fixed the env issue oursel and
1:09:05then it also fixed the following review
1:09:07issues and updated the UI registry for
1:09:09the button and the pattern. So that's
1:09:11great. We'll need to restart the Nex.js
1:09:14server to pick up the corrected env. But
1:09:17yeah, now that everything is done, I
1:09:19also want to run the imprint skill. So
1:09:21after building any UI components, we
1:09:23want to extract the visual patterns that
1:09:25matter for consistency and save them to
1:09:28the UI registry. In this case, it looks
1:09:30like it already updated the UI registry,
1:09:32but just in case it missed some stuff
1:09:34while doing the review, I'll run this
1:09:36skill manually. And in about 10 seconds,
1:09:38it imprinted the login card. So, the
1:09:41final thing we need to do is run the
1:09:43remember skill to save what matters at
1:09:45the end of the session because this was
1:09:47a good one. And you can also run save.
1:09:50And finally, it saved it all in the
1:09:52memory. So that in the next session, we
1:09:54can simply run remember restore to pick
1:09:56it up from here. Let's keep building.
1:10:00Now that we have the landing page, the
1:10:03auth
1:10:04page, I think this is the right point to
1:10:07start tracking what's happening within
1:10:10your application. Because that's the
1:10:12question that most developers never ask
1:10:14until it's too late. How do you know
1:10:16that your app is actually working the
1:10:18way you think it is? Not does it
1:10:20compile, but are users actually finding
1:10:23the jobs within the platform? Are they
1:10:25generating the cover letters or creating
1:10:27their accounts and profiles? Without
1:10:30that data, you're just guessing. And
1:10:32guessing on a product you just shipped
1:10:34is how you end up optimizing the wrong
1:10:36things. That's why I want to introduce
1:10:38Post Hog in this stack. It's open-
1:10:41source, built for engineers, not
1:10:43marketers. And it includes event
1:10:46tracking, funnels, session replays,
1:10:48feature flags, all within one platform.
1:10:51As we continue developing Job Pilot,
1:10:53you'll see exactly what it does, but
1:10:55basically it tracks every meaningful
1:10:57user action and it powers the three
1:11:00analytics charts that we'll show on the
1:11:02dashboard. Every job search, every cover
1:11:04letter generated, and every resume that
1:11:07we created for our users, and Posthog
1:11:10will capture it. So, let's set it up.
1:11:13Click the Post Hog link down in the
1:11:14description and create your free account
1:11:16if you don't have one already. You can
1:11:18choose your region and sign in with any
1:11:21platform that you prefer. If you're
1:11:22creating it for the first time, you need
1:11:24to create a new organization. You can
1:11:26call it something like JSM_. And then
1:11:28enter either your name or the name of
1:11:31your organization. And then also select
1:11:33your role. Most likely it's going to be
1:11:35an engineering. And if you have a second
1:11:38also you can say JavaScript mastery
1:11:40right here in where did you hear about
1:11:42us? So let's create the organization.
1:11:45and it's going to ask you what do you
1:11:47want to do with Post Hog. In this case,
1:11:50we want to understand how our users
1:11:52behave. That's the closest match to what
1:11:54we're building. We can turn on the
1:11:56product analytics, the session replay,
1:11:58the web analytics, and later on we'll be
1:12:00able to add all of this additional stuff
1:12:02as well. So, let's go. I'll say it out
1:12:05loud. Post Hog has the best iname setup
1:12:09wizard. You just used one single command
1:12:11and no matter which framework you use,
1:12:14it'll install and set up Post Hog and
1:12:17also add the initial event tracking
1:12:20specifically tailored to the application
1:12:22that you're building. So back within the
1:12:24application, you can open up a new
1:12:25terminal and run MPX-Y
1:12:28add post hog wizard at latest and you
1:12:30can also add the region. I'll expand
1:12:32this so we can see what's happening.
1:12:34It'll likely ask you whether you want to
1:12:36install the post hog wizard installer.
1:12:39And as it says, let's do 2 hours of work
1:12:41in 8 minutes. Directory recognized.
1:12:45Framework is here. And we want to do the
1:12:47post hog integration. So continue.
1:12:50It's going to ask us to authenticate
1:12:52within our browser. That was quick. And
1:12:55now on the left side, it'll keep telling
1:12:57us some stuff about the agent and how it
1:13:00works, like some helpful tips in a game
1:13:02while it's loading the next level. Here,
1:13:05it's not loading the next level, but
1:13:06rather analyzing our project and setting
1:13:09up its own tasks. First, it needs to
1:13:12plan which event it's going to track.
1:13:14Then, it needs to install Post Hog,
1:13:16initialize the Post Hog client, capture
1:13:18the events, identify users, and finally
1:13:22create the Post Hog dashboard. This is
1:13:24going to take a couple of minutes. So,
1:13:26go grab some coffee and pause the video
1:13:29and I'll be right back. And after the
1:13:32setup is done, it'll detect all of the
1:13:34agents we have. And it's asking us
1:13:36whether we want to install the Post Hog
1:13:38MCP server and plugin as well. I'll
1:13:40proceed with doing that and I'll do it
1:13:42for Visual Studio Code and Cloud Code.
1:13:44And we'll give it access to everything.
1:13:47Now, what this does is it allows you to
1:13:49just ask your agent plain text questions
1:13:52about some of the funnels or features
1:13:54within your application and then it can
1:13:56access all of the data from your Post
1:13:59Hog dashboard and make more intelligent
1:14:01decisions on implementing some things
1:14:03within the codebase. For example, you
1:14:05can ask it what are the top five errors
1:14:07in my project this week. is going to
1:14:09return it and then you can continue
1:14:11speaking with your agent to fix them or
1:14:13show me a full stack trace for the most
1:14:15recent crash and then propose a fix. You
1:14:18can go deeper across many different use
1:14:20cases, but yeah, definitely go ahead and
1:14:22install it. So now that Post Hog has
1:14:24been initialized, I'll head back over to
1:14:26our agent. We'll start a new codec
1:14:29session. We can tell it to use Post Hog
1:14:32to track some events within our current
1:14:36application.
1:14:38Even though we don't have a lot
1:14:39happening right now, it should be able
1:14:41to use the MCP and our current codebase
1:14:44and figure out a couple of things it can
1:14:46track already just so we can verify
1:14:48everything is working. The agent nicely
1:14:51understands that the current UI is still
1:14:53in the O foundation phase. So most of
1:14:56the approved business events don't have
1:14:57live workflows yet. It's going to add it
1:15:00just for initialization, user identify
1:15:02and reset, and a typed server tracking
1:15:05helper for the approved event names for
1:15:07the profile job flows later on. That's
1:15:11all that I need for now. And there we
1:15:12go. It added a couple of events that
1:15:14allow us to identify our users on logout
1:15:18or when they visit the dashboard and so
1:15:20on. So, let's quickly test it out by
1:15:22heading back over here. I'll sign out.
1:15:25I'll continue with GitHub one more time
1:15:27to log in.
1:15:29visit the homepage, the profile, the
1:15:31find jobs, and the dashboard. And back
1:15:34within the onboarding, you should be
1:15:35able to see installation complete. If
1:15:38for you, for some reason, it still says
1:15:40that it's waiting for some events to
1:15:42happen, what you can do is click need to
1:15:44set up manually, choose Nex.js, and then
1:15:48right here under the second step, you
1:15:50can manually copy the env.local.
1:15:54then restart the application, log out
1:15:57and log in one more time and switch a
1:15:59couple of pages. And at that time, it
1:16:01should say that it auto captured
1:16:03something new. Either way, you can click
1:16:05skip or next to continue setting up our
1:16:08configuration. I'll leave all of these
1:16:10three options turned on, such as auto
1:16:12capturing front-end interactions so that
1:16:14we automatically track clicks, submits,
1:16:17and more. I mean, a couple of years ago,
1:16:19I wouldn't know what to do with that
1:16:20data. But now that we have the AI, it
1:16:23can make sense of it. So, you're
1:16:25immediately getting so much more
1:16:26valuable info. Heat maps are useful if
1:16:29you can capture generally where people
1:16:31are clicking, moving their mouse, and
1:16:33scrolling to. And then also web vitals,
1:16:36super useful info to have. While we're
1:16:38here, you can also enable session
1:16:40replays because sometimes it might not
1:16:42be clear what's happening just from the
1:16:44clicks. If a user stops scrolling and
1:16:46just stares at one portion of the
1:16:48screen, you want to get in their shoes
1:16:50and see what they're seeing. That's what
1:16:52the session replays are for. So, I'll
1:16:54enable them, too. And finally, you can
1:16:56choose between one of the two free
1:16:58plans, either pay as you go, starting
1:17:00completely for free, giving you up to 1
1:17:02million events, 5,000 session
1:17:05recordings, and 1 million feature flag
1:17:07experiments, or for now, you can just
1:17:09start completely for free. That'll bring
1:17:11you directly into your Post Hog
1:17:13dashboard. There's a quick start that
1:17:15you can start off with, but also under
1:17:17browse, you can head over into activity
1:17:19and check out exactly what is happening
1:17:21within your application. You can see
1:17:23that we're trying to identify some
1:17:25users. Those users are clicking the form
1:17:28and moving across our application. This
1:17:31is just the start. We've started
1:17:33collecting the data. But later on, as we
1:17:35implement some actual features of our
1:17:37app, we'll start making sense of the
1:17:39data. And the biggest help for that is
1:17:41going to be Post Hog AI. So stay with
1:17:44me. Let's implement a couple features
1:17:45together and then we'll come back to
1:17:47Posthog to show you how to truly
1:17:49understand what your users are actually
1:17:51using your app for and how you can
1:17:54improve it based off of the data that
1:17:56we're now tracking.
1:17:58Great work. Once that is done, you can
1:18:00get back to one of your agent chats and
1:18:03tell it that I've initialized PostHog
1:18:05using the Post Hog wizard. So review it
1:18:09by using the review skill
1:18:12and remember
1:18:14save what we did. That way we'll update
1:18:17our context and we'll be able to move
1:18:19directly to the next feature. And this
1:18:22is also a cool little tip that shows you
1:18:24that you can use multiple skills in the
1:18:26same prompt. This took less than a
1:18:28minute. It provided us with a review.
1:18:31Everything passed and it saved it to
1:18:33memory. So in the next lesson, let's
1:18:35focus on maybe the most important part
1:18:37of the app, and that is the database
1:18:39schema.
1:18:42The database schema is the foundation
1:18:45everything else sits on top of. If you
1:18:47get this wrong, you'll be tracing bugs
1:18:49all the way to bad column decisions you
1:18:52made at this point. So this is exactly
1:18:54the moment to use our architect skill
1:18:56before touching anything. So go ahead
1:18:58and open up your agent. And in this
1:19:00case, I actually want to switch over to
1:19:02cloud code to show you that these
1:19:04context files and the workflow that I'm
1:19:07teaching you is completely agent
1:19:09agnostic. I'll use something like sonnet
1:19:11on a high effort within it. You also
1:19:14want to make sure that you have access
1:19:15to the skills. So if you run something
1:19:17like remember, it needs to be there. If
1:19:19it's not, you can open up the terminal
1:19:22in a new window and run MPX skills add
1:19:25latest add JavaScript mastery pro
1:19:28skills. Add all five skills and make
1:19:31sure to add them for cloud code. Once
1:19:33that is done, you can run remember like
1:19:36this and say restore to restore the
1:19:38previous session. It'll automatically
1:19:41figure out what we want to do. Reading
1:19:43the memory file and project context to
1:19:45restore the session state.
1:19:47Perfect. Post hog got implemented wired
1:19:50up. And now we have to do the database
1:19:52schema. Now we can use the architect
1:19:55skill to tell it to architect the
1:19:58feature number four. It'll read all the
1:20:02relevant context files before it talks
1:20:04to us and produce a full implementation
1:20:07plan for the database schema, tables,
1:20:10columns, types, relationships,
1:20:12absolutely everything. And it'll give us
1:20:14that plan so that we can actually review
1:20:17it and tell it whether it's a go or a
1:20:19nogo. And pretty quickly, actually in 30
1:20:22seconds, the agent came back to me and
1:20:25it looks like it wants to have a
1:20:26conversation. First, it's making sure
1:20:28that we're speaking the same language.
1:20:31Rowle security policy. I understand this
1:20:33as posgress RLS rule attached to the
1:20:36table that automatically filters every
1:20:38query to only the current user's rows
1:20:41using o ID. Users can never read or
1:20:44write another user's data even if they
1:20:47craft a direct API call. Is that right?
1:20:50Yeah, that is right. Authenticated
1:20:52access only. Yep, that is pretty clear.
1:20:55And then schema creation. Yep, this is
1:20:57exactly what we want to do against the
1:21:00ins posgress database not generating
1:21:02migration files. I think the reason why
1:21:04it's asking me all of these decisions is
1:21:06because I had not the plan mode, but I
1:21:09think I had the thinking turned on. It
1:21:12might not even be necessary. So for now,
1:21:13I'll simply tell it to proceed with
1:21:16suggested decisions and then it'll get
1:21:19the implementation plan and start
1:21:21working on it. There we go. This is a
1:21:23pretty hefty plan, 12 steps. Confirm and
1:21:26I'll start building. And I'm super glad
1:21:28it asked me to confirm because we
1:21:31installed the Ins MCP for Codeex. But to
1:21:34make it truly agnostic, you also have to
1:21:36install it for the other agent you're
1:21:38using. So back within InsForge, you can
1:21:40click install. Go ahead and choose cloud
1:21:42code which is the first version and you
1:21:44can do it either through CLI or MCP.
1:21:47Either way works. Let's do CLI this
1:21:49time. I'll just tell it I confirm. But
1:21:52before do the following
1:21:56and then paste what we have. So that way
1:21:58it'll get all the information about ins
1:22:01and it'll know how to set up our Ins
1:22:03database properly. The ins cli is now
1:22:06installed and linked and now it'll load
1:22:08the ins skills before proceeding. That's
1:22:10exactly what I meant when I said that
1:22:12Ins was built agentic from the ground
1:22:15up. So agents can work with it so
1:22:18naturally and build entire backend
1:22:20systems with o databases and more. There
1:22:23we go. Clean slate, no tables, no
1:22:26migrations. Let's proceed with the full
1:22:28implementation. I'm assuming this one
1:22:30will take a bit longer. So pause the
1:22:33video and I'll be right back. And after
1:22:36doing some thinking and implementing and
1:22:38then thinking and reading and writing it
1:22:42finalized the feature updated the
1:22:44progress tracker in the UI registry. So
1:22:46phase one with features from 0 to 4 for
1:22:50being the database schema are now
1:22:52completed. It updated the progress
1:22:54tracker and it applied the migrations.
1:22:57The backend through ins is now built.
1:23:01Four tables applied via CLI migrations.
1:23:04There is tables for profiles, agent
1:23:06runs, jobs, and agent logs. All of which
1:23:09are going to start making sense very
1:23:10soon as soon as we start adding the
1:23:12features. Only the authenticated users
1:23:14can perform operations and the rest of
1:23:16the stuff has been completed. Now, if
1:23:18you head back over to InsForge,
1:23:21specifically under database, you'll see
1:23:23four different tables, which means that
1:23:25all of them have been successfully
1:23:27created. The agent didn't write a
1:23:29migration file or configure a connection
1:23:32string. It created all four tables
1:23:35directly through the INSForge MCP. And
1:23:38that's what agent native infrastructure
1:23:40looks like in practice. Agent logs is
1:23:43going to be the agents paper trail. Like
1:23:46every step that it takes during a run
1:23:48will get written right here with info,
1:23:50success, warnings, errors. So if
1:23:52something goes wrong during a job
1:23:54search, this is where you find out
1:23:56exactly what happened and why. But
1:23:59again, that's going to start making more
1:24:00sense soon. agent runs. Every LinkedIn
1:24:04search the agent performs gets logged
1:24:06right here. Job title, searched,
1:24:08location, how many jobs were found, when
1:24:11it started and completed. This is how
1:24:13the dashboard knows what searches
1:24:15happened. Finally, the jobs, every job
1:24:18discovered or imported, match score,
1:24:21cover letter, specifically made for each
1:24:24user. That's the entire job hunting
1:24:26history in one table. And then there are
1:24:29the profiles. Every user's career data
1:24:32will live right here. Name, skills,
1:24:34experience, resume, LinkedIn contact ID.
1:24:38This is what the agent reads when it
1:24:40scores a job against you. And if you
1:24:42open up storage here, you'll see just
1:24:45empty résumés. Every ré operation in
1:24:48this app will read and write to this
1:24:51bucket. And since we can already see the
1:24:53four database tables and the storage
1:24:55bucket, that tells us that everything
1:24:57has been implemented properly. So you
1:25:00can run forward sl remember
1:25:03to use the remember skill and say save.
1:25:06It'll figure out that we wanted to use
1:25:08the remember skill and update the
1:25:11memory. So if you check it out, you'll
1:25:14see that the phase one foundation is
1:25:15100% complete, features one to four,
1:25:18live ins backend has all four tables, 20
1:25:21RLS policies, two triggers, and one
1:25:24private storage bucket types exists.
1:25:28No app level code touches the DB yet.
1:25:31That's going to start soon in phase two.
1:25:33And it says that these open questions
1:25:34from previous sessions haven't been
1:25:36resolved. I didn't consider them that
1:25:37important, but it's good that it's
1:25:39keeping track. So from the next lesson
1:25:41onward, we'll start focusing on the
1:25:43profile page UI. And considering that
1:25:46the phase one is now done, I think it's
1:25:48due time to actually push this code over
1:25:50to GitHub. So head over to
1:25:53github.com/new
1:25:55and create a new repo which you can call
1:25:58job pilot or whichever name you prefer.
1:26:01Then just create it. And you can push
1:26:04over to it
1:26:06by opening the terminal. And we can do
1:26:09this manually. And even though you don't
1:26:10have to do this manually, you can just
1:26:12copy and paste all that into your agent.
1:26:14Old habits die hard. So I'll say get
1:26:16init
1:26:18add dot get commit-m
1:26:21implement everything up to phase one get
1:26:26branch
1:26:28dash m main get remote add origin and
1:26:33finally get push u origin main.
1:26:38Perfect.
1:26:39Now, if you go back and reload, you'll
1:26:42be able to see your code appear right
1:26:43here. And I always like to clean it up a
1:26:46bit. So, you can hide the releases,
1:26:47deployments, and packages. Give it some
1:26:49topics such as agentic workflows because
1:26:52that's what we're working on right here.
1:26:55Later on, we'll be able to add the
1:26:57deployed version or deployed link of our
1:26:59application. And for now, we can give a
1:27:02quick description of the app. I believe
1:27:04our agent or the wrote that for us right
1:27:07here in the root of the application
1:27:11AI powered job search assistance for
1:27:14matching roles, tailored resumes and
1:27:16faster applications. You never know
1:27:18who's looking at your profile and it's
1:27:20always good to tidy it up a bit and to
1:27:22stay consistent. So now that the latest
1:27:25changes have been pushed, we are ready
1:27:27to start focusing on phase two of the
1:27:29application. Great job coming this far.
1:27:35And let's dive right into the phase two.
1:27:38If you head over into the build plan,
1:27:40you'll see that our database schema is
1:27:42done and we are ready to begin phase
1:27:44two, which is the profile page. Starting
1:27:46with the UI, you always want to separate
1:27:49the concerns. Do the UI first and then
1:27:52the logic second. So in this case, we'll
1:27:54first build a complete profile page with
1:27:56UI with mock data without save logic.
1:28:00Within the UI, the profile will need the
1:28:02attention banner at the top, completion
1:28:04percentage ring, missing field tags
1:28:06highlighted, and so on, connected
1:28:08account section, resume section, profile
1:28:11information form with clearly labeled
1:28:13sections, and then save profile button
1:28:15at the bottom. So, let's simply open up
1:28:17a new window. I'll head over to clot
1:28:20code, and I'll tell it to remember, but
1:28:23specifically restore what we remembered
1:28:25before. It'll read the memory file and
1:28:28restore our session.
1:28:30There we go. Now it knows exactly what
1:28:32we focused on.
1:28:34So the next thing we have to do is
1:28:35simply tell it to build a profile UI.
1:28:38And just so it stops asking these open
1:28:39questions, I'll say you can close the
1:28:43open questions. And then we can tell it
1:28:45to build the complete profile exactly as
1:28:49shown in the profile.png.
1:28:53That's going to be within context
1:28:55designs profile. And run it. Let's give
1:28:58it some time to implement it and then
1:29:00we'll go over it together. After getting
1:29:02the full context, it's going to start
1:29:03building the profile page components.
1:29:05It'll start by writing some to-dos for
1:29:07itself. Looking at the design, it needs
1:29:09to build these components, the profile
1:29:11attention banner, the connected
1:29:13accounts, resume section, profile form,
1:29:15and then update the page to compose
1:29:17everything. Then it formed that into a
1:29:19list of to-dos, and it'll proceed
1:29:22working on them one by one. And after a
1:29:24couple of minutes after it implemented
1:29:26it, it also updated both context files
1:29:29in parallel. The progress tracker where
1:29:32it now says that it implemented the
1:29:34profile page UI as well as it marked it
1:29:37as complete right here. It also modified
1:29:40the UI registry to add the components
1:29:42that now it knows how to build and it
1:29:44gave us a quick rundown of everything
1:29:46that was implemented. So what do you say
1:29:48that we go ahead and check it out? Back
1:29:49within the application, if you head over
1:29:51to the profile page, you should be able
1:29:53to see something that looks like this.
1:29:55Oh, and before, as I was building the
1:29:57application, I first experienced an
1:29:59issue with the redirect to the profile
1:30:01page. This specifically happens when you
1:30:03sign out and then try to sign back in.
1:30:06If that happens to you, you can very
1:30:07easily fix it by telling the agent
1:30:10what's happening. Run the review, fix
1:30:12the homepage button, and make sure that
1:30:14the profile page is accessible after
1:30:16login. So take a look at how well this
1:30:18matches the design of our application.
1:30:20Even without comparing it to the
1:30:22original, it's looking amazing. But if
1:30:24there's something that is off, you can
1:30:26simply take a screenshot from here and
1:30:28also take a screenshot from the final
1:30:30design and tell it to fix it. So profile
1:30:33is 70% done. We need to insert some more
1:30:36information for better matches. We'll
1:30:38soon need to connect our LinkedIn
1:30:40account. Then here we'll be able to
1:30:42upload our resume, enter our profile
1:30:44information, and with all of that info,
1:30:47soon enough, this application will
1:30:49simplify our job application process
1:30:51significantly. In this case, it already
1:30:54updated the UI registry. But in case you
1:30:58want to be sure, you can just run
1:30:59imprint manually, and then it'll check
1:31:01whether it added some new components
1:31:03that we might want to reuse later on. It
1:31:05says this was already done during the
1:31:07build session, so that's amazing. With
1:31:09that in mind, you can simply run
1:31:10remember save to save what we did in
1:31:13this session. That'll save it to our
1:31:15memory, which means that immediately in
1:31:17the next lesson, we can start working on
1:31:19the profile save logic. So, let's do
1:31:23that next.
1:31:25Now that the UI is done, let's wire it
1:31:28up. The profile form looks good, but it
1:31:31doesn't do anything yet. No saves, no
1:31:34database rights, and no file uploads. So
1:31:37let's change that. First we want to open
1:31:40up the chat and we want to restore the
1:31:43latest session or in this case since
1:31:45we're working just on the profile the UI
1:31:47first and now the logic we can keep it
1:31:49within the same page. What we want to do
1:31:51in this lesson has some real logic
1:31:53behind it through server actions file
1:31:56uploads through ins for storage
1:31:58completion tracking and path
1:32:00revalidation. So before the agent
1:32:02touches any of it we need to plan it. So
1:32:05switch over to the plan mode. You can do
1:32:08that right here from edit to plan mode
1:32:11and then use the architect skill that we
1:32:15have and tell it to architect the
1:32:17feature 06
1:32:20and press enter. Feature 06 is obviously
1:32:23coming from the build plan. So if you
1:32:25take a look at right here, you'll see
1:32:27that we need to wire up the profile form
1:32:30to insb
1:32:31through server actions. Resume uploaded
1:32:34to ins storage. Resume PDF saved to
1:32:37profiles is complete set to true.
1:32:40Completion percentage and missing fields
1:32:42calculated form prefilleds with existing
1:32:44data and revalidate on save. So let's
1:32:49see how well it's going to plan the
1:32:50feature and then we can actually start
1:32:52executing it. and it thought through all
1:32:55the key decisions and wrote the plan.
1:32:57The plan is thorough and aligns with the
1:33:00project architecture. So, it's just
1:33:01going to verify in sport storage SDK
1:33:04types and any existing usage and then it
1:33:07has everything it needs. It created its
1:33:09plan right here under feature 06 profile
1:33:12save logic. You can even review it. This
1:33:15is the full plan and we can open it and
1:33:18preview it in markdown. So, think of
1:33:20this as a more detailed version of our
1:33:23build plan right here. Using the
1:33:25architect skill in plan mode makes it
1:33:27super powerful and I think it started
1:33:29building it out on its own. So, after
1:33:31you review the plan, you can switch back
1:33:34to the editing mode. Again, sonnet with
1:33:37medium or high thinking is going to be
1:33:38enough because it doesn't have to do the
1:33:40thinking. It has to just write code
1:33:43which has become a commodity nowadays.
1:33:45It's all about the thinking. So now we
1:33:47can simply say to implement the feature
1:33:5006. So picking exactly where we left
1:33:52off, it'll start implementing the full
1:33:55logic. Couple of minutes after the
1:33:57feature 06 is now complete. And here's
1:34:00what was built. It added the actions
1:34:02file. Under actions, it added a
1:34:04profile.ts action file with two actions.
1:34:08Save profile and upload resume. And then
1:34:11under profile util it added a calculate
1:34:14completion shared between page and
1:34:16server action. It also modified five
1:34:19additional files. So now we want to test
1:34:21the form by saving some real info and
1:34:23then reload the page to check whether
1:34:25it's working properly. Make sure your
1:34:27application is running on localhost
1:34:293000. You can see that now we're at 0%.
1:34:34And we can start filling in some info.
1:34:36I'm Adrian at JSMy. For some reason, I
1:34:40cannot enter my email most likely
1:34:42because it should be picked from my
1:34:44account, but okay, we're going to look
1:34:45into this later. Here, you can enter the
1:34:48phone number. For now, I'll enter some
1:34:50random numbers. Location, let's go with
1:34:53New York, maybe one day. Then you can
1:34:57enter your LinkedIn URL as well as your
1:34:59GitHub one. For work, you can choose
1:35:02your work authorization, some
1:35:03professional info, experience level,
1:35:05years of experience, technologies you're
1:35:08proficient in. Notice how nicely it adds
1:35:11these chips as you type, industries
1:35:13worked in, and then you can add work
1:35:15experience. I mean, this is a pretty
1:35:17hefty form and it would take a lot of
1:35:19time to design and develop it, but here
1:35:22it just feels so natural. We can do JS
1:35:25mastery. Of course, here you would
1:35:28actually be entering the data for
1:35:29yourself. I don't remember when we
1:35:31started it, but it's going to be about
1:35:3210 years now. Oh, and there's no end
1:35:35date in sight. Key responsibilities,
1:35:37I guess, everything. Of course, you can
1:35:40be a bit more detailed, so you give your
1:35:41AI a bit more info to work with. You can
1:35:43go ahead and fill in your education,
1:35:46which year you graduated, institution
1:35:48name, and so on. And which position are
1:35:50you seeking, whether you want it to be
1:35:52remote or on site, and then an optional
1:35:55salary expectation.
1:35:57Cover letter, we can make it concise,
1:36:00and prefer locations if you have any. Go
1:36:03ahead and save the profile.
1:36:05It says profile saved successfully,
1:36:07which is great. So now if you reload,
1:36:10oops, it looks like it didn't save what
1:36:13we just wrote. I guess I should have
1:36:14tested it by filling it just a couple of
1:36:16spots and not everything. But that's
1:36:18fine because this is the perfect place
1:36:20to use the review skill. I'll simply
1:36:22turn on the review and tell it form
1:36:26saving doesn't
1:36:28work. And now it'll review the type of
1:36:30bug we're experiencing, figure out
1:36:32exactly where it's coming from, and
1:36:35figure out a way to fix it. So, let's
1:36:37give it a minute. Very quickly, it came
1:36:39back with a full review. Developer
1:36:41reports form saving doesn't work. It
1:36:43figured out there's a couple of
1:36:44mismatches.
1:36:46Server actions are called directly from
1:36:48client components. They require being
1:36:50imported and called as functions, which
1:36:52is what the code does. So, this part
1:36:54should work. Server actions inside start
1:36:57transition in XJS must be called
1:36:59differently. Okay, I'm pretty sure this
1:37:01is going to be the fix. So, it posed
1:37:03some other issues that it found. a
1:37:05couple of critical ones, a couple of
1:37:06important ones, and then a minor one.
1:37:08Resolve issues one, two, and three
1:37:10before moving on. So, I'll simply say
1:37:13resolve
1:37:16and then we'll retest it. And very
1:37:18quickly, it applied all three fixes. So,
1:37:21now if I try changing my name right here
1:37:24to something like Adrian and then click
1:37:26save profile, it's going to say save
1:37:29profile successfully. the name is going
1:37:31to remain there, but then when I reload,
1:37:33it's actually gone. So, it still didn't
1:37:36fix it. I'll add review one more time
1:37:40and tell it that even though we get
1:37:44profile saved successfully after
1:37:46clicking the button, after reloading,
1:37:50the data is still
1:37:53not being saved. Let's give it a second
1:37:55chance. This is the first time it
1:37:58actually didn't fix it right after the
1:37:59first one. And about 2 minutes after
1:38:01it's back with another solution. The
1:38:04proxy.ts file exists with the correct
1:38:07route protection logic, but it is not
1:38:09wired as a Nex.js middleware. Next
1:38:12middleware must be in a file named
1:38:14exactly middleware.ts
1:38:16at the project root. Proxy is therefore
1:38:20never executed. But I'm not sure whether
1:38:22this is correct because if you take a
1:38:24look at the latest page of the docs
1:38:26directly in Nex.js, it's now called a
1:38:28proxy. Starting with NexJS16, middleware
1:38:31is now called a proxy. The functionality
1:38:34remains the same. So the way it works,
1:38:36you create a proxy file instead of a
1:38:38middleware file. And if you go ahead and
1:38:40search for middleware, rewrites you to
1:38:43proxy. So in this case, I think the AI
1:38:45made a mistake. So what we can do next
1:38:47is tell it once again to review its
1:38:49implementation by checking the
1:38:51documentation page that we found and
1:38:53then verifying his claim about the issue
1:38:56number one that it specified. Sometimes
1:38:59you still have to take the wheel and
1:39:01immediately in a matter of seconds it
1:39:04retracted what it thought was wrong
1:39:06about the code. So third times the
1:39:08charm. Let's see if it can actually fix
1:39:10it now or will I have to teach you some
1:39:12other way to fix these types of issues
1:39:14where AI really loses its mind. Either
1:39:17way works for me and that's because
1:39:19these videos are unscripted as it's the
1:39:21only way you can really learn a lot from
1:39:23them. Okay, so now it came back with two
1:39:26fixes. backfill the missing profile row.
1:39:29So, it's going to insert some of the
1:39:31info that was missing from before and
1:39:33then detect the zero rows updated in
1:39:35save profile. Okay, sure. That's a very
1:39:38simple fix. So, let's see whether that's
1:39:40going to make a big change. Very
1:39:42quickly, both fixes got applied. So, if
1:39:45we head back over here, you'll see that
1:39:48now our email is getting prefilled from
1:39:50our authentication info, which is great.
1:39:52And if I enter my name and click save
1:39:55profile, it actually jumped up to 22%
1:39:58and my name is filled in. And it's there
1:40:01even after I reload. So, let me go ahead
1:40:03and fill out some more fields. For
1:40:04example, the full personal info part and
1:40:07click save. It's still here. And we're
1:40:09now at 44%. So, just so you don't have
1:40:12to watch me refill everything I've done
1:40:14before, I'll go ahead and pause the
1:40:16recording and then you can do the same
1:40:17thing on your end and we can continue
1:40:19then. And finally, we are at 100.
1:40:22Potentially, after we upload the resume,
1:40:24it's going to say that the profile
1:40:26doesn't need any more attention. But
1:40:27right now, it says 100%. So, it is a bit
1:40:30misleading. I'll simply take a
1:40:32screenshot, go back to the code, and
1:40:34hold shift to be able to drag and drop
1:40:37files into it. And then I'll tell it
1:40:40when at 100%. It shouldn't say profile
1:40:46needs attention. Fix it. This is just a
1:40:49very simple corrective fix. There we go.
1:40:52It is done. So now when you're at 100,
1:40:54that banner will simply disappear. So
1:40:57let's update the progress tracker and
1:41:01run remember
1:41:03save to save all of it to the memory.
1:41:06After that is done, the profile now
1:41:08saves. And if I'm not mistaken, the résé
1:41:11form should allow us to upload them
1:41:13already. So I'll simply Google for a
1:41:16fake ré.pdf. PDF and I'll download it as
1:41:19a PDF and then you can simply drag and
1:41:22drop it. Notice how nice this looks
1:41:24like. It'll upload it.
1:41:27Resume uploaded successfully. And if you
1:41:29reload, we'll also be able to view the
1:41:31current resume if we had the permissions
1:41:33to do so. That's a little fix that we
1:41:35can make. When we click on that button,
1:41:37we can't actually see it. So, I'll copy
1:41:40this error and say review. When clicking
1:41:45on view current resume, it leads to and
1:41:50then you can paste the URL that it leads
1:41:52to and then say what it shows. It'll
1:41:55analyze it, figure out what the issue is
1:41:58and allow us to preview the resume that
1:42:00we just uploaded. The diagnosis is
1:42:02thankfully very straightforward as it
1:42:04says right here. The issue is that the
1:42:06get public URL was used on a private
1:42:09bucket which was architecturally wrong.
1:42:12as the build plan states to create
1:42:13résumés storage bucket with
1:42:15authenticated access only and feature 04
1:42:19explicitly created it as private. So we
1:42:21should instead use the download via
1:42:23server route handler instead. So let's
1:42:25just say resolve. There we go. The
1:42:28changes got applied. So now if we view
1:42:30the current resume, it'll simply
1:42:32downloaded and displayed in the browser.
1:42:34Wonderful. Profile saved, résumé
1:42:37uploaded, URL written back to the
1:42:40database. And there was zero
1:42:42infrastructure that we had to manage.
1:42:44Ins handled the storage, the database,
1:42:47write, the RLS policies, and we just
1:42:50told the app what to save. Most back-end
1:42:52platforms were built for humans clicking
1:42:55through dashboards. Ins was built from
1:42:58the ground up for the agents. The MCP
1:43:01gives codecs or cloud code direct access
1:43:04to your schema, migrations, o and
1:43:07storage, all without leaving the
1:43:09session. They just relaunched as the
1:43:11open-source AWS for coding agents and
1:43:15shipped backend branching, git style
1:43:17branching for your entire backend. So
1:43:19your agent can experiment safely without
1:43:22touching production. It's open- source Y
1:43:25Combinatorbacked and again I'll leave
1:43:28the link down in the description to
1:43:29check it out. But yeah, this is great.
1:43:31With that, the full profile page is
1:43:34done. So in the next step we have to
1:43:36make AI extract the additional profile
1:43:38data from the resume. So let's do that
1:43:41next.
1:43:44The profile form now works. So let's
1:43:47make it smart. Right now users have to
1:43:50fill in all of this information
1:43:52manually. And let's be honest nowadays
1:43:54people have troubles filling in just
1:43:56their first, last name, and maybe the
1:43:58age, let alone this many fields. So
1:44:01instead, with the feature that we're
1:44:03going to implement right now, they will
1:44:05upload their resume, hit one button, and
1:44:08an AI will read that PDF and fill every
1:44:11field that it can automatically find.
1:44:13Name, skills, work experience,
1:44:16education, all populated within a couple
1:44:18of seconds. The user just has to review
1:44:20it, edit it if needed, and save it. So,
1:44:24let's dive right in. Let's open up one
1:44:27of our chats that we had right before.
1:44:30start a new one. And we're going to use
1:44:33the remember restore skill to load up
1:44:36the memory. Now, for this feature, I
1:44:39chose gp40 to extract all of this info,
1:44:42which means that we'll need an API key.
1:44:44So, head over to platform.openai.com
1:44:48and sign in. Once you're in, you can
1:44:50create your API key, call it something
1:44:53like job pilot,
1:44:56and create it. Then, copy it. And back
1:44:59within our application under env.local,
1:45:03you can write open AAI
1:45:05API_key
1:45:07and paste the key you just copied. Make
1:45:09sure that you have at least some kind of
1:45:10a subscription over an open AI or
1:45:13whichever other AI API key you decide to
1:45:16use. I'm sure you'll find one somewhere
1:45:18because nowadays it's always useful to
1:45:20have your AI API key on top of the
1:45:23agents that we chat with such as chat
1:45:25GPT or that we code with such as Claw
1:45:27Code. Again, you can use any model from
1:45:29Enthropic, Gemini, or whatever you're
1:45:31comfortable with. It's the same pattern.
1:45:33Just grab the key. Once you have it,
1:45:35let's go back to our chat and tell it
1:45:37that the OpenAI API key is already
1:45:40inv.local.
1:45:42And we simply want it to architect the
1:45:45feature 7. You can see that it even has
1:45:47that in mind. It says run architect for
1:45:49feature 7 AI profile extraction from
1:45:52resume flow button download PDF from ins
1:45:56then PDF parse extracts text then GPT40
1:46:00returns structure JSON form fields
1:46:02populate and user reviews and saves it
1:46:04manually. So this is exactly correct.
1:46:08I'll say correct. Open AAI is there.
1:46:11Architect feature 07. Again, you can run
1:46:14this in plan mode so that it gives you
1:46:16back the plan, but it doesn't touch the
1:46:18codebase yet until you verify how it
1:46:20looks like. So that once it actually
1:46:22comes back with a plan, we can say
1:46:24implement feature07
1:46:26and we can turn it to edit automatically
1:46:29mode. But again, let's see what it comes
1:46:32back with. And it came back with a
1:46:34complete plan. I thought switching it
1:46:36from plan to edit mode midprompt, it's
1:46:39not going to switch it immediately, but
1:46:41it looks like it did. So, it already
1:46:42started implementing that plan. If
1:46:44that's the case, that's okay with me.
1:46:46I'll just occasionally give it
1:46:47additional permissions. If it didn't
1:46:49automatically start working for you on
1:46:51the feature, instead, if it gave you a
1:46:53plan, then you can simply tell it to
1:46:55implement feature 07. And then it'll
1:46:57proceed going through the steps. And in
1:46:59about 2 minutes, feature 7 is now
1:47:01complete. It added only one new file,
1:47:04the profile page client, which is a thin
1:47:07client wrapper that owns the ref
1:47:09bridging the resume section and the
1:47:11profile form. And then it went ahead and
1:47:14modified a couple of file such as the
1:47:16profile actions file inside of which it
1:47:19added the extract profile server action
1:47:22which takes it from ins storage,
1:47:24extracts it, sends it over to GPT40 and
1:47:28then returns the extracted profile. And
1:47:30then in the resume section, there's now
1:47:32an extract profile button. So, let's go
1:47:35ahead and test it by heading back to
1:47:37your application. Uploading your resume.
1:47:40Looks like here I uploaded a fake
1:47:42profile, but it might be better to
1:47:44upload your real developer profile. I
1:47:47found something like this. This is John
1:47:49Doe. So, I've downloaded it in PDF and
1:47:52uploaded it right here. So, now click
1:47:54extract profile. And it'll tell you
1:47:56failed to extract profile from resume.
1:47:58Back within the application, it looks
1:48:00like we get an error, which is great.
1:48:02Setting up fake worker failed with a
1:48:05reason message. So, what we can do is
1:48:08open up the chat and tell it to use the
1:48:12review feature and say when clicking
1:48:15extract profile, I get this message. And
1:48:18in the console, and now we can copy and
1:48:21paste what it says right here. I get
1:48:23this. And now based on the review skill
1:48:27and the additional info that we pass it,
1:48:29it should be able to figure out what
1:48:30went wrong and fix it. So let's give it
1:48:33some time. And very quickly, the fix is
1:48:36in. Here's what changed. PDF parse v2 is
1:48:39built on PDFJS disc and always spawns a
1:48:43web worker. When the server action runs
1:48:46inside of the Nex.js bundle, Webpack
1:48:48can't resolve their worker file path
1:48:50because it only exists at a browser
1:48:52relative URL, not in server chunks. So,
1:48:55what it needed to do is remove the PDF
1:48:58bars from the actions and replace it
1:49:00with the direct usage. Set the global
1:49:04worker, add the server external
1:49:06packages, and we should now be able to
1:49:08extract the profile properly. Let's
1:49:09check if it's uploaded, and then click
1:49:11extract profile. Once again, it says
1:49:14fail to extract. And if we open up the
1:49:16terminal, the issue seems to be more or
1:49:19less the same. Before it happened right
1:49:22here under actions profile, but now it's
1:49:25happening right here under API resume
1:49:27download and then the error happens. So
1:49:30I'll once again provide all of that info
1:49:32to it and tell it review. Still the same
1:49:36issue. And I'll paste it in. And let's
1:49:39see what it says now. And very quickly,
1:49:41it says that resolves the correct
1:49:43absolute path. Restart your dev server
1:49:46for the changes to take effect. So stop
1:49:49it from running and rerun mpm rundev.
1:49:52Then head back and reload the page. If
1:49:55needed, re-upload the resume and then
1:49:58click extract profile. Once again, it
1:50:00fails. Now with the reason of invalid
1:50:03URL. So I'll copy it one more time and
1:50:06tell it to review it and paste the
1:50:08error. Two things are still wrong. So,
1:50:11it'll try to fix them. And in about half
1:50:13a minute, we have another try. Uh, once
1:50:16again, we'll stop the server from
1:50:18running and then rerun it on localhost
1:50:203000 and try to extract it again. This
1:50:24time, we're hit with an even nastier
1:50:26error, a full page one. But thankfully,
1:50:28it is just as easy to copy it and pass
1:50:31it over to our review skill. Hopefully,
1:50:34this time it gets it right. And in about
1:50:375 seconds it says clean. Restart the dev
1:50:40server and try again. The profile page
1:50:42will now load without error and extract
1:50:45profile will call GPT40 and populate the
1:50:48form. Okay, it is very confident that
1:50:51this is going to work. So let me try to
1:50:53rerun it. Go back on the page. Just for
1:50:58good measure, I will re-upload the
1:51:01resume by heading over into job pilot
1:51:03and uploading it here.
1:51:05I think it's going to get uploaded
1:51:07successfully. And now let's extract the
1:51:09profile. First of all, we don't get an
1:51:12error. Rather, there's a loading segment
1:51:14right here where it says extracting. And
1:51:17check it out. It extracted it. Profile
1:51:19fields filled in. Review and save below.
1:51:23Yep, here is our John Doe with the phone
1:51:27number, location set to Certino,
1:51:29California. LinkedIn URL. The portfolio
1:51:33URL is also picked up correctly, but
1:51:35this was a dummy resume, so that's why
1:51:36it says your website.com. For you, it's
1:51:39going to be correct. We are a midlevel
1:51:41software engineer with 19 years of
1:51:44experience. And take a look at how tap
1:51:46on all of these different skills,
1:51:48industries worked in, as well as the
1:51:51work experience, including the company
1:51:53name, job title, start date, and end
1:51:56date, as well as the key
1:51:58responsibilities. This is going to be
1:52:00super useful when matching it to job
1:52:03postings. So, it'll be able to take your
1:52:06previous work experience and then match
1:52:08it against your potential new jobs to
1:52:10tell your employers just why you would
1:52:12be the perfect fit. We also worked at
1:52:14Microsoft, high school, computer
1:52:16science. Yep, all of this is great. And
1:52:20some of the stuff also got filled in.
1:52:22So, I'll go ahead and click save
1:52:23profile. And this is it. That's the
1:52:26feature that we wanted to implement. So,
1:52:28we can simply tell it it's working now
1:52:31and then it can update the progress
1:52:33tracker and run remember save to save
1:52:38the session. With that, now that our
1:52:41resume uploads, GBT40 or whichever AI
1:52:44you chose extracts it, the forms fill
1:52:47automatically and you can verify it and
1:52:50save it. In the next lesson, we'll build
1:52:52the resume generation feature from the
1:52:55profile info. So you can also do it the
1:52:58other way around. This is going to be a
1:53:00full job application platform. So I
1:53:03wanted to make it feature-packed to help
1:53:05you with your job search. There we go.
1:53:07The memory updated. Feature 7 is
1:53:10working. So in the next lesson, let's
1:53:12focus on getting it to generate the
1:53:14résumés.
1:53:17Now we're going to implement the ré
1:53:20generation feature. So, quickly head
1:53:23over into the build plan, preview it in
1:53:26markdown, and then head over to 08 ré
1:53:31generation from profile. Since I didn't
1:53:34write these nine detailed technical
1:53:36documents by hand, I worked with AI to
1:53:39define them based on the project
1:53:40requirements, which means that
1:53:42occasionally something gets missed as
1:53:44you build. And this is one of those
1:53:46moments. If you take a look at the logic
1:53:49for feature08,
1:53:51it says React Renderer right here.
1:53:54Technically correct, but something
1:53:56critical is missing. A resume isn't just
1:54:00a formatted list of data. It needs a
1:54:02professional summary, polished work
1:54:04experience, bullet points, coherent
1:54:07language throughout, right? So if we
1:54:09implement this as written without AI,
1:54:12the agent will just dump all the raw
1:54:14data into a PDF layout. Name here,
1:54:17skills here, bullet points here, all of
1:54:20it is technically correct but completely
1:54:22useless as an actual resume. So before
1:54:25we implement it, we need to fix the
1:54:27build plan to include GPT4.0.
1:54:32So you can tell it something like let's
1:54:35go to the edit mode. Generate a clean
1:54:38professional PDF resume from current
1:54:40profile data using GPT40.
1:54:43Below the read point, you can say GPT40
1:54:47generates professional resume context, a
1:54:50summary paragraph, polished work
1:54:52experience, and clean professional
1:54:54language throughout. That's the fix. And
1:54:56you can update these context files
1:54:58during the implementation or whenever
1:55:00you're adding a new feature. That way
1:55:02you can maintain the codebase and
1:55:04continuously build new features using AI
1:55:07in an existing codebase. So once we're
1:55:10done with the current features, you can
1:55:11always go down and simply add phase 5
1:55:16feature 26. Now go ahead and open up a
1:55:19new session. I'll proceed with claude
1:55:22code and simply tell it to restore what
1:55:25we previously worked on. This feature
1:55:27will have some real logic and AI work
1:55:30involved. GPT40 content generation, PDF
1:55:33rendering, and so on. So, we need to
1:55:35plan before we build, tell it to
1:55:38architect the feature 08 in plan mode.
1:55:41And let's give it some time for it to
1:55:43actually plan it out. And in a couple of
1:55:45minutes, the full plan is right here.
1:55:48And I just noticed this. You can
1:55:50actually review it, select text, and add
1:55:53comments directly on the plan. Pretty
1:55:55cool. But yeah, the idea is to add the
1:55:58resume PDF generation from profile. Here
1:56:00it defines the language, what it means
1:56:02to generate, download and so on. The
1:56:05decisions that it's going to take, the
1:56:07files which you want to change, and then
1:56:08the implementation steps. You can go
1:56:11through it, review it all in detail,
1:56:13leave some comments if you want to, and
1:56:15then that's it. Thankfully, it also
1:56:18provides a list of things that it'll
1:56:20verify before it calls it finished. So,
1:56:23if you open up your chat right here,
1:56:26it'll say the plan is now done, which
1:56:28means that you can just either tell it
1:56:30to implement it or it'll have already
1:56:32started implementing it on its own. And
1:56:34there we go. In about a minute, the
1:56:37feature 8 is now complete. It built the
1:56:40API route to generate it post handler
1:56:43and a serveron PDF component with the
1:56:47header, summary, skills, work
1:56:48experience, and so on. as well as it
1:56:51modified the résé section to add a
1:56:53generate resume from profile button. So
1:56:56if you go back to your profile and click
1:56:58generate résé from profile. Now it'll do
1:57:01it the other way around. It'll take this
1:57:03data and generate a nice looking resume.
1:57:06And check this out. John Doe, software
1:57:11engineer, Certino, California.
1:57:13Professional experience right here.
1:57:16Skills, work experience, and the
1:57:19education. This is amazing. And if you
1:57:21think that you should have some kind of
1:57:22dots, lines, colors, no, no, and no,
1:57:27this concise, simple, black and white
1:57:30textonly document is what professional
1:57:32developers use to get hired. And now you
1:57:35can do that, too. Of course, as you fill
1:57:37it in with more work experience,
1:57:39education, and some other information,
1:57:41it'll perfectly fit on a single page,
1:57:44which is what you want. So, that's
1:57:45amazing. This feature has been completed
1:57:47properly. Now, if this didn't work for
1:57:49you for whatever reason, AI is
1:57:52unpredictable, you can always use the
1:57:54review skill and tell it that there's no
1:57:56download button for the generator
1:57:58resume. Or if something else is not
1:58:00working, you can just tell it to recover
1:58:02the feature 08, ask it to read the
1:58:04context build plan, and then implement
1:58:06it properly. Sometimes some back and
1:58:09forth will be needed, but as you saw,
1:58:11for me, it worked perfectly on the first
1:58:13try. So don't forget to just update the
1:58:17context progress tracker and the UI
1:58:19registry if needed. And in the same
1:58:21command, you can also run remember save.
1:58:24With that in mind, the ré generation is
1:58:27now done. GPT40 writes the content.
1:58:30React PDF renderer renders it and ins
1:58:34storage holds it. So if you go back to
1:58:36your Ins dashboard, you'll be able to
1:58:38find your resume right here and either
1:58:41preview it or just download it. Great
1:58:43stuff. And that's phase two done. The
1:58:47whole profile side is built from the
1:58:50form, the resume upload, AI extraction,
1:58:54and resume generation. Job Pilot now
1:58:57knows who the user is and what they're
1:59:00looking for. Phase three is where the
1:59:03app starts earning its name, actually
1:59:05finding jobs. But one small cleanup
1:59:08first. When I built a profile page, I
1:59:11dropped in a connected accounts
1:59:13placeholder. This thing right here. But
1:59:15I decided not to use it for this build.
1:59:18That's because scraping LinkedIn jobs is
1:59:20actually against their terms of service.
1:59:22So, not to get your account banned, I
1:59:25decided to switch it up a bit. And
1:59:27that's the whole point of this workflow,
1:59:28to show you how we can pivot the app
1:59:30idea while we're building it. Because
1:59:32you'll never be able to know exactly
1:59:34where you want to take this app as
1:59:35you're building it. So, a simple cleanup
1:59:37is going to look something like this.
1:59:39You can open up a clawed window and then
1:59:42tell it to remove the connected account
1:59:44section from the top of the profile
1:59:46page. Leave the LinkedIn URL field in
1:59:48personal info. Don't touch anything
1:59:50else. We essentially want to get rid of
1:59:53this connected accounts part and only
1:59:55focus on the resume and the profile
1:59:57information. This change should be
1:59:59pretty simple because it just removes a
2:00:02single piece of UI. You can see it it
2:00:04removed it as I was speaking and then
2:00:06reloaded the page to show without it
2:00:08which allows us to move to phase three
2:00:11of our application. So let me tell you a
2:00:14bit more about that in the next lesson
2:00:18and welcome to phase three of our
2:00:21application. The goal is to develop a
2:00:24find jobs page first starting with a
2:00:27full UI and then in the next lesson
2:00:29we'll hook it up with the functionality.
2:00:31So the goal is to build a full find jobs
2:00:34page UI with mock data. No logic yet.
2:00:37Again, that's coming in the next lesson.
2:00:39And wanted to have search controls card
2:00:41at the top with a job title label plus
2:00:44location label and then find jobs button
2:00:46with a search icon. And then we want to
2:00:48list the section allowing people to
2:00:51filter them. Show the jobs within a
2:00:53table that says company ro match score
2:00:56based on your resume. And then allow the
2:00:58users to pageionate it. So that's going
2:01:00to be pretty simple. We can go ahead and
2:01:03open up a new session within it. Run
2:01:06remember restore so it knows what we
2:01:08last worked on. And once it remembers,
2:01:11we can now tell it to build feature09
2:01:14exactly as shown in. And now we're
2:01:17passing a design. So if you head over to
2:01:19designs and we're looking at the find
2:01:21jobs page, we want it to look something
2:01:23like this. So there's a search card at
2:01:26the top and then there's a table where
2:01:28we can see all the jobs that we can
2:01:30find. First starting as I said with mock
2:01:33data and then immediately in the next
2:01:35lesson we'll make it fully functional by
2:01:37using an API.
2:01:39So let's give it some time to read
2:01:41through it and then get it implemented.
2:01:43And in about 2 minutes, it collected
2:01:45everything it needs, gave itself a list
2:01:48of reduces to implement, and slowly but
2:01:51surely in the next minute or so, it
2:01:54built the full UI. It also updated the
2:01:58progress tracker as well as the UI
2:02:00registry. And with that, feature 09 is
2:02:03now complete. Let's go ahead and check
2:02:05it out. Back within our application,
2:02:06there's now a second page we can check
2:02:08out, the find jobs page. And would you
2:02:11look at that? The design is looking
2:02:14perfect. I would actually say this is a
2:02:16real application that we can now check
2:02:18out. And if I search by job title, maybe
2:02:21filter it by versel. Eight jobs and four
2:02:24strong matches. But of course, this is
2:02:27not yet fully functional. So if I search
2:02:29for design as in design engineer, it's
2:02:32not going to filter it yet properly. But
2:02:34as soon as we implement the
2:02:35functionality in the next lesson, it'll
2:02:37work just fine. What's working now is
2:02:40the sort oldest and newest or by the
2:02:43match score. As you can see right here,
2:02:45this is going to be a pretty useful
2:02:46application. As soon as the jobs are
2:02:47here and they don't lead to a 40 or
2:02:50four. So with that, the UI is now done.
2:02:53Search controls, the jobs table,
2:02:55filters, pagionation, all of it sitting
2:02:57on mock data. Next, we need to make it
2:03:00real so that the agent goes out and
2:03:03actually finds jobs for the user search.
2:03:06Don't forget to run remember save so it
2:03:09knows what we just did. And let's
2:03:11implement the job discovery
2:03:13functionality as that's where the real
2:03:15work starts.
2:03:18The find jobs page looks the part with
2:03:21the profile and rest of the app, but
2:03:24it's empty. So, it's time to fill it
2:03:26with real jobs. And we'll use the Azuna
2:03:30jobs API to pull the listings from all
2:03:32across the web. You know, an API is good
2:03:35when there's like four different paid
2:03:37ads competing directly for your name.
2:03:39But yeah, we definitely want to go with
2:03:41the original one. What it does is it
2:03:44searches through thousands of job sites
2:03:46so that you don't have to. You can go on
2:03:48it, zoom in to verify that you are a
2:03:51human and uh I guess you have to select
2:03:54a couple of different buckets. You just
2:03:56have to give it a title and a location
2:03:58and it'll give you back real jobs. Then
2:04:01we'll use GPT40 to score each one of
2:04:03these jobs against your profile. It's
2:04:06clean, simple, and has no scraping. So
2:04:09wait, is this thing that we are building
2:04:12basically just an API wrapper? Well, not
2:04:15at all. Aduna will handle the discovery,
2:04:18but once a user finds a job they like,
2:04:20they still need to research the company.
2:04:23What do they actually build? What's
2:04:24their engineering culture like? And is
2:04:26this even a place worth applying to? And
2:04:28that's exactly what BrowserBase is built
2:04:30for. Browserbase is a cloud browser. It
2:04:33opens up a real browser session in the
2:04:35background, visits the company's
2:04:37websites, and then pulls back everything
2:04:39worth knowing. We'll use it to build a
2:04:41full company research feature right on
2:04:43the job details page. So before the user
2:04:46clicks apply, they already know exactly
2:04:48who they're applying to. More on that
2:04:50soon, but for now, create a free account
2:04:53on developer.adzuna.com.
2:04:55So that's not this website, it's their
2:04:57developer version that looks something
2:05:00like this. Outdated, I know, but this is
2:05:03typically how all the API websites look
2:05:05like. You can head over to registration
2:05:06page and fill in your info, such as the
2:05:10username, the email right here, the
2:05:13password, and some additional details.
2:05:16For the organization, you can enter JS
2:05:18Mastery. It's going to be for personal
2:05:21research, and I think we're not going to
2:05:23have a lot of monthly visitors. So, go
2:05:25ahead and sign up. Or at least you'll be
2:05:28able to sign up after you enter a
2:05:30password that is more than 15 characters
2:05:32long. At least they think about
2:05:33security.
2:05:36And then when you sign up, you'll have
2:05:38to verify it via email. And then you'll
2:05:40be able to log in with your email and
2:05:42password. Then head over to dashboard.
2:05:45Go to API access details and here you
2:05:48can find your application ID and the
2:05:50key. Go ahead and copy both. Starting
2:05:53with the application ID, we'll paste it
2:05:55here under our enenv.local
2:05:58right here by saying atuna app id. And
2:06:03then after that, we're going to have the
2:06:05atuna app key.
2:06:09So let's also copy the key and paste it
2:06:13here. That's the entire setup. No SDK to
2:06:17install, no package to add. Aduna is
2:06:19just a plain REST API, just a fetch
2:06:22call. So don't forget to restore a
2:06:24session because now we're going to
2:06:26actually use that API and build on top
2:06:28of it. So run remember
2:06:32and then restore.
2:06:34And since this is going to be a logic
2:06:36heavy feature at Zuna API call then
2:06:39GPT40 to score per job DB writes post
2:06:44hog events we need to plan before we
2:06:46build. So switch over to plan mode right
2:06:50here and then tell it to check the
2:06:53library docs for the Adzuna API patterns
2:06:57and then architect the feature number
2:06:5910. This is going to take some time
2:07:01until it comes up with a plan. Then
2:07:03we'll be able to check it out and
2:07:05provide some feedback or just tell it to
2:07:07implement it. And in about a minute the
2:07:10plan is in. I like how Claude auto opens
2:07:13the full plan, allows us to add comments
2:07:16or just auto accept it right here. So
2:07:18the goal right here is now that the find
2:07:20jobs page is complete with UI and mog
2:07:23data to implement feature 10 which wires
2:07:26it to Aduna's job discovery API. It'll
2:07:29go and edit a couple of files, then use
2:07:32GPD40 to match it against our current
2:07:34resume or the details that we have left
2:07:36in. So let's go ahead and auto accept
2:07:39the updates and give it another minute
2:07:41to implement them. And after a while,
2:07:43feature 10 is now complete. And here's
2:07:46what was built. Aduna lib file. This is
2:07:49a single file that simply searches for
2:07:52jobs. Just a very simple API call. Then
2:07:55it created a post handler that matches
2:07:58and scores the jobs and also adds that
2:08:01as a post hook event and finally
2:08:03displays it all on the page.
2:08:05So, what do you say that we test it out?
2:08:07Back on local host 3000, if you reload,
2:08:10there's going to be no jobs found yet.
2:08:12So, let's test it. Let's search for a
2:08:15back-end developer job in the US. Find
2:08:18jobs and internal server error with a
2:08:23green background. Okay, not something we
2:08:25want to see, but hopefully we get more
2:08:27information back right here in the
2:08:29terminal. It looks like we got a 401.
2:08:32Okay, auna API error. Maybe if I reload
2:08:35the application so that it gets the
2:08:37proper env keys. That might be a good
2:08:40start. And I'll try it one more time,
2:08:43which is going to give me unfortunately
2:08:44the same error. We're going to take this
2:08:49and simply paste it over to our agent
2:08:51using the recover skill. Looks like it
2:08:54went without the additional info. So
2:08:56I'll pass the info and let's see what it
2:08:58says. This is failure mode one. root
2:09:01cause 401 unauthorized.
2:09:04Oh, it's a Zuna app Lee instead of a
2:09:07key. That's a mistake on my end. Or no,
2:09:10wait, it's not. Why did it actually
2:09:13refer to it as a rename Aduna app Lee?
2:09:17Oh, maybe while I was viewing that file
2:09:19that it created, this one right here, I
2:09:22might have accidentally switched it or
2:09:25maybe it actually misspelled it. Either
2:09:27way, it should be good now. So, we need
2:09:30to restart our developer server.
2:09:33Head back over here, search for a
2:09:35backend developer position in the US,
2:09:39and click find jobs.
2:09:42This time it's loading for a bit of a
2:09:44longer duration, and hopefully we'll see
2:09:46some real jobs start appearing in the
2:09:49table. It was loading for some time, but
2:09:52we actually got back the response. These
2:09:54are real jobs appearing in a table with
2:09:57company names, roles, most importantly
2:10:00the match score which matches against
2:10:03our actual profile data, the source and
2:10:05the date found as well as a salary
2:10:08estimate. You can also search for one.
2:10:10For example, I see vantor right here.
2:10:12You can see there's two. Or maybe I can
2:10:15search for the Java keyword right here,
2:10:18which it picks up from the RO. So with
2:10:20that in mind, the find jobs page is now
2:10:23alive with real jobs and real scores
2:10:26pulled from Aduna and matched against
2:10:28the user's profile by GPT4.
2:10:31Every job at Zuna return got scored and
2:10:34saved to ins.
2:10:37But I went ahead and queried it three
2:10:39times. So that's 30 jobs, 30 database
2:10:43rights, and all scoped to the current
2:10:46user. RLS policies make sure that users
2:10:49can only see their own data and we
2:10:52define that once in the schema but ins
2:10:55will now enforce it across every query
2:10:57automatically. Next, we need to wire up
2:11:00the filters sort and pagionation so the
2:11:03job list actually becomes useful. Don't
2:11:05forget to run remember and then save so
2:11:09that we can focus on pagionation
2:11:11filtering and sorting. Next,
2:11:15now that the jobs are loading, let's
2:11:17make the list actually useful. Right
2:11:19now, everything shows in one flat list
2:11:21with very little way to filter it, sort
2:11:24it, or pageionate it. This feature will
2:11:27wire all of that to real ins data. So
2:11:31let's go ahead and open up a new chat
2:11:34window and let's restore the previous
2:11:37session by telling it remember restore.
2:11:41This one is straightforward pure DB
2:11:44queries already fully defined in the
2:11:46build plan. So if you want to check it
2:11:47out, you can open up the build plan and
2:11:50check out the phase number three
2:11:54specifically the filtering pagionation
2:11:56and sorting feature. We simply need to
2:11:58wire the filter tabs. sort dropdown text
2:12:01search and pagionation to real ins data.
2:12:05Let's do it. You can just tell it to
2:12:07implement the feature 11 and let's give
2:12:10it a second. In about 2 minutes, feature
2:12:12now is now complete um with the get
2:12:15handler that queries inforge data.
2:12:19So if you head back over here, you'll
2:12:21now see that we have 10 posts still.
2:12:23Let's go ahead and search for something
2:12:25like front-end developer in the US
2:12:28again. and it found some jobs and it
2:12:31added them right here to the list. So
2:12:32now we have one out of 20. I think the
2:12:35pagionation is actually set to 20. So
2:12:37that's why it says that we don't have
2:12:38more pages. But we can still sort it by
2:12:41low match. You can see right here as
2:12:44well as a high match.
2:12:47So those are the 70s and above. That's
2:12:49the filtering story. And then if we show
2:12:51all matches, we can also sort it by
2:12:54match score or sort it from newest to
2:12:58oldest as well. And you can also search
2:13:00for a specific title. So if we go with
2:13:03Java, you can see here it is. Or maybe
2:13:06we go with something like React, you can
2:13:08see we have two React opportunities, but
2:13:11unfortunately zero that are a high
2:13:13match. So now that that is done, you can
2:13:15also run remember save to save it. And
2:13:18in the next lesson, we'll implement the
2:13:20page that opens up when you click on a
2:13:23specific job because right now it goes
2:13:26to a 40 or4. So let's do that next.
2:13:31In this lesson, we're building the page
2:13:33where everything comes together, the
2:13:35full job description, how well it
2:13:37matches the user's profile, and which
2:13:39skills they have and which they're
2:13:41missing, as well as the company research
2:13:43section. That's going to be the star of
2:13:45the build. For now, if you click on a
2:13:47job, you'll get to a four or four. So,
2:13:50let's build a page that'll show right
2:13:51here. You can open up a new chat. Feel
2:13:54free to use codeex or cloud code or
2:13:56whatever. I'll randomly switch back to
2:13:58codec just to show you that this
2:13:59workflow is fully agnostic. I'll tell it
2:14:01to build the feature 12 exactly
2:14:06as shown in job details. This is
2:14:10actually going to be coming from designs
2:14:12job details right here. So, we want to
2:14:14build a page that looks something like
2:14:16this. We want to know why it's matching
2:14:18as well as fetch all the additional data
2:14:20about that. And then this company
2:14:22research part is going to be the star of
2:14:24the show. We'll do that with browser
2:14:26base, but more on that soon. So, let's
2:14:29tell AI to build the feature number 12.
2:14:31And after researching it all, in about 2
2:14:34minutes, it figured out what it needs to
2:14:36do and it's applying the edits. And even
2:14:40though in about two minutes it was
2:14:42already more or less done, it took
2:14:44another four to verify that it did
2:14:46everything correctly. I guess that's the
2:14:48difference between claude and CEX if you
2:14:50want to compare them. Codex always tries
2:14:52to be a bit too sure and then it checks
2:14:55everything and make sure that it is
2:14:56done. If you want to stay on the safe
2:14:58side, well that's good. And I also like
2:15:01how it gives me the progress tracker
2:15:03update as well as the UI registry
2:15:04tracker updates right here and then all
2:15:07the edited files below. So you can
2:15:08quickly check out what it did. So what
2:15:10do you say that we go ahead and test it
2:15:12out? Oh, this is actually looking uh
2:15:15amazing. The 404 that I was on
2:15:17immediately transitioned over to a
2:15:19fullon page. Uh this is a back-end
2:15:22developer job at Trioptus LLC. 75% match
2:15:26score. A pretty hefty salary. And I
2:15:28noticed that most of these backend
2:15:30developer jobs have above 100k salary
2:15:34which I guess makes the ultimate backend
2:15:36course uh one of the best courses to
2:15:38take. I'll finalize it and prepare some
2:15:40lessons as soon as I finish the agentic
2:15:43development course. So both of these
2:15:45courses are currently in progress. The
2:15:48weight list is going to be down in the
2:15:49description. The AI course is coming
2:15:51soon as that's the most needed skill
2:15:54right now. And then once you master
2:15:56that, getting better at foundations of
2:15:58backend is going to be the next thing
2:16:00that's going to significantly increase
2:16:01your salary. So that's the next thing to
2:16:03focus on. Now here we can see the AI
2:16:06match reasoning where the candidates
2:16:08Java and SQL skills are a good match for
2:16:11this position. Requires Java 11 and
2:16:13database experience also requires cloud
2:16:16and microservices which are not
2:16:18explicitly stated in the candidates
2:16:19profile. So that's something that we can
2:16:21continue working on. you have these
2:16:23skills and these are the gap. There's a
2:16:26job description right here that you can
2:16:27check out. We can make it so that you
2:16:29can expand the job description to check
2:16:31it out in more details. And I think
2:16:33that's a quick review that we can give
2:16:35it by quickly heading back and telling
2:16:37it review and then say job description
2:16:41is being cut off mids sentence. If it's
2:16:44longer than what the preview allows,
2:16:48find a way to display it. And then I'll
2:16:52provide an example right here of how it
2:16:54gets cut. This should be pretty simple
2:16:56for it to fix. So I'll just go here and
2:16:58wait for the website to update. And
2:17:00there we go. The reason why we actually
2:17:02cut it is because I believe the API
2:17:05provides it cut. So there's this view
2:17:08full job post which takes us to the full
2:17:11job where we can actually open up the
2:17:13description and then apply to that job.
2:17:15And if we check out some other jobs, you
2:17:17can see how they look like too. With
2:17:19that in mind, here we definitely created
2:17:21some new components. So we can run
2:17:23imprint to update our UI registry if
2:17:26that hasn't happened already. And then
2:17:29once that is done, we can save the
2:17:30session by running remember and then
2:17:34save.
2:17:36I like how on codeex it actually figures
2:17:38out that this is an active skill so you
2:17:40know what you're calling. Again, it's
2:17:41pretty cool to be able to use these
2:17:43different tools and then notice the
2:17:45differences. But once you figure out how
2:17:47the workflow works, you'll be able to
2:17:49optimize it no matter the agent that you
2:17:51use.
2:17:54This lesson and the feature we'll
2:17:56implement within it is the part that I'm
2:17:58most excited about. Instead of you
2:18:00opening 10 tabs to figure out what a
2:18:03company actually does, like Rayomine
2:18:06Software Solutions LLC, let's create an
2:18:08agent that when you click this research
2:18:10company button, opens a real browser,
2:18:13visits the company's website, reads what
2:18:16it finds, and pulls all of it into a
2:18:19clean research file. What they do, their
2:18:22tech stack, their culture, and any
2:18:24talking points for your interview, all
2:18:27before you ever click apply. By doing
2:18:28that research, comparing it against the
2:18:31job description that you then compare
2:18:33against your profile is what's going to
2:18:35give you the upper hand when applying
2:18:37for jobs. And this is exactly where
2:18:39browser base and stage hand do the heavy
2:18:42lifting. Browserbase gives us a real
2:18:45managed browser running in the cloud,
2:18:48not a headless scraper, an actual
2:18:50browser session just like you'd open
2:18:52Chrome. And then if you head over to
2:18:54docs and search for stage hand, you'll
2:18:57see that it sits on top of it and lets
2:18:59the agent interact with and extract the
2:19:02content from any page using plain
2:19:04English instructions instead of brittle
2:19:07CSS selectors. And together they'll
2:19:09handle the part of job hunting that's
2:19:12genuinely timeconuming researching who
2:19:15you're actually applying to. And
2:19:17honestly, that's just scratching the
2:19:19surface of what browser base can do. On
2:19:22the paid plan, you get something called
2:19:24a stealth mode that bypasses bot
2:19:27detection on sites like LinkedIn. You
2:19:30also get parallel browsing sessions for
2:19:32running multiple agents at once and
2:19:35session persistence that keeps your
2:19:37login state across runs. that opens up
2:19:39the possibilities which allows you to
2:19:41add additional features to this
2:19:43application such as the ability to auto
2:19:46apply for jobs by automating form
2:19:48submissions. Again, the free plan is
2:19:51more than enough to follow along with
2:19:52this build, but if you want to take it a
2:19:54step further later on, you can give it a
2:19:57shot. So, to follow along and see
2:19:59exactly what I'm seeing, click the
2:20:01browserbased link down in the
2:20:02description and then create your free
2:20:04account. Then, when you're in, you'll be
2:20:06able to see something that looks like
2:20:08this. So you can head over to your
2:20:09project dashboard under overview or you
2:20:13can immediately head over to settings
2:20:15and grab your project ID and API key.
2:20:19Head back within your env.local.
2:20:22Create a new browserbase
2:20:25API key and browser base project ID. I
2:20:32believe that's the first one we copied.
2:20:34And the second one is going to be the
2:20:36API key starting with letters BB as in
2:20:39browser base. So once you have the keys,
2:20:42we can restore the session by heading
2:20:45over to our agent. Again, feel free to
2:20:48use whichever one you like. Start a new
2:20:49session on it to clear the context,
2:20:52but still make it remember what it saved
2:20:55before by running remember restore. And
2:20:58it knows that the next feature is
2:21:00feature 13. So, if you head back over to
2:21:03our context under build plan and you
2:21:06check out 13, you'll be able to see that
2:21:09this one is a bit longer.
2:21:12Here, the agent researches the company
2:21:15using their public website and builds a
2:21:17structured research report using a
2:21:19single browserbased session. Three data
2:21:22sources fused together. The company
2:21:24website content, the job description
2:21:26from DB, and the user profile from DB.
2:21:29Here we do the logic and then what I
2:21:31actually took some more time on is
2:21:34telling stage hand what it needs to do.
2:21:36It needs to capture what the company
2:21:38actually does and any concrete signals
2:21:41like funding, customers, scale, mission,
2:21:44recent launches and then find the
2:21:46internal links most worth visiting to
2:21:49research them as an employer. What does
2:21:52the company do? What do they build or
2:21:54sell and who is it for? Funding notable
2:21:56customers. I mean just imagine if you
2:21:59did all this research and you came to
2:22:01the meeting prepared. Then it'll extract
2:22:03the subpages that helps a candidate
2:22:06understand the company before applying.
2:22:08Finally, we give it a prompt as a sharp
2:22:10career strategist to prepare a candidate
2:22:13for a specific role. We will give the
2:22:16research, the job posting, and the
2:22:18profile. And then it'll tell the user
2:22:20everything it needs to maximize their
2:22:22chances. And this is actually the most
2:22:24complex feature in the entire build
2:22:26where we have real browser sessions
2:22:28through browser base company page
2:22:30navigation, GPD40 synthesis and database
2:22:34rights through insch. So the goal is to
2:22:36plan before we touch anything. So switch
2:22:39over to the plan mode once again. You
2:22:41can see we were using plan mode on cloud
2:22:44code, but on codeex it's just in a
2:22:46different spot, but you can still turn
2:22:48it on. And you can tell it to check the
2:22:50browser
2:22:52as well as the fetch skills and use the
2:22:56library docs context
2:22:58and then architect the feature 13. Let's
2:23:02give it a shot and see what it does.
2:23:06Once it comes back with a plan, we'll be
2:23:08able to implement it. It already made a
2:23:10useful discovery by reading the library
2:23:13docs as it has a newer stage hand
2:23:15initialization shape rather than the
2:23:17older architecture snippet for feature
2:23:1913. The plan should follow the model
2:23:22structure. It's going to check the
2:23:24actual code. Currently everything is
2:23:26empty. Then it's going to look into the
2:23:28Nex.js docs as well as stage hand and
2:23:31browser base. Then it's going to check
2:23:33the insort skill to confirm the SDK
2:23:36pattern. It's actually doing a ton of
2:23:38work behind the scenes on making all
2:23:40this happen. And this is the difference
2:23:43between vibe coding and agentic
2:23:46development. So if what you're seeing
2:23:48right here is impressive, definitely
2:23:50check out the agentic development weight
2:23:52list as the full course is coming soon.
2:23:55But yeah, very quickly it went through
2:23:58it and it asked us a couple of questions
2:24:01to make sure that it planned it
2:24:02properly. It's asking whether the
2:24:04company research means a one-time
2:24:07doseier generated for one save job
2:24:09stored on jobs.co company research not a
2:24:13reusable company profile. Yep, that
2:24:15works. And doier means the updated nine
2:24:18field JSON shape from contextu plan with
2:24:21overview text stack culture. Yep, that's
2:24:23exactly what it means. The browser
2:24:25research means browser base plus stage
2:24:28hand visiting the company's own public
2:24:30website profile. fallback synthesis to
2:24:3240 and research company buttons. That's
2:24:35the interaction on the client side. Yep,
2:24:37that's exactly what all of these mean.
2:24:39So, we can just say go ahead and
2:24:41proceed. Then it came back with the
2:24:43follow-up. Should feature 13 resolve the
2:24:46company homepage before opening stage
2:24:48hand. And in this case, I'll go with the
2:24:50browserbased fetch API as it includes
2:24:53the redirects which will allow us to
2:24:55handle tougher sites than the regular
2:24:57fetch API. And then the second question
2:24:59is what should happen when a job already
2:25:01has a company research saved. In this
2:25:04case, we can go with the recommended
2:25:05approach which is to just render it.
2:25:08Show the saved one and hide the generate
2:25:11action to avoid duplicate paid runs.
2:25:15Perfect. With this in mind, it should be
2:25:17able to build it out. And the plan is
2:25:20officially here. Build feature 13 as a
2:25:23user triggered research flow on the job
2:25:25details page. A clientside research
2:25:28company action calls the post API agent
2:25:31research which authenticates the user
2:25:34loads the user scope job and profile
2:25:36from ins resolves the likely company
2:25:39homepage with browserbased fetch API
2:25:41visits the company's site with one
2:25:43browserbase or stage hand session and
2:25:45then synthesizes a candidate specific
2:25:48dosier with GPT40 saves it to jobs
2:25:52company research tracks the company's
2:25:54researched and then refreshes the job
2:25:57details page. This is amazing and you
2:26:00can go over all of the details on how
2:26:02it's going to do it. Now, in this case,
2:26:04it looks like I'm out of Codex messages.
2:26:06So, that's why it's super useful to have
2:26:08two subscriptions active, like one from
2:26:11Claude and Codex. And then using this
2:26:13workflow, you can always switch between
2:26:16the two. That's another pro tip because
2:26:18two subscriptions of $20 are still
2:26:21cheaper than a single Mac subscription
2:26:23that's about 100 bucks. So, let's see if
2:26:26it can actually proceed with
2:26:27implementing this plan. If not, we'll
2:26:30just copy this MDX and paste it over
2:26:33into another coding agent. It looks like
2:26:35it doesn't want us to do that. So, it'll
2:26:37listen to us and try to implement the
2:26:39plan. Let's give it some time. And in
2:26:42about 7 minutes, it's done. Implemented
2:26:44feature 13 and to end. Build a company
2:26:48research agent flow across agent
2:26:50research route files company research
2:26:52and research company button which now
2:26:54resolves the URLs via browserbased fetch
2:26:57runs stage hand extraction synthesizes
2:27:00this nine field GPT dosier saves it logs
2:27:03progress and refreshes the details. So
2:27:06what do you say that we give it a shot?
2:27:08Back on localhost 3000, I'll go ahead
2:27:11and choose a back-end developer job that
2:27:14is maybe not the best fit, but that I
2:27:16really much like this front-end
2:27:18developer with Cloudflare with a huge
2:27:21salary. Let's go with Optino. The role
2:27:24requires JavaScript, which the candidate
2:27:26has also has specific Cloudflare
2:27:28services. So here we have some job
2:27:31description but below we can do full
2:27:33company research but I don't see a
2:27:36research company button even though it
2:27:38says that it implemented it. Research
2:27:40company button. Let's see where does
2:27:42this button actually appear. Research
2:27:45company button. It looks like it appears
2:27:49right here.
2:27:51If there's no research, it should appear
2:27:54under the company research card. So
2:27:56maybe it thinks that this company was
2:27:58already researched. Let me see if I
2:28:00manually remove this check right here.
2:28:03The button is here. So for some reason,
2:28:06it thinks that the company has been
2:28:07researched beforehand. Let's go ahead
2:28:09and run a review
2:28:12and tell it that the research company
2:28:16button is not
2:28:19visible. But unfortunately for now, we
2:28:22are really out of credits. So I'll copy
2:28:24this message. And this is going to be a
2:28:27real proof that this workflow is fully
2:28:29agent agnostic even within working on
2:28:31specific features. And I'll tell it that
2:28:34the research company button is not
2:28:37visible. And I'll tell it to review it.
2:28:40Even though Claude wasn't the one who
2:28:42worked on this feature, it's actually
2:28:44checking out its competitors Codex's
2:28:46code. It immediately was able to find a
2:28:48button visibility bug where the button
2:28:51visibility specifically has research is
2:28:54broken. So the fix is pretty
2:28:56straightforward. Let's go ahead and tell
2:28:58it to apply the fix.
2:29:01And there we go. In about a second, the
2:29:03research company button is now rendered
2:29:05inside the empty state panel directly
2:29:08below the candidate specific briefing.
2:29:11So if we come back, there's a big
2:29:12research company button. So let's give
2:29:15it a shot. It says researching, but
2:29:17since this is the biggest feature in the
2:29:19entire application, I assume that it's
2:29:21not going to work on the first try. It
2:29:23says fail to load job. And if we open up
2:29:26the terminal, we get a bit more info. So
2:29:29I'll copy it and tell it to review it.
2:29:32Specifically, when I click research
2:29:35company, this is what I get. And we can
2:29:39also provide this failed to load job
2:29:41message. The more context you provided,
2:29:44the better. Thankfully, the error is
2:29:46super clear. The company research column
2:29:49doesn't exist in the database. So, it's
2:29:51going to check the migration files to
2:29:53understand what actually happened. That
2:29:55column was never added to the migration
2:29:57file. So, it'll likely ask us to just
2:30:01run it via the InsForge CLI, which
2:30:04thankfully makes it super simple. And
2:30:06the way that InsForge interacts with
2:30:08agents is just so seamless and makes it
2:30:11the best way to develop a backend for
2:30:13any kind of application that I'm
2:30:15building with AI. So, let's give it a
2:30:17moment. There we go. The migration
2:30:19applied successfully. The column now
2:30:22exists. So the research company button
2:30:24should now work end to end. Well, let's
2:30:26see whether that's really the case. I'll
2:30:28once again click research company. It'll
2:30:31load and say researching. And since this
2:30:34is a long process, another update that
2:30:36we can do is make some kind of a loading
2:30:38card with a multi-step process to give
2:30:41the user a bit of an idea of what is
2:30:44currently happening. Actually, that's a
2:30:47feature that's not a part of the initial
2:30:49build plan, but a perfect one for you to
2:30:51test how this workflow works when you
2:30:53want to add some new features. So, very
2:30:55soon we'll be done with the build. Just
2:30:57a few more features to go. Go ahead and
2:30:59implement that full modal multi-step
2:31:02loading system. It'll be a nice quality
2:31:05of life change for the users so that
2:31:06they don't have to stare at the screen
2:31:08and think whether something went wrong.
2:31:10But with that in mind, in about 20
2:31:12seconds or so, we got a full company
2:31:15research. It includes the tech stack
2:31:17that the company works with, the
2:31:19culture, certified women's business
2:31:22enterprise. Okay, that's good. So, if
2:31:24you're a woman, you might have an edge
2:31:26here. uh your edge specifically is
2:31:28extensive experience in software
2:31:30engineering particularly JavaScript
2:31:32which aligns well with the core
2:31:34requirements of the role. The history of
2:31:36optimizing performance and implementing
2:31:38prediction algorithms at Apple
2:31:40demonstrates your capability to handle
2:31:42CDN optimization gaps to address while
2:31:45you lack direct experience with
2:31:46Cloudflare. Emphasize your quick
2:31:48learning ability and past experience
2:31:50with similar technologies and leverage
2:31:52your JavaScript expertise to bridge the
2:31:54gap in Typescript.
2:31:56Smart questions. How does Optinino's
2:31:59integrate Cloudflare edge computing
2:32:00capabilities? And then it gives you some
2:32:02smart questions that you can ask as well
2:32:04as some points for your interview
2:32:06preparation. And then it gives you some
2:32:08info on why this role is a good fit for
2:32:10you. So now you can very easily click
2:32:12this button and apply through the direct
2:32:15site. If you experienced any issues on
2:32:17implementing this feature, just use the
2:32:19recover functionality and tell it what
2:32:21went wrong. Don't forget to update the
2:32:23progress tracker if it hasn't been
2:32:25updated yet to tell it that this feature
2:32:28was completed. This means that the agent
2:32:31just researched a company for you
2:32:33through a real browser getting real data
2:32:36and creating a real research report. And
2:32:39now to be implemented what I believe is
2:32:41one of the most important
2:32:42functionalities of the app. We want to
2:32:44make sure that our users actually use
2:32:46it. So it's time to head back over to
2:32:49your Post Hog dashboard. Under browse
2:32:52activity, you'll be able to see a lot of
2:32:55different events that were fired such as
2:32:57web vitals, company researched, page
2:33:00views, page leaves, research company,
2:33:02and so on. If you click on this company
2:33:04researched, you'll also be able to get
2:33:06more data on exactly what company that
2:33:09was. So if you open up Posthog AI from
2:33:11the right side, instead of getting lost
2:33:13in all of these events, you can simply
2:33:16ask it a question like which companies
2:33:18have been researched so far and it'll
2:33:20look for the company related data in the
2:33:22project. It figured out that we're
2:33:24looking for a company researched event.
2:33:27So, it's going to pull all the
2:33:28properties and sample values to find
2:33:31which companies have been researched.
2:33:33For now, there's only one value. It
2:33:35switch the agent to the SQL mode to
2:33:37extract it from our database and it gave
2:33:40us back the table. Optino was the only
2:33:43company that was researched. Of course,
2:33:45right now we're the only user that has
2:33:46been using the app and this is the only
2:33:48company that we researched, but with
2:33:50time I'm sure that you can see how
2:33:52useful this is going to become. So, this
2:33:54is just the start of what POS can do. In
2:33:57production, you'd use this to understand
2:33:59how users are actually behaving, which
2:34:02jobs did they research, where they drop
2:34:04off, and which match scores lead to
2:34:06applications. There's also other things
2:34:08like feature flags, web analytics,
2:34:11session replays, where you can see
2:34:13exactly how users are using your app,
2:34:15which is great if just looking at the
2:34:17data is unclear. So here you can filter
2:34:20by specific events for example web
2:34:23vitals clicking different buttons or you
2:34:26can also use AI to summarize what
2:34:28happened in this session. So it's
2:34:30actually going to render the video
2:34:32upload it for analysis analyze the
2:34:34segments and tell you what the user is
2:34:36doing on the page. And while it's doing
2:34:39that I'm just also noticing this
2:34:41notification here saying that Posthog is
2:34:43now available in Slack. And this is what
2:34:46I've been waiting for for a long time.
2:34:49The ability to ask Post Hog questions
2:34:52about your product data, debug issues,
2:34:54and generate PRs directly within Slack
2:34:57is something that my team will find
2:34:59super useful. So, let's click on this.
2:35:01And you know what? Since this is the
2:35:03first time that I'm seeing this, let me
2:35:05actually go ahead and hook it up to our
2:35:08real company Slack channel because I'm
2:35:10certain that this is something that both
2:35:11our engineers, designers, and marketers
2:35:14are going to abuse. So, let's click
2:35:16connect Slack right here. I'll select my
2:35:18workspace and give it permissions. And
2:35:22is that it? I just opened up the JS
2:35:24Mastery official Slack on marketing.
2:35:27Sundus here is asking some questions
2:35:29about pulling some specific data. And
2:35:31this is no joke. This happened
2:35:32yesterday. Frank said that we should
2:35:35keep everything up to date. And now I'm
2:35:37just testing Post Hog here. It tells me
2:35:39that it can answer any data questions or
2:35:42help with code. What should it dig into?
2:35:44Well, let me ask it right here. Hey,
2:35:47Post Hog, can you tell me how many users
2:35:51we have on jsmastery.com?
2:35:56Let's see if it can answer that. Okay, I
2:35:58guess this means that it's starting to
2:36:00work on it. Immediately, I get a
2:36:02response saying working on a task stage
2:36:05in progress. And in about a minute, it
2:36:08came back with a response. It's looking
2:36:10at our jsmastery.pro project, which now
2:36:12that I'm looking at, we should have
2:36:14changed the name to jsmastery.com
2:36:16because that's the real domain, which we
2:36:18finally have. But yeah, it's taking a
2:36:20look at the number of users based on the
2:36:22page view events that exist on the page.
2:36:25And it looks like there were almost a
2:36:28million of you visiting jsmastery.com
2:36:32recently.
2:36:34This goes back to late February 2025.
2:36:36And I'm super grateful for so many of
2:36:39you visiting the site. Now, of course,
2:36:41it can further break that down by a
2:36:43monthly trend, by country, or just
2:36:46active users over the last 30 days. But
2:36:48let me instead ask it another question.
2:36:51Let's ask it which is the best course on
2:36:54JSMy.pro.
2:36:57Obviously, best is subjective, but I
2:36:59want to see how it'll approach it. We
2:37:01can maybe tell it just give me the
2:37:03ranking 1 2 3 without listing the
2:37:06specific sale numbers, but you can do it
2:37:08by page visits instead. And let's not
2:37:11forget to tag the hog at the start.
2:37:14Funny enough, this time it actually put
2:37:16the eyes emoji instead of the seed. So,
2:37:20I'm guessing that it is working on it.
2:37:23While it is working on it, we can head
2:37:25back to session replays where it
2:37:27successfully analyzed the video session
2:37:30that we had. And I'm not sure if you
2:37:31heard that. I just got a Slack
2:37:33notification. And it said, I'll rank the
2:37:36courses by page visits based on the
2:37:38total page visits across jsmastery.com.
2:37:41Here's the top three. Ultimate NextJS15
2:37:44course, then the GEP animations course,
2:37:47and then the Ultimate Next.js course.
2:37:49I'm guessing this is the older version
2:37:50when we had versions 13 and 14 which we
2:37:53later updated to 15 and then later on
2:37:5616. And then the GUP course is following
2:37:58along nicely. And of course the next
2:38:00goal is to completely change this list
2:38:03to make the agent coursees the number
2:38:05one and then the backend course that
2:38:07we're working on follow closely on the
2:38:09second spot. But yeah, this is super
2:38:12useful. I think you can already see how
2:38:15if you're working within a team or if
2:38:16you just use a Slack for yourself or
2:38:18your partners, it's super useful to be
2:38:21able to speak with it and it's going to
2:38:23come back with useful data directly from
2:38:25your app. So, finally, let's take a look
2:38:27at what it researched. The user
2:38:29successfully browsed job listings,
2:38:32generated company research for a
2:38:33specific role despite initial errors,
2:38:36review the research, and then proceeded
2:38:38to apply. This is super useful data. So
2:38:42it was able to figure out what we were
2:38:44clicking and that the user actually
2:38:46proceeded to apply after getting the
2:38:48company research and then also how long
2:38:51they were staying at each part of the
2:38:53journey and how many issues they
2:38:55experienced. This info is incredibly
2:38:58valuable and as a developer working on
2:39:01your product, especially if you're doing
2:39:02it solo or as a part of a small team
2:39:05where you can have a full marketing
2:39:07department, the amount of decisions that
2:39:08you can make based on the data that Post
2:39:11Hog gives you is just astounding. So
2:39:13yeah, what do you say that we go ahead
2:39:15and build out a few more features and
2:39:17then we come back to Post Hog one last
2:39:20time once the full features have been
2:39:22implemented. Oh, and I just finished
2:39:24recording the last lesson and a couple
2:39:26of minutes ago, Sundus, our marketing
2:39:29person, just replied, "Crazy amazing how
2:39:32we can just do that easily now." And
2:39:34then proceeded to tag Post Hog and asked
2:39:38how many signups JSM comm has. So, the
2:39:42fact that she was able to figure out
2:39:44that the only thing she needs to do is
2:39:45just tag this Slack app and ask it a
2:39:48question is great. It then proceeded to
2:39:51find the signup events, measured all of
2:39:54them together, and told her that JSM has
2:39:57about 160K total signups. I think this
2:40:00is the best and most honest showcase of
2:40:03how I'm personally using Posthog for
2:40:05jsmastery.com.
2:40:07But yeah, with that in mind, let's
2:40:09proceed with the build.
2:40:12We're getting very close to finalizing
2:40:14the application. The landing page is
2:40:16here. Profile page is done. finding jobs
2:40:19page is done as well. So, what's
2:40:22remaining is the dashboard. That's
2:40:24because finding jobs doesn't take just
2:40:26an hour. You're done and you'll be out
2:40:28of the app. No, you'll likely apply to a
2:40:31couple of different companies, compare
2:40:33the salaries and the match scores, track
2:40:36when interviews are happening and so on.
2:40:38So, we can do all of that within the
2:40:40dashboard. Thankfully, within the
2:40:42designs, we have a very simple dashboard
2:40:45design. total jobs found, average match
2:40:48rate, companies researched, jobs this
2:40:51week, as well as the recent activity,
2:40:54and a couple of different graphs. So,
2:40:56opening up one of our chats, I'll switch
2:40:58back to Claude code. Open up a new chat
2:41:02and say remember restore to restore the
2:41:06latest session. And then we can tell it
2:41:09to build feature 14 exactly as shown in
2:41:13the context designs dashboard.png image.
2:41:17In this case, since this is just the UI,
2:41:19we don't have to run the architect
2:41:21feature. We can just build the UI. So
2:41:24let's tell it to build it. And let's see
2:41:26what it comes back with. To do it, it'll
2:41:28first install Recharts, which it'll use
2:41:31to create some charts, and then create
2:41:34separate components for the stats bar,
2:41:36recent activity, analytics, charts, and
2:41:38finally wire it all up within the same
2:41:41page. So, let's see how well it does it,
2:41:44and most importantly, how well will it
2:41:46follow the rest of the design language.
2:41:49And would you take a look at this? I
2:41:53mean before this would be a video on its
2:41:55own. Just creating this UI would take a
2:41:58couple of hours to teach it properly
2:42:00with charts and displaying it and
2:42:02hovering over the charts. This recent
2:42:05activity section, the cards with the
2:42:07badges and the numbers right here. I
2:42:10mean, this is just out of this world.
2:42:13But in the next lesson, let's see if we
2:42:16can actually make this data dynamic
2:42:19coming from the ins backend and the
2:42:21database.
2:42:24In the previous lesson, we just created
2:42:27these mock components. And since this
2:42:29one contained a lot of components, I can
2:42:32see that it is still adding them as
2:42:34parts of the UI registry. So in the
2:42:36future, it immediately knows how these
2:42:39kind of dashboard cards and charts look
2:42:41like. But now it's time to wire them up
2:42:44to real data. The goal here is to wire
2:42:47up the four stat cards to real ins
2:42:50database for current user. This one
2:42:53doesn't actually require the architect
2:42:55mode. So I think it's even safe to do it
2:42:58in the previous session right here where
2:43:00we did the UI. I'll simply tell it
2:43:02implement feature 15.
2:43:07it'll figure out that it has to wire up
2:43:09the four stats card. Yep, there we go.
2:43:13To real database. So, it'll query
2:43:15insorgge directly and update them. Let's
2:43:18give it a second to do that. And in
2:43:20about half a minute, it is done and it's
2:43:22already updating the progress tracker.
2:43:24So, if we come back, total jobs found is
2:43:27now set to 20. Average match rate is 43.
2:43:31We definitely got to bump those numbers
2:43:32up. Company's research this is done
2:43:35using browser base is set to one and
2:43:38then jobs this week is set to 20. What
2:43:41do you say that we implement the recent
2:43:43activity next so we can see what the
2:43:45user is doing? Since this is just two DB
2:43:48queries through Ins and thankfully our
2:43:51agent knows everything that is happening
2:43:53with Ins and backend and database
2:43:56systems because it's built from the
2:43:57ground up to work with it. We can simply
2:44:00tell it to implement feature 16 and
2:44:02it'll know what it needs to do. The goal
2:44:05here is to run agent runs plus jobs with
2:44:09company research. Merge them and then
2:44:12say what happened and then give it some
2:44:13kind of time frame like 10 minutes ago,
2:44:15an hour ago or yesterday. It figured out
2:44:18that we already have a format date. It's
2:44:21going to update the dashboard page to
2:44:23fetch those agent runs plus research
2:44:26jobs and build the activity list. Of
2:44:29course, we have some errors while it
2:44:30actually fetches it. And believe it or
2:44:32not, and I was doing this real time as I
2:44:35was speaking, it was able to build a
2:44:37real recent activity list where it found
2:44:4110 jobs for back-end developer job. Then
2:44:43we researched the Optino company and
2:44:46then it gave us 10 more jobs. We can
2:44:48verify that this data is real by heading
2:44:51over here, searching for some front-end
2:44:53jobs in New York, for example. And in
2:44:57this case, it looks like we found 10
2:44:59jobs, one matching almost perfectly. So
2:45:03what I'll do is I will sort it by only
2:45:05high matches. Looking for a front-end
2:45:09position. Oh no, looks like all of our
2:45:11front-end positions are very low match
2:45:13score because the developer info that we
2:45:16filled in for this currently logged in
2:45:18developer matches that of a back-end
2:45:21engineer. Let's say that we wanted to
2:45:22make a switch to a front-end engineering
2:45:25position. What would we have to learn
2:45:27about to make it in this company? I will
2:45:30click research company. Commencing the
2:45:33browser base which will start the
2:45:35browserbased browser behind the scenes
2:45:37doing all the research for us opening
2:45:40many different pages. And if I'm not
2:45:42mistaken, there's even an option to show
2:45:44you what is happening. So you can look
2:45:47into that and implement that as an
2:45:49additional feature to the app so the
2:45:51user knows what's happening behind the
2:45:53scenes. But again kind of the point of
2:45:55this is so that you can go away do
2:45:57something else and then very soon the
2:46:00agent comes back and gives you the full
2:46:02research like this. This is a
2:46:04venture-backed company focusing on
2:46:06building operational infrastructure for
2:46:08sensitive technologies. It seems that I
2:46:11lack direct experience with AI and
2:46:13modern front-end frameworks,
2:46:16but we should emphasize our strong
2:46:18problem solving and adaptability. And of
2:46:21course, since we're not focused on
2:46:22React, we should practice our modern
2:46:25front-end frameworks and prepare
2:46:27examples that we worked on in the past.
2:46:30Perfect. So now, if you head back under
2:46:33our dashboard, you can see total jobs
2:46:35found 30, found 10 jobs for front end,
2:46:38and researched Linero. So finally if we
2:46:42go back the last feature we need to
2:46:44implement for now is going to be feature
2:46:4717 analytics charts and post hog data.
2:46:51So now the goal is to wire three
2:46:53dashboard charts to real post hog event
2:46:56data for the current user. Since this
2:46:59one is using post hog I actually want to
2:47:01plan it properly. So I will run remember
2:47:04save right here and then open up a new
2:47:08chat window and tell it to check the
2:47:11post hog MCP and the library docs and
2:47:15then architect the feature 17 in plan
2:47:18mode. And what's cool about claude code
2:47:21is that it does these things in
2:47:23parallel. So one agent is exploring the
2:47:26project context files for feature 17
2:47:28while the other is exploring the
2:47:30existing codebase structure. Let's give
2:47:32it a second to come back with a plan and
2:47:34then we'll see whether it's ready to be
2:47:36implemented. And very quickly, feature
2:47:3917 is in. The dashboard already renders
2:47:42three chart components, but all three
2:47:45components use hardcoded mock data.
2:47:48Feature 17 replaces that mock data with
2:47:51real per user event data fetched server
2:47:54side from Post Hog's query API using
2:47:58Post Hog node. Posog MCP is installed
2:48:02but requires OATH. We don't need it for
2:48:05implementation since post node SDK
2:48:08already has what we need and the
2:48:10projects lib post hook server is
2:48:13established. So we want to track four
2:48:15different events. Job search started,
2:48:17job found, profile completed, company
2:48:20researched. So let's go ahead and accept
2:48:23it
2:48:24and see how it does. As soon as it
2:48:26implements it, this will have concluded
2:48:29our fivephase build where we started
2:48:32with foundations, moved over into the
2:48:34profile, then find jobs functionalities
2:48:37with browser base, job details and
2:48:40company research and finally the
2:48:42dashboard. So, this is actually an
2:48:44interesting way of using PostHog because
2:48:46we're directly using the events that are
2:48:50typically used on the backend side where
2:48:51you track what your users are doing, but
2:48:54now we're going to use them to display
2:48:56them to our users as well, which is the
2:48:58first time that I'm using Posthog in
2:49:00that way, but I guess it makes sense
2:49:03with dashboard style applications. In
2:49:05any other kind of application, you would
2:49:07just go to your Post Hog dashboard and
2:49:09take a look at all the events right here
2:49:11and then create some kind of dashboards
2:49:13either manually or with Post Hog AI or
2:49:16just ask it questions through Slack like
2:49:19what I've just showed you. But there's
2:49:20also a possibility of using its data to
2:49:23display it within your own application.
2:49:26So, let's see how it does. And the build
2:49:29comes back cleanly. Here's a summary of
2:49:31what was done. The three hard-coded mock
2:49:35data arrays were removed and now it's
2:49:38pulling the data from Posthog to display
2:49:41real data. Interestingly, it decided not
2:49:44to use Posthog query API because the
2:49:46Post Hog node V5 SDK doesn't expose the
2:49:50query and the query API requires a
2:49:52personal API key. So, what we could have
2:49:55done is provided it the personal API key
2:49:58and that would be good. but instead it
2:50:00said you can take a look at that data
2:50:02within your post dashboard or give me
2:50:05your personal key if you want to. But
2:50:08hey, I already have all of that data
2:50:10through the ins jobs table and that is
2:50:13the authoritative source anyway because
2:50:15post hook events are derived from it. So
2:50:18querying the DB directly is more
2:50:20reliable and cheaper. So that's what it
2:50:23did. Take a look at this company
2:50:25research activity. Today is Friday. We
2:50:28get two new companies, jobs found over
2:50:31time. Today we did 30, but you can of
2:50:33course research more over time. And now
2:50:36that I'm looking at this graph, maybe
2:50:38it'll be useful if we were hitting some
2:50:40limits. So if you wanted to implement
2:50:43billing to the users, you can let them
2:50:45know that maybe their limit is 30 per
2:50:47day, so they can come back tomorrow or
2:50:50they can upgrade to another plan to use
2:50:53this SAS. Because if you think about it,
2:50:56what you just developed is a job
2:50:58searching SAS platform. So with a few
2:51:01more additions, I'm sure you'll be able
2:51:03to charge some money for it. And
2:51:04finally, there's the match score
2:51:06distribution, and it looks like we are a
2:51:09great fit for a lot of jobs, but for
2:51:12none, we're perfect. So maybe we still
2:51:14have to do some search and find the jobs
2:51:16that we are really the perfect match
2:51:18for, and definitely not apply for jobs
2:51:21like these. And yeah, talking about
2:51:23Posthog, let's see what it can actually
2:51:26tell us about how the app is being used.
2:51:28In this case, I prefer using the AI
2:51:31chat. So, let's ask it, what's the
2:51:33average match score of jobs found this
2:51:36week? Again, this is a pretty vague
2:51:39search term, especially since we're not
2:51:41mentioning any specific event names, but
2:51:45it did found the job found event, and
2:51:48it's going to check some properties to
2:51:49see whether it includes the match score.
2:51:52There we go. Match score is a numeric
2:51:55property on job found. So, that's all it
2:51:57needs to create an insight. And there we
2:51:59go. Here it is. The average match score
2:52:02is 40. So after a couple of days, if the
2:52:05user keeps improving their score, then
2:52:08it might be better tomorrow and the day
2:52:10after. Now what you can do is open this
2:52:12up as a new insight and then even save
2:52:15it to your dashboard. So now when you go
2:52:17back to the insight list, you can see
2:52:19this is a new insight which you can then
2:52:22add to one of your dashboards. But okay,
2:52:25what else can we ask it? Maybe like
2:52:28what's the gap between finding a job and
2:52:30researching the company? A pretty vague
2:52:33question and also very specific to the
2:52:36business logic of this specific app. Oh,
2:52:39and while it's running that, another
2:52:41interesting question might be what
2:52:43percentage of found jobs get company
2:52:46research run on them? Okay, here it
2:52:50created a funnel of jobs found and then
2:52:52the companies researched. But I want to
2:52:54run this question because it'll tell us
2:52:57exactly how engaged our users are. Out
2:53:00of every job the agent finds, how many
2:53:03actually gets researched? This is the
2:53:05kind of behavioral insight that would
2:53:07normally take hours to set up in a
2:53:10traditional analytics tool. Here we get
2:53:12it in one question. So it looks like it
2:53:15is about 6.7%.
2:53:18So in practice only one out of 15 found
2:53:21jobs get company research run on it.
2:53:24That's a significant drop off and likely
2:53:26a big opportunity. So we have to answer
2:53:29a couple of questions. Is the company
2:53:31research hard to find or access or is
2:53:34this event firing correctly or are there
2:53:37certain types of users more likely to
2:53:39research? And then you can dig further
2:53:41into some of these angles with Post Hog.
2:53:44What would be cool is some kind of a
2:53:46coding agent that understands these post
2:53:49hog insights as well as our code that
2:53:52would then be able to develop the
2:53:54features to improve upon what this
2:53:57insight is saying is not ideal. Maybe in
2:54:00the future. But yeah, this was pushog in
2:54:03production. Not just tracking something
2:54:06that happened, but understanding what it
2:54:08means. Oh, and this Slack thing which
2:54:11looks like Sundus is having a field trip
2:54:14with asking it even more questions and
2:54:17it's giving back very useful insights.
2:54:19So yeah, that's Job Pilot, a full stack
2:54:23AI agent that finds jobs, scores them
2:54:27based on your resume or profile data,
2:54:30and gives your users a genuine edge
2:54:32before they click apply. It's built in a
2:54:34couple of days, not months, by directing
2:54:37an AI agent instead of fighting one. And
2:54:40what helped significantly is the fact
2:54:43that we used insch because it's built
2:54:46from the ground up to communicate with
2:54:48the agent and allow it to build a full
2:54:51back-end system including o databases,
2:54:55storage, functions, and more directly
2:54:57from within your agent chat. So, it was
2:55:00the key part of our entire Agentic
2:55:02workflow in this video. And if you want
2:55:04to go deeper on all of this, there's an
2:55:07Aentic development course coming soon.
2:55:09I'll leave the weight list link down in
2:55:11the description. It'll cover everything
2:55:14from the ground up. How to research and
2:55:16plan a project with AI before you write
2:55:19a single line of code. How to build
2:55:21context files for any project. How to
2:55:23create your own custom skills like the
2:55:26ones we had here. how to use AI in a way
2:55:28that actually holds together across
2:55:31features and across entire production
2:55:33databases, not just for one impressive
2:55:36demo. Once again, the weight list is now
2:55:38open and you can join it by clicking the
2:55:40link in the description. If this video
2:55:42helped,
2:55:44leave a like, comment, and subscribe and
2:55:47share it with other developers who are
2:55:49still fighting their AI agent instead of
2:55:51directing it. Or maybe don't. Maybe keep
2:55:54it just for yourself. Either way, I'll
2:55:56see you in the next one. Thank you for
2:55:58watching and have a wonderful day.

About this transcript

This page contains the full transcript of How Senior Engineers Actually Build with AI in 2026 | Build a Full Stack Job Applications Platform by JavaScript Mastery, generated from the public captions YouTube serves with the video. The transcript has 29,691 words across 4,267 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.