Download "AI Course for Developers – Build AI-Powered Apps with React"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FPtETUYa3i2Q%252Fmaxresdefault.webp&w=1139&q=75)
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F7_uGUDmm780%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCRraHg4Ks_g%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCyCUZAf8xSU%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FhuszaaJPjU8%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FmEahc3UbSq4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fmpk4Q5feWaw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fu1NMxMqoqtY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FzkafOIyQM8s%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
00:00:00
[Music]00:00:01
AI is everywhere, but have you actually00:00:03
built something with it? In this course,00:00:05
you will learn how to build real AI00:00:07
powered features like the ones you see00:00:09
in apps from Google, Amazon, and beyond.00:00:12
We'll start by building a solid00:00:14
foundation, understanding language00:00:16
models, tokens, context windows,00:00:18
choosing the right models, model00:00:20
settings, and prompt engineering. Then00:00:22
we'll build projects starting with a00:00:24
chatbot that can answer questions about00:00:26
an imaginary theme park, helping00:00:28
visitors find what they need faster.00:00:31
Next, we'll create a tool that analyzes00:00:33
customer feedback and delivers clear,00:00:36
actionable insights so users can make00:00:38
shorter decisions in seconds. And00:00:40
finally, we'll wrap up with powerful00:00:42
open-source integrations you can run00:00:45
anywhere. Along the way, you will learn00:00:47
clean architecture principles, follow00:00:49
best practices, and work with modern00:00:51
tools like Bun, Tailwind, Shatsen,00:00:54
Prisma, and Olama. By the end, you will00:00:57
have the skills and confidence to build00:00:59
AI powered apps people actually want to00:01:01
use. I'm Mash Hamadani, a software00:01:04
engineer with over 20 years of00:01:05
experience, and I've taught millions how00:01:08
to code and become professional software00:01:10
engineers through my YouTube channel and00:01:12
online school, codewithmarsh.com. If00:01:14
you're new here, make sure to subscribe00:01:16
as I upload new videos all the time.00:01:18
Now, let's jump in and get started.00:01:25
[Music]00:01:31
Before we dive in, let's talk about what00:01:33
you'll need to know to get the most out00:01:35
of this course. The ideal student is00:01:38
someone who already knows the basics of00:01:40
front-end development and wants to bring00:01:42
AI into their applications to make them00:01:44
more engaging and smarter. That means00:01:46
you should be comfortable with modern00:01:48
JavaScript and TypeScript things like00:01:50
arrow functions, destructuring,00:01:52
promises, and async and await. You00:01:54
should also know how to build simple00:01:56
React applications. You should know how00:01:58
to create components, work with JSX, and00:02:01
use the state and effect hooks. Just the00:02:04
basics. You don't need to be a React00:02:05
expert. If you know a bit of backend00:02:07
development and databases, that's great,00:02:10
but not required. The same goes with AI.00:02:12
You don't need any prior experience. I00:02:14
will walk you through everything step by00:02:16
step. If that sounds like you, you're00:02:18
ready to get started.00:02:21
[Music]00:02:24
Assuming that you're the right student00:02:26
for this course, let me give you a quick00:02:28
overview of how it's structured and what00:02:30
to expect. First, let me tell you what00:02:33
this course is not. If you're looking00:02:35
for one of those build an app with AI in00:02:37
1 hour miracles, you know, where you00:02:39
paste a few prompts into chat GPT, sit00:02:42
back with the latte, and poof, your00:02:44
billion dollar startup is ready. This00:02:45
isn't that course. We are not doing VIP00:02:47
coding here. We're building smart00:02:49
features with AI, the kind that actually00:02:51
make your apps more useful and more00:02:53
engaging. And we'll do it the right way00:02:55
so you understand exactly what's going00:02:57
on under the hood. All right, here's how00:02:59
the course is laid out. In section one,00:03:02
we'll start with the foundations. You'll00:03:04
learn what language models are, what00:03:06
they can do, and how to work with them.00:03:08
We'll talk about tokens, context00:03:10
windows, model settings like00:03:12
temperature, and how to call models.00:03:14
This section sets you up with the00:03:15
concepts you need before we dive into00:03:17
building. Section two is all about00:03:20
setting up a modern full stack project00:03:22
from scratch. Now, we could use Nex.js00:03:24
JS here, but I decided not to because00:03:26
not everybody uses it or even likes it00:03:29
and some developers prefer to keep the00:03:31
front end and back end completely00:03:33
separate. So in this course, we'll keep00:03:36
the back end and front end completely00:03:37
separate. This helps you clearly see how00:03:40
the two parts talk to each other. We'll00:03:42
use a modern stack with bun, express,00:03:45
react, tailwind, and chaten. And don't00:03:48
worry if you haven't used these tools00:03:49
before. I'll teach you everything from00:03:51
scratch. Now, if you prefer Nex.js, JS,00:03:53
you can still apply everything you learn00:03:55
in this course to a Next.js project. The00:03:57
principles are exactly the same. Section00:04:00
3 is our first big project, a chatbot00:04:02
that can answer questions about an00:04:04
imaginary theme park to help visitors00:04:07
find the information they need faster.00:04:09
We'll start with the back end, build it00:04:11
step by step, and then refactor it using00:04:13
clean architecture principles. Once the00:04:15
back end is solid, we'll build the front00:04:17
end the same way. We'll add features,00:04:19
improve the UI, and make the chatbot00:04:21
better with each lesson. This is where I00:04:23
want you to code along with me. Don't00:04:25
just watch. Understand the code, the00:04:27
problems we run into, and why we solve00:04:29
them the way we do. If it feels like I'm00:04:32
going too fast, just watch one lesson at00:04:34
a time, take notes, and then repeat it.00:04:37
The lessons are short and focused, so00:04:39
you won't need to remember a lot at00:04:40
once. In section four, we'll dive into00:04:43
prompt engineering, the art of writing00:04:45
prompts that actually get the results00:04:47
you want. You will learn how to give00:04:49
context, control output format, use00:04:52
examples, handle errors, and reduce00:04:54
hallucinations. Section five is another00:04:57
full stack project. This time, a product00:05:00
review summarizer. You have probably00:05:02
seen this on a lot of websites. A quick00:05:04
summary of reviews so you can decide00:05:06
faster. We'll build our own version from00:05:08
scratch, complete with a database and00:05:10
Prisma migrations. It's a bigger, more00:05:13
complex project than the chatbot. So,00:05:15
we'll get to explore a lot of techniques00:05:17
and best practices that most courses00:05:19
skip. And here's the cool part. What you00:05:21
learn here isn't just for summarizing00:05:23
text. You can apply the same techniques00:05:25
to build all kinds of AI powered00:05:27
features. Finally, section six is about00:05:30
working with open-source models. You'll00:05:33
learn why they matter, how to find them,00:05:35
how to run them locally, and how to00:05:37
integrate them into our applications.00:05:39
This opens up a whole new world where00:05:41
you're not tied to commercial APIs. Now,00:05:44
throughout the course, I'll share tips,00:05:46
tricks, and shortcuts you don't want to00:05:48
miss. That's why it's important to watch00:05:50
every lesson in order and code along,00:05:52
especially during the projects. This is00:05:54
a hands-on course, and you will get the00:05:56
most out of it by being active from the00:05:59
very beginning. Oh, and by the way, what00:06:01
you're watching here on YouTube is00:06:02
actually the first two hours of my full00:06:05
7-hour course. I'm giving you this part00:06:07
for free so you can get a feel for my00:06:09
teaching style and see if you want to go00:06:11
deeper. Next, we're going to set up our00:06:13
development environment.00:06:15
[Music]00:06:21
Before we dive into coding, let's00:06:23
quickly set up our development00:06:24
environment. First, make sure you have00:06:26
the latest version of Node on your00:06:28
machine. So, open up a terminal window00:06:30
and run node-v.00:06:33
Look, on this machine, I'm running node00:06:35
version 22.17.00:06:37
So, make sure you have the same version00:06:39
or higher. If not, head over to00:06:41
node.js.org and download the latest00:06:43
version. Now, for coding, we'll be using00:06:46
VS Code. You're welcome to use your00:06:48
preferred editor, but I highly encourage00:06:50
you to use VS Code because throughout00:06:52
the course, I'm going to show you a lot00:06:53
of cool shortcuts and useful plugins00:06:56
that not only help you write code00:06:57
faster, they also make your job more fun00:07:00
and enjoyable. So, that's all you need00:07:02
for now. Node.js and VS Code. We'll00:07:04
install any other tools as we go through00:07:06
the course. All right, with your00:07:08
environment ready now, let's get00:07:09
started.00:07:12
[Music]00:07:14
Welcome back. In this section, we'll lay00:07:16
the foundation for everything we'll00:07:18
build in this course. We'll explore what00:07:20
language models are, what we can do with00:07:22
them, and how to use them effectively in00:07:25
real world applications. We'll also00:07:27
cover practical concepts like tokens,00:07:30
cost, model selection, and key settings00:07:32
that shape the model's behavior. Even if00:07:35
you have used Chat JP before, this00:07:37
section will give you a solid mental00:07:39
model. So, when we start building,00:07:40
you'll know exactly how and why things00:07:43
work the way they do. Now, let's jump in00:07:45
and get started.00:07:48
[Music]00:07:54
Since Chat JPT came out, the software00:07:56
world has changed fast. New models are00:07:58
being released every month, new tools,00:08:00
new APIs, new expectations, and new job00:08:03
titles. One of the most exciting ones is00:08:05
AI engineer. You have probably seen it00:08:08
pop up in job postings. But what exactly00:08:10
is that? Well, it's not the same as a00:08:13
machine learning engineer. Machine00:08:14
learning engineers build and train00:08:16
models. They clean data, tune00:08:18
architectures, and optimize training00:08:20
pipelines. It's mathheavy and research00:08:23
focused. AI engineers, on the other00:08:25
hand, use pre-trained models, especially00:08:28
large language models, to build smarter00:08:31
applications. They don't need to00:08:32
understand the math behind the model.00:08:35
They need to understand how to use it00:08:37
and how to integrate it into real world00:08:39
apps. It's a lot like using a database.00:08:42
As a software engineer, you don't need00:08:44
to know how MySQL works internally. You00:08:46
just need to know how to query it,00:08:48
structure your data, and build a00:08:50
reliable product. In the same way, as an00:08:53
AI engineer, your job is to understand00:08:55
how to use these powerful AI models to00:08:57
solve real problems. Right now,00:09:00
companies around the world are hiring00:09:02
engineers who know how to build AI00:09:04
powered features. things like00:09:06
summarization, translation, intelligent00:09:08
search, automation, and personalized UX.00:09:12
Let me show you just a few examples.00:09:13
Amazon now shows an AI generated summary00:09:16
of product reviews on the product page.00:09:18
This saves shoppers time and increases00:09:21
conversion by making the buying decision00:09:23
faster. You'll see the same pattern in00:09:25
many other applications where AI is00:09:28
being used to surface quick takeaways00:09:30
from long threads. As another example,00:09:32
Active Campaign, which is a marketing00:09:34
platform, lets marketers use AI to00:09:37
generate full email campaigns with just00:09:40
a few prompts. Instead of starting from00:09:42
scratch, they get instant draft content00:09:44
they can publish and send. Here's00:09:46
another example. On Twitter or X, if you00:09:49
see a post in another language, you'll00:09:51
often see a translate link. Behind the00:09:53
scenes, a large language model detects00:09:55
the language, determines your local, and00:09:58
generates a translated version00:10:00
instantly. This feature is becoming00:10:02
standard across social platforms and00:10:04
news applications. Here's another00:10:06
example. Platforms like YouTube and00:10:08
Twitch use AI to automatically flag00:10:11
things like spam, hate speech, or00:10:13
inappropriate content. It helps keep00:10:16
communities safe without needing00:10:17
thousands of human moderators watching00:10:20
everything in real time. Here's another00:10:22
example. Freshesk, which is a customer00:10:24
support platform, uses AI to00:10:26
automatically categorize, prioritize,00:10:28
and route incoming support tickets. So00:10:31
instead of agents manually sorting00:10:33
through every request, the system sends00:10:36
each ticket to the right team. And that00:10:38
means agents spend less time organizing00:10:40
and more time solving. Let's look at00:10:42
another example. On Redfin, which is a00:10:44
platform for finding homes, when we are00:10:47
viewing a property listing, there's a00:10:49
built-in chat assistant that can answer00:10:51
questions about that specific property.00:10:54
So, instead of waiting to talk to an00:10:55
agent, users can get the basic info they00:10:58
need right away. And these are just a00:11:00
few examples. The possibilities are00:11:02
endless. Everyday developers are adding00:11:04
smart features like these into their00:11:06
applications. Not just for novelty, but00:11:09
to save time, reduce costs, and build00:11:11
smarter, more helpful experiences. I00:11:14
believe that going forward, every00:11:16
software engineer will be expected to00:11:18
know how to work with AI models just00:11:20
like we're expected to work with00:11:22
databases today. You will need to know00:11:24
about large language models or LLMs,00:11:27
prompt engineering, retrieval, augmented00:11:29
generation or rag, vector databases,00:11:32
building agents, and so on. This course00:11:34
is your first step into that world. So,00:11:37
if you're a developer and you want to00:11:38
keep up with where the industry is00:11:40
headed, you're in the right place. In00:11:42
the next lesson, we'll break down what a00:11:44
large language model actually is in00:11:46
simple practical terms.00:11:49
[Music]00:11:55
Now that you understand why learning AI00:11:58
matters, let's start unpacking the00:11:59
fundamentals. In this lesson, we're00:12:01
going to answer a basic but important00:12:03
question. What is a large language00:12:06
model? Let's break it down. At its core,00:12:08
a language model is a system that's00:12:10
trained to understand and generate human00:12:13
language. There are several language00:12:15
models available today. Some are00:12:17
commercial like GPT by OpenAI, Gemini by00:12:20
Google, Claude by Anthropic, Grock by00:12:23
XAI which is Elon Musk's company. We00:12:26
also have open- source models like Llama00:12:28
by Meta, Mistral by European company00:12:31
also named Mistl and many many more.00:12:33
They're called large because they're00:12:35
trained on massive amounts of text.00:12:37
Everything from books and articles to00:12:39
forums, code, documentation, and more.00:12:42
Through this training, they learn00:12:44
statistical patterns in a language.00:12:46
Things like grammar, sentence structure,00:12:48
tone, common facts, and phrasing. So00:12:51
when we prompt an LLM with, let's say,00:12:53
the capital of France is, it doesn't00:12:56
look up the answer. It simply predicts00:12:58
what a helpful response should look like00:13:00
based on patterns it has seen during00:13:02
training. It's like autocomplete but on00:13:04
steroids. In practice, a large language00:13:07
model is a giant mathematical structure,00:13:10
usually multiple gigabytes in size, made00:13:12
up of billions of parameters. Those00:13:15
parameters represent patterns in00:13:17
language like grammar, facts, tone, and00:13:20
style. These models don't understand00:13:22
language the way we do. They don't have00:13:24
beliefs or intelligence. They're just00:13:26
very good at predicting what comes next.00:13:29
The output is often so well written, so00:13:32
fluent on structure that it feels like00:13:34
there's intelligence behind the scenes.00:13:36
But there isn't. It's just mass and00:13:38
probability based entirely on training00:13:40
data. That's why if you ask chat GPT the00:13:43
same question multiple times, we'll00:13:45
often get slightly different answers.00:13:48
It's not repeating a stored response.00:13:50
It's generating new output each time00:13:52
based on likelihood, not truth. And that00:13:55
brings us to a very important point.00:13:57
Because these models don't understand00:13:59
what they're saying, the quality of00:14:01
training data is everything. If a model00:14:03
is trained unbiased, inaccurate, or00:14:06
lowquality data, its responses will00:14:08
reflect that. That's why some models00:14:11
appear politically biased or why some00:14:13
models give completely false answers00:14:15
with total certainty. It all comes back00:14:18
to the data. These days, many people use00:14:20
language models to generate code and00:14:22
it's impressive at first. But here's the00:14:25
issue. These models are trained on00:14:27
billions of lines of code from public00:14:29
repositories including GitHub. And a00:14:31
huge portion of that code is poorly00:14:33
written, outdated, filled with00:14:35
antiatterns or just broken. The model00:14:38
doesn't know that. It simply learns00:14:40
what's common, not necessarily what's00:14:42
correct or maintainable. So when it00:14:45
generates code, it might look clean,00:14:47
sound confident, even compile, but it00:14:49
could be buggy, insecure, or full of bad00:14:52
practices. That's the danger of blindly00:14:55
trusting model generated code. We get00:14:57
something that looks professional but00:14:59
isn't always reliable. So once again, I00:15:01
want to emphasize that training matters00:15:03
a lot. A model is only as good as the00:15:06
data it's trained on. Garbage in,00:15:08
garbage out. If it learns from clean,00:15:10
highquality code and accurate language00:15:13
data, it performs well. If it trains on00:15:15
messy, biased, or incorrect data, the00:15:18
responses can be misleading or flatout00:15:21
wrong. Now, training a large model from00:15:23
scratch isn't just about data. It also00:15:26
requires enormous amounts of compute00:15:28
power. We're talking thousands of GPUs,00:15:30
weeks, or months of continuous training,00:15:33
and infrastructure that only a handful00:15:35
of companies in the world can afford.00:15:37
That's why most of us don't train models00:15:39
ourselves. As developers, our job isn't00:15:42
to become machine learning engineers.00:15:44
It's to understand how to talk to these00:15:46
models via prompting, how to handle00:15:49
their limitations, and how to integrate00:15:51
them into our applications to build00:15:53
smarter features. Just like we don't00:15:55
need to build our own database engine,00:15:57
we just need to know how to use one.00:16:00
That's the mindset you will develop00:16:02
throughout this course. In the next few00:16:03
lessons, we'll dig deeper into how these00:16:06
models work, things like tokens, cost,00:16:08
and how to pick the right one for the00:16:10
job.00:16:12
[Music]00:16:18
So I told you that as a developer you00:16:20
need to learn how to integrate language00:16:22
models into your applications. Now let00:16:24
me show you what that actually looks00:16:26
like. Think about a typical application00:16:28
structure. We have a front end maybe00:16:31
built with React or something similar, a00:16:33
back end, a database for storing our00:16:36
application data and now a language00:16:38
model ready to generate or process00:16:40
content. The LLM is usually not the00:16:43
center of our application. It's a00:16:44
supporting system. We send it input or a00:16:47
prompt. We get a response and use that00:16:50
response to enhance the user experience.00:16:52
And the way we use it depends on our00:16:54
feature. For example, a very common use00:16:56
case is summarization. I showed you how00:16:59
Amazon uses that to summarize reviews.00:17:01
This is getting very common in modern00:17:03
applications. We can also use LLMs for00:17:06
generating content like emails, product00:17:08
descriptions, social media posts and so00:17:11
on. Another common use case is text00:17:13
classification. We can use a model to00:17:15
categorize input. For example, is this00:17:18
spam or not? Is this review positive or00:17:20
negative? Is this support ticket about00:17:22
billing, login or cancellation? We can00:17:25
ask LLMs to generate responses as JSON00:17:28
objects like this. That means our back00:17:30
end can easily parse the response, store00:17:33
it and make decisions based on it. We00:17:36
can also use LLMs for translating text00:17:38
from one language to another. I showed00:17:40
you how Twitter or X does this. Also,00:17:43
the new iOS does that to translate texts00:17:45
in real time. Another great application00:17:48
of language models is in extracting00:17:50
information. For example, we can give an00:17:53
LLM some messy text like a PDF and ask00:17:56
it to pull out structured data like00:17:58
invoice number, amount, names,00:18:01
addresses, and so on. We can also use00:18:03
LLMs to build and integrate chat bots00:18:06
into our applications. We can build chat00:18:08
bots that answer questions based on user00:18:10
data or business documents and so on.00:18:13
All of these use cases follow the same00:18:15
pattern. Text in, text out. We give the00:18:17
model a prompt and it gives us back a00:18:20
response. The response can be plain00:18:22
text. It can be an array, a JSON object,00:18:25
a number, an image, or whatever is00:18:27
useful. Now that you have seen what LLMs00:18:29
can do, let's look at what's actually00:18:31
inside them. In the next lesson, we'll00:18:33
talk about how these models work under00:18:35
the hood.00:18:37
[Music]00:18:43
Now that you know what language models00:18:45
are and what we can do with them, let's00:18:47
take a closer look at something that00:18:49
plays a big role in how we use them00:18:51
effectively, and that's tokens. What are00:18:53
tokens? Well, when we send a prompt to a00:18:56
language model, it doesn't process the00:18:58
input as plain text. Instead, it breaks00:19:01
the text down into smaller units called00:19:03
tokens. These tokens can be whole words,00:19:07
parts of words, punctuation, even emojis00:19:09
or spaces. So tokens aren't the same as00:19:12
characters or words. They fall somewhere00:19:14
in between. To see this in action here00:19:17
on Google, search for OpenAI tokenizer.00:19:20
On this page, you can type a prompt here00:19:23
or click show example. Look, this piece00:19:27
of text has 252 characters and it's00:19:30
broken down into 53 tokens. Down below00:19:34
you can see these tokens colorcoded. So00:19:36
each piece represents a token. Now why00:19:39
does this matter? Because tokens00:19:40
directly impact cost. Let's take open as00:19:43
an example. At the time of this00:19:45
recording, generating 1 million output00:19:47
tokens with GPT40 mini costs 60. With00:19:52
GPT4.1, the same task would cost $8.00:19:56
That's 13 times more. So if you're00:19:58
summarizing long documents or generating00:20:01
large amounts of content, token usage00:20:03
and therefore cost can add up quickly.00:20:06
That's why when choosing a model, cost00:20:09
should be one of the key factors. We00:20:10
shouldn't just go for the latest or most00:20:13
powerful model. Think about what your00:20:15
app actually needs. It's kind of like00:20:17
buying a phone. You don't always need00:20:19
the latest iPhone Pro Max. Sometimes a00:20:22
mid-range phone gives you everything you00:20:24
need. Same logic applies here. So tokens00:20:27
cost money, but there's also a limit to00:20:29
how many tokens a model can handle at00:20:32
once. That limit is called the context00:20:35
window. The context window includes our00:20:37
prompt, which is the input, the model's00:20:40
response, and the chat history. That's00:20:42
if we're building a conversational00:20:44
experience. Again, all of this is00:20:46
measured in tokens. For example, GPT400:20:49
Mini has a context window of about00:20:52
128,000 tokens. GPT 4.1 can handle00:20:56
around 1 million tokens. Mistrol, which00:20:58
is an open-source model, supports around00:21:01
32,000 tokens. So, if we send a very00:21:04
long prompt and hit the token limit or00:21:06
the context window, the model will stop00:21:09
even in the middle of a sentence. That's00:21:11
why it's important to know how much00:21:13
context our model can handle. But again,00:21:15
we don't always need the largest context00:21:17
window or the biggest model. Mistrol,00:21:20
for example, might be perfectly00:21:22
sufficient for tasks like summarizing a00:21:24
blog post or classifying a support00:21:26
ticket. It all depends on the needs of00:21:28
our application. In the next lesson, I'm00:21:31
going to show you how to count tokens00:21:33
programmatically so we can estimate cost00:21:35
and stay within limits before sending a00:21:38
request.00:21:41
[Music]00:21:46
All right. Now, let me show you how to00:21:47
count tokens in code. So, open up a00:21:50
terminal window. Let's go to our desktop00:21:53
or somewhere on your machine and create00:21:55
a directory called playground. This is00:21:58
going to be our playground project.00:22:00
Next, we cd into this directory and run00:22:03
npm init-y00:22:06
to create a package.json file without00:22:08
answering basic questions about our00:22:10
project like its name, version, and so00:22:12
on.00:22:14
So, here's our package.json file. Great.00:22:17
Now we're going to install a library00:22:19
called tick token. This is the tokenizer00:22:22
used by open AI models. So different AI00:22:25
models, different platforms have their00:22:27
own tokenizer library. Okay,00:22:30
good. Now to open this in VS Code, we're00:22:33
on code space period. Now if this00:22:36
doesn't work on your machine, just drag00:22:38
and drop this directory onto VS Code.00:22:41
All right. Now we add a new file here,00:22:44
index.js JS on the top we import a00:22:48
function called get encoding from tick00:22:51
token. Next we call get encoding and00:22:55
give it an argument. The argument is an00:22:58
encoding. Here we have a few options.00:23:00
These options or these encodings are00:23:02
dictionaries that map token ids to the00:23:06
actual tokens. For example, we might00:23:08
have a token ID let's say 9004 that maps00:23:12
to the word hello. Okay. So we're going00:23:15
to pick CL 100K underline base that is00:23:18
short for chat language and 100K means00:23:22
in this dictionary we have about 100,00000:23:25
unique tokens. So we get an encoding and00:23:28
store it in a constant. Next we call00:23:32
encoding encode and give it a piece of00:23:36
text like hello world. This is the first00:23:39
test of tick token library. Okay, next00:23:45
we get our tokens and store them in a00:23:48
constant.00:23:50
And finally, we log them on the console.00:23:54
Okay, now let's open up a terminal00:23:56
window here by pressing control and00:23:58
backtick. Now let's run our application00:24:00
by running node index.js.00:24:04
All right, we got a syntax error saying00:24:06
cannot use import statement outside a00:24:09
module. Why are we getting this? Because00:24:11
by default node interprets our00:24:14
JavaScript files as common JS modules.00:24:17
In common JS modules we have a different00:24:19
format for importing functions. So00:24:22
instead of this syntax which is called00:24:24
ES module syntax we have a different00:24:27
syntax which is called common.js syntax.00:24:31
So we have to write code like const get00:24:34
encoding00:24:35
equals require00:24:38
t take token that is the common JS00:24:40
format which is older nobody uses that00:24:42
anymore so to tell NodeJS to use the new00:24:45
format we have to go to our package JSON00:24:48
file we can open it right here00:24:51
package.json JSON, we set the type00:24:55
property to module.00:24:59
Okay, now back to the terminal. Let's00:25:02
rerun index.js. All right, look. We got00:25:05
an array of 13 items where each item is00:25:08
a number. Each number is a token ID that00:25:11
maps to an actual token. So when working00:25:14
with large amount of text, we can use00:25:16
the tick token library to count tokens00:25:19
before sending a prompt to a language00:25:21
model.00:25:23
Hey, just a quick reminder, as I told00:25:25
you at the beginning of this video, what00:25:27
you're watching right now is actually00:25:29
the first 2 hours of my full 7-hour00:25:31
course on building AI powered apps. So00:25:34
once you finish this tutorial, if you00:25:36
want to learn more, check out the link00:25:38
in the description to enroll in the00:25:40
complete course. I would love to see you00:25:41
inside.00:25:43
[Music]00:25:48
These days there are hundreds of AI00:25:50
models out there and new ones are00:25:52
released almost every week. So which00:25:55
model should we choose? There is no00:25:56
single right answer. The model we choose00:25:59
really depends on our application and00:26:01
its requirements. In this lesson, I'm00:26:03
going to give you a framework to make00:26:04
that decision. Now, I'm not going to00:26:06
give you a fixed list of model names to00:26:09
choose because model names change00:26:10
quickly. So instead, we're going to00:26:12
focus on the criteria that matter when00:26:14
choosing a model. The first question we00:26:17
need to ask is how smart does the model00:26:19
have to be? If we want to solve complex00:26:22
problems, we want a model with stronger00:26:24
reasoning. But if we just need to00:26:26
extract text, classify a review, or00:26:28
summarize a short paragraph, we don't00:26:30
need the top tier model. A smaller model00:26:33
is good enough to do the job. The next00:26:35
question is, how fast do we need a00:26:37
response? Bigger models are often00:26:39
slower, especially when generating long00:26:41
outputs. If you're building a real-time00:26:44
user experience, like autocomplete,00:26:46
quick summaries, or short form answers,00:26:49
we'll want a faster model. The next00:26:51
question is, what kinds of input and00:26:53
output are we going to send to and00:26:55
receive from a model? Text is the most00:26:57
common, but newer models can also00:26:59
process images, audio, video, or even a00:27:03
combination of those. These are called00:27:05
large multimodal models or LMMs. So if00:27:09
our application involves anything beyond00:27:10
text, for example, describing what's in00:27:13
an image, then we need a multimodal00:27:15
model. The other factor is cost and I00:27:18
told you that this is based on the00:27:20
number of tokens. So if you're00:27:22
processing long documents or generating00:27:24
a lot of content, cost can add up00:27:26
quickly. The next factor is the context00:27:28
window. We talked about this before.00:27:30
That's how much text the model can00:27:32
process at once. And that includes our00:27:35
input, the model's response, and the00:27:37
chat history. If you're building a00:27:39
conversational experience, if you're00:27:41
summarizing long documents, analyzing00:27:44
code bases, or having long back and00:27:46
forth conversations, we need a model00:27:48
with a large context window. The other00:27:51
factor is privacy. If our application is00:27:53
processing sensitive data like patients,00:27:56
medical records, we probably don't want00:27:58
to send that data to OpenAI servers.00:28:00
This is where open-source self-hosted00:28:03
models can help. We'll talk about that00:28:05
later in the course. Now, to see this in00:28:07
action on Google, search for OpenAI00:28:10
models. On this page, we can see the00:28:13
featured models. At the time of this00:28:15
video, we have GPT4.1,00:28:17
O4 Mini, and 03. Now, up here, we can00:28:21
click compare models and compare these00:28:24
three models or any other models you're00:28:26
interested in. Now look, 03 is their00:28:30
most powerful reasoning model. You can00:28:32
see that indicated down here. But this00:28:35
is also the slowest of all three models.00:28:38
So there is no best single model. If00:28:40
you're building an application that00:28:42
requires solving complex problems, then00:28:44
we need a model with strong reasoning00:28:47
capability. But otherwise, if all we00:28:49
want to do is let's say summarize00:28:51
documents or extract structured data, we00:28:54
can go with a simpler model. Now all00:28:56
these three models as you can see are00:28:58
multimodel models because they support00:29:01
text and image as the input. But for the00:29:04
output they can only generate text. So00:29:06
if you need to generate images in our00:29:08
application then we have to pick a00:29:10
different model. At the time of this00:29:11
video we have a model called00:29:15
GPT image one. Now this model can00:29:19
support text and image as the input but00:29:22
it can only generate images in the00:29:24
output. So it cannot generate any text.00:29:26
Now that aside down below you can see00:29:28
the pricing. We have different prices00:29:30
for input and output. So if we need to00:29:34
process large documents like contracts,00:29:36
cost can add up pretty quickly. So00:29:38
always compare the cost of models and go00:29:41
with the one that fits your application.00:29:43
Now moving on below that we have the00:29:45
context window of these models. So this00:29:48
model has the context window of 200,00000:29:50
token. This other model has a context00:29:53
window of about 1 million tokens. Now,00:29:56
we also have another factor here that's00:29:58
max output tokens. That's the number of00:30:01
tokens that can be in one response. So,00:30:04
this model, even though it has a larger00:30:07
context window, it can process more text00:30:09
or longer conversations, but each00:30:12
response can be a maximum of 32,00000:30:15
tokens. In contrast, with this model,00:30:18
our responses can be three times larger.00:30:20
The other factor we have here is the00:30:22
knowledge cutoff and that's when the00:30:24
training of these models stopped. So00:30:26
sometimes you can find older models that00:30:28
don't have up-to-ate knowledge of the00:30:30
world but they could be perfect for your00:30:32
application. So once again there is no00:30:35
best model. All right, we're done with00:30:36
this lesson. In the next lesson we're00:30:39
going to talk about model settings and00:30:40
see how different parameters affect the00:30:43
output.00:30:45
[Music]00:30:51
In this lesson, we'll take a look at the00:30:53
settings that control how a language00:30:54
model behaves. So, here on the OpenAI00:30:57
website, on the models page, let's grab00:30:59
GPT 4.1. On this page, you can see all00:31:02
the details about this model like its00:31:05
level of intelligence, the speed, the00:31:07
price of input and output tokens, as00:31:10
well as the modalities. We can also see00:31:12
the context window, max output tokens00:31:14
and the knowledge cutoff date. Now up00:31:17
here we can try this in the playground.00:31:19
First we have to log in.00:31:25
All right. Here's the model playground.00:31:27
Now the first time you want to use this,00:31:29
you have to add credit to your account.00:31:31
So up here, click the settings icon.00:31:34
Then go to the billing page. On this00:31:37
page, you can add your debit or credit00:31:39
card and add some credit to your00:31:41
account. Once you do that, now let's go00:31:43
back to the playground. So, the model is00:31:46
GPT4.1. We can change this to any00:31:48
models. Now, all these models have a few00:31:51
common settings we're going to talk00:31:52
about in this lesson. The first one is00:31:54
text format. Here we have three options.00:31:57
We have text, which is plain text, as00:31:59
well as JSON object and JSON schema.00:32:02
Let's see the differences in action. So00:32:04
I'm going to go with text and send a00:32:06
prompt like give me three benefits of00:32:10
exercising.00:32:12
So this gives us a short answer in plain00:32:15
text. We have all seen this before. Now00:32:17
let's see what happens if we change this00:32:19
to00:32:21
JSON object.00:32:22
Now we repeat the prompt and say give me00:32:26
three benefits of exercising but we also00:32:29
add as a JSON object.00:32:34
Now take a look. The model generated a00:32:37
JSON object with this format. So we have00:32:39
an object with a single property called00:32:41
benefits of exercising which is an array00:32:43
of strings. Now if the response is not00:32:46
colorcoded on your machine, just click00:32:48
this icon. With this you can toggle00:32:50
between plain text and JSON format.00:32:53
Okay. So JSON is useful if you want to00:32:55
parse the response in our application.00:32:57
But what if we expect a different type00:32:59
of JSON object? So instead of having a00:33:01
property like benefits of exercising,00:33:04
let's say we want to have a property00:33:05
like exercise which would be an object00:33:08
with another property called benefits.00:33:10
This is where we can use a JSON schema.00:33:14
So we change the format to JSON schema.00:33:17
In this box, we should define the shape00:33:20
of our JSON objects. Now this format is00:33:23
a little bit complicated. So it's easier00:33:24
to generate it using AI. Here we can00:33:27
describe the kind of JSON object we00:33:29
expect in the response. For example, we00:33:32
can say generate a JSON object like the00:33:35
following.00:33:37
So we want to have an object. In this00:33:39
object, we want to have a property00:33:41
called exercise00:33:43
which would be an object itself.00:33:46
Now inside this object, we want to have00:33:48
a property called benefits which would00:33:51
be an array. So we give it an example00:33:53
and then have it create this schema for00:33:55
us.00:33:58
All right, look. So here's the name of00:33:59
the schema, exercise schema. And here we00:34:02
have more details about this schema. So00:34:05
this is an object with these properties.00:34:08
In this object, we have a property00:34:11
called exercise, which is an object00:34:13
itself with these properties. In this00:34:16
object, we have a property called00:34:17
benefits, which is an array. Here's a00:34:20
description saying a list of benefits00:34:23
associated with the exercise. Next, we00:34:25
have information about the types of00:34:27
items in this object. So, each element00:34:29
or each item is a string. And here's a00:34:31
description of each element. Next, we00:34:34
have the validation properties like00:34:37
required. So, the benefits property is00:34:39
required. And no additional properties00:34:42
are allowed. Of course, we can always00:34:43
change this to fit our application. So,00:34:46
let's go with the schema.00:34:48
Save.00:34:50
Now we repeat the last prompt and say00:34:53
give me three benefits of exercising as00:34:57
a JSON object.00:35:01
All right, take a look. This time the00:35:03
model generated a different kind of JSON00:35:05
object. So we have this object with a00:35:07
property called exercise which is an00:35:09
object with a property called benefits00:35:11
which is an array of strings. So that's00:35:14
text format. Now let's go back to plain00:35:17
text. Then we have temperature. With00:35:20
this we can control how random or00:35:22
creative the response can be. This is a00:35:25
value between 0 and 2. But we never set00:35:28
it to extreme values. Here's a00:35:30
guideline. We use a low temperature like00:35:33
2 to4 for logical precise answers like00:35:36
summarization, answering factual00:35:38
questions and so on. We use higher00:35:40
temperature like a value between 7 to00:35:43
1.0 zero for creative expressive tasks00:35:45
like brainstorming, writing, marketing,00:35:48
copy and so on. So it's best to stick to00:35:50
this range. Don't go with extreme values00:35:52
like zero or two because the model can00:35:54
go crazy. Let me show you an example. So00:35:56
here we have set the temperature to two.00:35:59
Now let's say write a story about a00:36:03
robot. Look what happens.00:36:07
The model starts generating a story00:36:09
about a robot. But as we progress, look,00:36:12
it's generating gibberish. There is00:36:14
nonsense coming out because the model is00:36:16
getting extremely creative. This is the00:36:19
problem with really high temperatures.00:36:21
So, a good rule of thumb is to set it to00:36:24
7. This is a good balance between00:36:26
logical and creative responses. Next, we00:36:28
have max tokens and this sets the00:36:31
maximum length of the response. Now, the00:36:33
value we set here really depends on what00:36:35
problem we're trying to solve. If you00:36:36
want to generate something short like a00:36:38
tweet, we have to go with a lower value.00:36:40
Otherwise, we may waste our tokens and00:36:43
pay more than we need. But when using00:36:44
lower values, keep in mind that the00:36:46
response can be cut off mids sentence.00:36:48
Let me show you. So, I'm going to set00:36:50
max tokens to 50. Now, once again, we're00:36:54
going to say write a story about a00:36:57
robot.00:37:00
All right. So, it says in the quiet town00:37:02
of Maplewood, there was a small robot00:37:04
named Pixel. Pixel was built by a kind00:37:07
inventor, Mrs. Rivera, who wanted to00:37:10
help. But look, the sentence is cut off.00:37:13
So to prevent this, we have to be more00:37:15
precise with our prompt. This is one of00:37:17
the prompt engineering techniques. There00:37:19
are many more techniques we'll cover00:37:20
later in the course. So here we can say,00:37:22
write a story about a robot in 50 tokens00:37:27
or less. Write a complete answer without00:37:31
cutting off mid sentence.00:37:36
All right. Now, with this second story,00:37:38
look, it's saying, "From that day on,00:37:41
Orbit became the twin's favorite friend.00:37:43
Always helping those in need. Robot00:37:45
heart glowing with happiness."00:37:47
Beautiful. So, that was Max tokens. We00:37:50
also have top P. This is another way to00:37:52
control randomness, but it works a bit00:37:54
differently than temperature. Let's say00:37:56
as part of generating the response, the00:37:58
current token is ant. And here are all00:38:01
the possible options for the next word.00:38:03
Now next to each token you can see its00:38:06
probability based on the training data.00:38:08
If we set top P to one, we tell the00:38:10
model to use the full range of00:38:12
possibilities. So any of these words or00:38:14
any of these tokens can be used to00:38:16
generate the response. But if we use a00:38:18
lower top P like.3 that makes the model00:38:21
focus only on the most likely next00:38:23
words. So once again, top is another way00:38:26
to control randomness. It works00:38:28
differently from temperature. In00:38:30
practice, we usually change one or the00:38:32
other, but not both. If you're not sure00:38:34
which one to use, stick with temperature00:38:36
and set top P to one. So these are all00:38:39
the common settings. We also have store00:38:41
logs which is used for logging and00:38:43
debugging. By default, it's enabled00:38:45
which means all our prompts will be00:38:47
logged on OpenAIS servers. To see them,00:38:50
we go to the dashboard.00:38:52
Then we go to the logs.00:38:55
On this page, you can see all the00:38:57
prompts we have sent to OpenAI. We have00:38:59
the input, the output, the model, and00:39:02
the date time. If we click any of these00:39:04
items, we can see more details. So up00:39:07
here we can click details. We can see00:39:09
the exact day time as well as the ID of00:39:12
the response. So each response has a00:39:14
unique identifier and this is useful for00:39:17
creating the conversation state. So the00:39:19
model remembers our previous responses.00:39:21
We'll talk about this later in the00:39:23
course. We can also see the model that00:39:24
was used, the number of tokens, the00:39:26
response format, max output tokens,00:39:29
temperature, and so on.00:39:32
[Music]00:39:38
All right. Now, let me show you how we00:39:39
can call models in code. To do that,00:39:41
first you have to create an API key. So,00:39:43
on the top, let's go to the settings00:39:45
page. Then, we go to API keys and create00:39:49
a new secret key. We give it a name.00:39:52
This could be the name of our00:39:53
application like my playground app.00:39:57
Next, we assign it to a project. We have00:39:59
the default project, but we can also00:40:01
create multiple projects and assign00:40:03
different keys to different projects.00:40:06
Now, let's create the key.00:40:08
Good. Let's copy this back to VS Code.00:40:12
We remove all the code here and declare00:40:15
a constant called OpenAI API key. Reset00:40:20
it to this key. Now I got to emphasize00:40:22
this is just for demonstration. In a00:40:24
real application, we should never store00:40:26
API keys in the source code because with00:40:29
that anyone who has access to your00:40:30
source code can use your API key and00:40:33
you'll be the one paying for it. So as a00:40:35
best practice, we should always store00:40:37
the keys outside of our source code00:40:39
using environment variables. We'll talk00:40:41
about that later when we start building00:40:43
projects. Next, we should install the00:40:45
OpenAI library. So we open a terminal00:40:48
window and run npm install open AI.00:40:53
All right, good. Now this library is00:40:56
just a wrapper around open AAI API. So00:40:58
it gives us a class with a bunch of00:41:00
methods that we use behind the scene.00:41:02
It's going to make HTTP calls to the API00:41:04
exposed by OpenAI. If you go to the docs00:41:08
and look at the libraries page, you can00:41:12
see that they also have official00:41:15
libraries or SDKs for JavaScript,00:41:18
Python, Net, Java, and Go. There are00:41:21
also a bunch of libraries built and00:41:22
maintained by community for other00:41:24
languages. So back to the code on the00:41:27
top, first we import the OpenAI class00:41:30
from the OpenAI module. Next, we create00:41:33
an instance of this class. So we declare00:41:35
a constant called client because this is00:41:38
a client to open AAI platform. We set it00:41:41
to a new instance of open AAI00:41:44
and provide an object and here we set00:41:47
API key to open AAI API key. Next we00:41:52
call client00:41:54
responses.create00:41:56
and give it an object. Here we can set00:41:59
the model to let's say GPT-4.1.00:42:05
We set the input to our prompt like00:42:08
write a story about a robot.00:42:11
We can also set the other settings we00:42:13
talked about in the previous lesson like00:42:15
temperature. Let's set it to 7.00:42:19
And we set max output tokens to let's00:42:22
say 50. Now this method returns an API00:42:27
promise. So we have to await it to get00:42:29
the response. So let's await this00:42:34
and get the response.00:42:37
And finally we log the response on the00:42:39
console.00:42:42
Okay. Now back to the terminal. Let's00:42:44
run node index.js.00:42:47
Now the terminal freezes because we are00:42:49
waiting for the response to be00:42:51
generated. But later we'll enable00:42:53
streaming so you can see the response as00:42:55
it's being generated. Okay. Now here we00:42:57
have a bunch of properties in the00:42:58
response. The one we use most of the00:43:00
time is output text. This is the00:43:02
response generated by the model. But we00:43:04
also have a few other useful properties.00:43:07
We have usage where we can see the00:43:09
number of input and output tokens. Now00:43:11
in this case I'm not entirely sure why00:43:13
input tokens is zero but output tokens00:43:15
is 50. We also have top P which is set00:43:18
to one by default. We have temperature.00:43:21
We have store. So this response is00:43:23
logged on OpenAI servers. And also up00:43:26
here we have the unique identifier for00:43:29
this response. Later when we build a00:43:31
chatbot, we'll use this to maintain a00:43:33
conversation state. So the chatbot00:43:35
remembers the conversation history. Now00:43:38
back to the code, let's see how we can00:43:40
enable streaming. To do that, first we00:43:42
set stream00:43:44
to true. Now to see this clearly, let's00:43:47
increase max output tokens and set it to00:43:50
250. Now when we set stream to true, we00:43:54
no longer get a response object.00:43:56
Instead, we get a stream object. So00:43:58
let's rename this by pressing F2 to00:44:01
stream.00:44:03
Now this stream is what we call00:44:07
an async iterable. What does it mean?00:44:10
Well, an iterable is an object that we00:44:12
can iterate over like an array. So here00:44:15
we use a for loop and say for const00:44:19
event of stream. So we are iterating00:44:22
over the stream getting one event at a00:44:25
time. Now I told you that this stream00:44:27
object is an async iterable. So to00:44:31
iterate over it we have to use the await00:44:34
keyword because these events are00:44:36
generated at runtime. So we don't get00:44:38
them all in one hit. We get them as they00:44:41
are being produced. Okay. So, we iterate00:44:43
over the stream object and then log the00:44:47
event on the console. Now, back to the00:44:50
terminal. Let's rerun our program.00:44:54
All right. Now, look, we're printing00:44:55
these event objects as we are receiving00:44:57
them. Let's scroll off and take a look00:45:00
at a few of them. So, look, each event00:45:03
has a type property. In this case, the00:45:05
type is response.output text.ta. This is00:45:09
the event that represents a chunk of00:45:11
text or a token being generated at00:45:13
runtime type. Each of these events has a00:45:16
sequence number. So this is 252. Next00:45:18
one is 253. Here we have a delta00:45:21
property that is the token that is being00:45:24
generated. So here's one token. Then we00:45:26
have another token. So to print the00:45:29
response in the terminal as it's being00:45:31
generated, we just have to print the00:45:33
delta property. So back to the code,00:45:37
let's print event.ta00:45:40
and rerun our program.00:45:44
So these are the tokens that are being00:45:45
generated. But the problem is at the00:45:48
beginning and at the end we get a bunch00:45:50
of undefined messages in the terminal.00:45:53
The reason for that is because not all00:45:55
events contain the delta property. The00:45:57
delta property only exists in events00:46:00
that contain a chunk of text being00:46:02
generated. But we have other events that00:46:04
represent the beginning and the end of00:46:06
this operation. So the proper way to do00:46:10
this is by checking if event delta is00:46:14
defined then we print it on the00:46:17
terminal. So let's rerun our program.00:46:20
Okay, we're getting this tokens.00:46:24
No more undefined messages. Beautiful.00:46:27
But we don't want to print each token on00:46:28
a new line. The reason this happens is00:46:30
because console.log log always adds a00:46:33
new line character at the end. So to00:46:34
print these tokens next to each other,00:46:37
we have to take a different approach. We00:46:38
have to call process00:46:41
std out which represents the standard00:46:43
output or the console window. This00:46:46
object has a right method. We call this00:46:48
and pass the delta. Now let's rerun our00:46:52
program.00:46:54
Okay, this is the same experience we00:46:56
have when we use chat GPT. So that00:46:58
brings us to the end of this section. In00:47:00
the next section, we'll start setting up00:47:02
a modern full stack project. So, I will00:47:04
see you in the next section.00:47:11
Welcome back. Before we start building,00:47:13
we need to set up a clean, modern, full00:47:16
stack project. One we'll use as the00:47:18
foundation for everything in this00:47:19
course. Now, if you have done any00:47:21
research, you have probably seen tons of00:47:23
templates and GitHub starters for full00:47:26
stack applications. And while some of00:47:28
them are great, I decided not to use any00:47:30
of them. I didn't want this course to00:47:32
depend on someone else's setup or00:47:34
introduce tools we haven't covered.00:47:36
Also, we will not be using Nex.js. In00:47:38
case you don't know, it's a powerful00:47:40
full stack framework built on top of00:47:42
React, but not everybody likes it and it00:47:44
comes with its own learning curve. I00:47:46
didn't want this to be a prerequisite00:47:48
for this course. So, instead, we'll set00:47:50
everything up from scratch using tools00:47:52
like Bun, Vit, and Express. This gives00:47:55
us full control. no hidden magic and a00:47:58
setup that's easy to understand and easy00:48:00
to scale. Along the way, we'll add00:48:02
Tailwind for styling, set up SHA CN UI00:48:05
for components, format our code with00:48:07
prettier, and automate our workflow with00:48:09
Husky. By the end of this section, we'll00:48:11
have a solid full stack foundation00:48:13
that's lightweight, clean, and fully00:48:16
ours. Now, let's jump in and get00:48:17
started.00:48:20
Before00:48:23
we start creating our project, there is00:48:25
a tool I want to introduce that we'll00:48:27
use throughout the course and that's00:48:28
bun. If you haven't heard of it before,00:48:31
bun is a modern JavaScript runtime kind00:48:34
of like Node.js but faster and more00:48:36
integrated. With Node, we typically rely00:48:38
on multiple tools. We use npm to install00:48:41
packages, TS Node to run TypeScript, and00:48:45
something like Nodemon to restart the00:48:47
server when we make changes. With Spun,00:48:49
we get all of that in one tool. It's a00:48:51
runtime, a package manager, a taskr00:48:54
runner, and even a TypeScript transpiler00:48:56
allin one. So, it can run TypeScript00:48:58
files out of the box. And we don't need00:49:00
to install a bunch of extra tools just00:49:02
to get started. Now, if you're more00:49:04
comfortable using Node, that's totally00:49:05
fine. Everything I'm going to show you00:49:07
can be done with Node as well. But if00:49:09
you follow along with Bon, you will00:49:11
probably find the experience cleaner and00:49:13
honestly, a lot more enjoyable. So, head00:49:15
over to bond.sh. And here on the00:49:18
homepage, find the installation00:49:20
instruction for your operating system.00:49:23
Just copy this command and run it in a00:49:26
terminal window.00:49:28
Now follow the instructions in the00:49:30
terminal. So here on Mac, we have to00:49:31
execute this command. Exec/bin/zsh.00:49:37
Now to verify that bon is installed00:49:39
properly, we run bon-00:49:42
version. So on this machine, I'm running00:49:44
bun version 1.2.17.00:49:47
In the next lesson, we'll talk about our00:49:48
project structure.00:49:51
[Music]00:49:57
Now, to create our project structure, we00:49:59
open a terminal window. We go to00:50:01
somewhere on our machine. I'm going to00:50:02
go to my desktop. Next, we create a00:50:05
directory. Let's call it my app or00:50:07
whatever you want. We cd into this00:50:09
directory and run bun in it. This is the00:50:13
same as npm in it. So, it creates a00:50:16
package.json JSON file as well as some00:50:18
additional files. Let's go ahead. First,00:50:20
we answer this question to select a00:50:22
project template. We have blank, react,00:50:24
and library. Let's select blank. So,00:50:28
this created a few files. We have a git00:50:30
ignore file, a rule file for the cursor00:50:33
editor, an index file, a TypeScript00:50:35
configuration file, and a readme file.00:50:38
It also installed TypeScript. So, now00:50:41
let's open this with VS Code. So, here's00:50:44
what we get. We have a directory for the00:50:46
cursor editor. I'm not using cursor, so00:50:49
it's safe to delete this.00:50:52
We have our node modules directory, a00:50:55
git ignore file, a bond lock file, an00:50:58
index file, which is just a console lock00:51:00
statement, our package json file just00:51:02
like a node project, a readmi file, and00:51:05
a typescript configuration file. Now to00:51:08
set up a full stack project, we're going00:51:10
to use something called a workspace,00:51:12
which is a feature built into bun that00:51:14
lets us manage multiple sub projects00:51:16
like a client and a server application00:51:18
from a single place. It's also available00:51:20
in node projects. So by convention, we00:51:23
put our sub projects inside a directory00:51:25
called packages. So here we add a00:51:28
directory called packages and then we00:51:30
add a subdirectory for our client app00:51:35
and one more for our server app.00:51:39
Next we go to our package.json file and00:51:41
declare our workspaces. So here we add a00:51:44
new property00:51:46
called workspaces and set it to an array00:51:49
of strings. Here we type the path to our00:51:52
sub packages. So we go to the packages00:51:54
directory and grab the client directory00:51:57
and one more for the server directory.00:52:01
Now there's a shorthand syntax here. We00:52:04
can replace client with an asterisk to00:52:06
say all directories under packages00:52:08
should be treated as workspaces. So00:52:11
let's delete the second entry. This is00:52:14
good. So our project structure is ready.00:52:16
Over the next few lessons, we'll create00:52:18
the client and server applications00:52:20
independently. Now I also want to00:52:22
initialize a git repository here. So00:52:25
let's open a terminal window and run git00:52:28
in it. Good. And make our first commit.00:52:33
Initial commit.00:52:36
Next we'll create our backend project.00:52:39
[Music]00:52:45
Now to create our server application00:52:47
here in the terminal we go to the00:52:49
packages/server00:52:51
directory and run boninit one more time00:52:54
to create the sub project in this00:52:56
directory. We select blank.00:52:59
Now back to our project here in the00:53:01
server directory. We have the same files00:53:04
you saw in the previous lesson. We don't00:53:06
need the cursor directory. So let's get00:53:08
rid of it and clean up our project.00:53:11
Now back to the terminal. Next we shall00:53:13
install express as our web server. In00:53:16
node projects we run npm install or00:53:18
npmi. In bun projects we run bun at. So00:53:23
with node projects we have two different00:53:25
tools. Node for running our code and npm00:53:28
for installing dependencies. But in bun00:53:30
projects all these features are00:53:31
integrated into bun. So we run bun at00:53:36
express.00:53:38
Okay. We should also install express00:53:40
types for TypeScript as a development00:53:42
dependency. To do that, we run bun at-d00:53:47
types/express.00:53:51
Good. Now back to our project.00:53:55
Look here in the server directory, we00:53:56
have this package.json file. And in this00:54:00
file, we have express as a dependency00:54:03
and also express types as a development00:54:06
dependency. So in this project so far we00:54:09
have two separate package.json files one00:54:13
in the root directory and one inside the00:54:16
server directory. Later when we create00:54:18
the client project we'll also have a00:54:20
package.json file in our client00:54:22
directory. Okay. Now what is interesting00:54:25
about this structure is that in this00:54:26
setup we don't have different node00:54:29
modules in our server and client00:54:31
applications. So we don't have a node00:54:33
modules directory inside the server00:54:35
directory. We only have one at the top00:54:37
level where we have all the client and00:54:40
server dependencies. So right now we00:54:42
have express as well as all its00:54:45
dependencies installed in this00:54:47
directory. Okay. So we have installed00:54:49
express. Now let's create a basic web00:54:52
server. So we go to the server directory00:54:55
and open index.ts.00:54:57
Here on the top first we import the00:55:00
express function from the express00:55:02
module. We call this function00:55:06
and get an object which we call app.00:55:09
Next, we declare a constant called port.00:55:12
We can initialize it from an environment00:55:14
variable. To do that, we use00:55:16
process.n.port.00:55:19
So, if we pass port as an environment00:55:21
variable, we can pick it up here. This00:55:23
is useful in production environments.00:55:25
But otherwise, if this environment00:55:27
variable is not defined, we can give00:55:29
this a default value of 3,000. Next we00:55:32
define a route. So here we call app.get00:55:35
and give it two arguments. A path like a00:55:38
forward slash which represents the root00:55:40
of our web server and a function that00:55:43
gets executed when we receive a request00:55:46
at this endpoint. This function should00:55:48
have two arguments a request and a00:55:50
response.00:55:52
Here we use a lambda function and in00:55:54
this function we just want to send the00:55:56
hello world message to the client. So we00:55:58
call response send and pass hello world.00:56:03
Okay. Now so far we have been writing00:56:06
plain JavaScript code. There is no00:56:07
TypeScript here. But we can annotate00:56:10
these arguments with types. So on the00:56:12
top we can import the request and00:56:17
response types from the express module.00:56:20
And then we can annotate these00:56:22
parameters with request and response.00:56:28
Okay. So we have defined a route and a00:56:30
route handler. Next we should start our00:56:33
web server. So we call app.listen and00:56:36
give it two arguments a port and a00:56:39
callback function that gets executed00:56:41
when the web server is up and running.00:56:43
So again we use a lambda function. And00:56:46
here we can say console.log.00:56:49
Now I'm going to replace single quotes00:56:51
with back tick. So we can use template00:56:54
literal. So here we can say server is00:56:57
running on http localhost port. Now here00:57:02
we use a template literal. So we add a00:57:04
dollar sign and curly braces to insert00:57:07
port dynamically. Okay.00:57:11
So that's pretty much it. Now to run00:57:13
this, we go back to the terminal and00:57:15
here in the server directory, we run bun00:57:18
run index.ts.00:57:21
Okay, our server is running. So if you00:57:23
hold down command on Mac or control on00:57:25
Windows and click this, it opens our web00:57:27
browser. So our web server is set up00:57:29
properly. Beautiful. Now instead of00:57:32
running this command every time, we can00:57:34
define a custom command like on start00:57:36
just like we do with node projects. So00:57:39
let's stop this process by pressing00:57:41
control and C. Now we should go to our00:57:43
package.json file. Here in VS Code, we00:57:46
can hold down command on Mac or control00:57:48
on Windows and press P to quickly find00:57:51
files. If we type package.json, you can00:57:53
see we have two files, one in the root00:57:56
directory and one in the server00:57:57
directory. So here in the server00:58:00
package.json, we define00:58:02
our custom scripts. So we add the00:58:05
scripts property. Here's our first00:58:08
script. We call it start and set it to00:58:11
bun run index.ts.00:58:14
We also define a custom script called00:58:16
dev for running our application in watch00:58:19
mode. So anytime we make changes to our00:58:22
files, bun will automatically restart00:58:24
our web server. We set this to bun run00:58:28
index.ts just like before, but here we00:58:30
use the watch option. Make sure to add00:58:34
this right after bun and before run.00:58:37
Okay, now back in the terminal, let's00:58:40
test our commands. So, first we run bun00:58:42
start because this is a built-in00:58:44
command.00:58:45
Okay, our web server is running again.00:58:47
Let's verify it. Beautiful. Let's stop00:58:50
this and try the other command. Now, dev00:58:52
is a custom command. So, we cannot run00:58:55
bundev. Instead, we should run bun00:58:58
rundev.00:59:00
Now, bun is watching our files. So if we00:59:02
go to the index ts in the server00:59:05
directory and make a small change, let's00:59:08
remove the exclamation mark. This should00:59:10
restart our web server. So if we go back00:59:13
to the browser and refresh, the00:59:15
exclamation is gone.00:59:18
[Music]00:59:24
Earlier in the course, I told you that00:59:25
we shouldn't store API keys in the00:59:27
source code. For example, here we don't00:59:29
want to declare a constant like API key00:59:32
and set it to whatever because with this00:59:35
anyone who has access to our source code00:59:36
can use this API key and we'll be the00:59:39
one paying for it. So the right way to00:59:41
manage API keys is using environment00:59:43
variables. That's what I'm going to show00:59:44
you in this lesson. So let's go back to00:59:47
our terminal window and stop this00:59:48
process. Now if you're on a Mac or00:59:50
Linux, you can use the export command.00:59:53
If you're on Windows, you should use the00:59:55
set command. With these commands, we can00:59:57
set an environment variable which is a00:59:59
variable stored at the operating system01:00:01
level. So we give it a name like open01:00:03
AAI underline API underline key. Now by01:00:07
convention, we use capital letters for01:00:10
environment variables. So we set this to01:00:12
a value like 1 2 3 4. Now back to01:00:15
index.ts. Let's remove this line from01:00:18
here. In this route handler, I want to01:00:20
temporarily return our API key. To do01:00:23
that, we use the process object. We go01:00:26
to env or and access open AAI underline01:00:30
API underline key. Make sure to spell it01:00:33
properly. Now back to the terminal.01:00:36
Let's restart our application01:00:39
and go to the homepage. Refresh. This01:00:42
verifies that we could successfully read01:00:44
the environment variable in our01:00:45
application. Beautiful. But there's a01:00:47
problem with this approach. With this01:00:49
approach, every time we want to start01:00:51
our application, first we have to set01:00:53
our environment variables. And this is01:00:54
very tedious. So this is where we use a01:00:56
library called env to streamline this01:00:59
process. Let me show you how to do that.01:01:01
First we stop this process. Next here in01:01:04
the server package we install01:01:08
env oren.01:01:10
Next we go to our project and here in01:01:12
the server directory we add a new file01:01:15
called env.01:01:18
Now if you look at this git ignore file01:01:22
you can see that env files are by01:01:25
default excluded from our git01:01:27
repository. So in the future when we01:01:29
push this repository to github the01:01:31
variables that we declare here will not01:01:33
be exposed to the public. So this is for01:01:35
our private use here we can set open ai01:01:38
underline api underline key to let's use01:01:42
a different value like abcd to01:01:44
differentiate from the former value. Now01:01:47
to load this in our code, we go to01:01:50
index.ts01:01:51
on the top. First we import01:01:55
object from env module. Then we call01:01:59
env.config.01:02:02
This should be the first line in our01:02:03
module. What this does is it goes in01:02:06
this file. It reads all the variables we01:02:09
have declared here and stores them as01:02:11
environment variables before running our01:02:13
application. You will see that in a01:02:15
second. So back to the terminal, let's01:02:18
restart our application.01:02:20
All right, look. Env is injecting01:02:23
environment variables from our env file.01:02:26
So back to the browser. Let's refresh,01:02:29
but the value has not changed. What's01:02:31
going on? Well, the variable that we01:02:33
declared earlier in the terminal window01:02:35
overwrites the variables that we have01:02:37
declared in our env file. To fix this01:02:41
issue, we have to remove the environment01:02:43
variable we set earlier. So, let's stop01:02:46
this. If you're on Mac or Linux, use01:02:49
onset followed by the name of the01:02:50
environment variable like Open AI01:02:53
underline API key. If you're on Windows,01:02:56
use the set command and set the01:02:58
environment variable to an empty value.01:03:02
Okay, now let's restart our application01:03:06
and refresh the homepage. Okay, here's01:03:09
the updated value. Beautiful. So now I'm01:03:12
going to replace this with my actual API01:03:14
key. So back to our env file, I'm going01:03:17
to replace ABCD with a real API key.01:03:20
Beautiful. Now there is a problem here.01:03:23
The problem is that if we commit our01:03:25
code to a Git repository, someone else01:03:27
cloning this has no idea what01:03:29
environment variables they should set.01:03:32
So to help them here, we duplicate this01:03:35
file01:03:36
and rename it to env.example. Example,01:03:41
this file is not going to be excluded01:03:42
from our Git repository so others can01:03:45
see what variables they should set. In01:03:47
this file, we keep the variable names,01:03:49
but we remove the actual values. Now,01:03:52
the last part, back to index.ts.01:03:58
Let's revert this code back and return01:04:00
hello world to the client. So, we're01:04:03
done setting up our API key. Now the01:04:05
final step we make a commit and say01:04:08
manage open AAI API key.01:04:12
Now one more thing before we finish this01:04:13
lesson. If you make any changes in this01:04:15
env file you have to restart the01:04:17
application. So bund will not detect the01:04:19
changes here which means you have to go01:04:21
to the terminal stop this process and01:04:24
restart the application. So the new01:04:26
values are injected into the environment01:04:28
variables. Next we're going to create01:04:30
our client project.01:04:34
[Music]01:04:39
Now to create our front end application,01:04:41
we're going to use Vit. Vit is a very01:04:43
popular build tool for front-end01:04:44
applications. You have probably seen it01:04:46
before. So here on vit.dev, let's go to01:04:49
get started. On this page, you can see01:04:53
the command for creating a new vit01:04:55
project. So with npm, we run npm create01:04:59
vit at latest. We also have support for01:05:02
bun. Let's copy this command. Now back01:05:05
to VS Code. Let's open a new terminal01:05:08
window. So in this application, we're01:05:10
going to have two terminal windows open.01:05:12
One for the server, one for the client.01:05:15
Now we can rename this for clarity. So01:05:18
I'm going to rename this to server.01:05:22
And the second terminal window to01:05:24
client. We can also color code them if01:05:27
you want. Change color. Let's make the01:05:30
server green and the client yellow is01:05:33
fine. Now let's go to the01:05:34
packages/client01:05:36
directory. Paste that command but don't01:05:39
execute it yet because if you do so vit01:05:42
will create a subdirectory here which is01:05:43
not what we want. So here we add a01:05:46
period which means create the front end01:05:48
application in the current directory.01:05:51
Let's go ahead. First we select our01:05:53
framework which is going to be react.01:05:55
Next we select a variant. We're going to01:05:58
go with TypeScript. Okay. Now, back to01:06:01
our project. Look here in the client01:06:03
directory. We have a typical React01:06:05
project created with Vit. There is01:06:07
nothing magical here. In this directory,01:06:09
we also have a package.json file. So,01:06:13
currently we have three package JSON01:06:15
files. One at the root, one for our01:06:17
server application, and the other for01:06:18
the client application. Now, back to the01:06:21
terminal. The next step is to install01:06:23
dependencies using bun. So we can run01:06:26
bon install or bon i.01:06:29
This installs all the dependencies01:06:31
inside our top level node modules01:06:35
directory. So once again we're not going01:06:37
to have different node modules in client01:06:39
and server applications. All right. Now01:06:41
that the dependencies are installed, we01:06:43
can run our application by running bun01:06:45
rundev. So dev is a custom script that01:06:48
is defined in our client package.json01:06:51
file. Let's review that package.json01:06:54
JSON in the client directory. Look, so01:06:57
here we have these scripts, dev, build,01:07:00
lint, and so on. So let's run our client01:07:02
application. Beautiful. Now let's make01:07:05
sure it's working properly. All right,01:07:08
here's our React project. Lovely. So01:07:10
let's wrap up this lesson by making a01:07:12
commit. Create the front end.01:07:18
[Music]01:07:24
All right. Now, to connect our client01:07:26
and server applications, we're going to01:07:28
go to our server application and define01:07:30
a new endpoint. So, we press command np01:07:33
on Mac or control np on Windows and go01:07:36
to index.ts, the one in the server01:07:38
directory.01:07:40
Now, we're going to grab this route01:07:42
handler and duplicate it. Now, let me01:07:44
show you a cool shortcut on the top01:07:46
under the selection menu. Look, we have01:07:49
this command copy line down. The01:07:51
shortcut on Mac is option shift and01:07:54
down. So with this line selected, if I01:07:57
hold down shift, option, and press down,01:08:00
these few lines get duplicated.01:08:02
Now I'm going to change the path to /01:08:04
API/hello.01:08:07
And instead of returning plain text, I01:08:09
want to return a JSON object. So let's01:08:11
pass an object and give it a property01:08:13
like message and set it to hello world.01:08:17
Now before going further, let's test01:08:19
this. So back to the browser here on our01:08:22
server application. Let's send a request01:08:24
to / API/hello.01:08:27
Okay, this is our JSON object.01:08:28
Beautiful. Now if this is not pretty01:08:30
formatted on your machine, just install01:08:33
this Chrome extension JSON formatter.01:08:36
Now let's move on to the client part. So01:08:39
we're going to go to app.tsx.01:08:42
This is the container for our client01:08:44
application. Now, we're going to delete01:08:45
all the import statements. We should01:08:48
also delete all the code inside this01:08:50
function. But we are not going to01:08:51
manually select these lines. I'm going01:08:53
to show you another cool shortcut. So,01:08:55
we put the cursor on the first line.01:08:58
Now, on the top under the selection01:09:00
menu, look at the shortcut for this01:09:02
command. Expand selection. On Mac, it's01:09:06
control shift command and right. So,01:09:09
with the cursor here, I'm going to hold01:09:11
down shift control and command. Now if I01:09:14
press the right arrow the selection will01:09:16
expand. If I press the left arrow the01:09:19
selection will shrink. Take a look. So I01:09:21
press the right arrow. Now this word is01:09:24
selected. I press the right arrow again.01:09:26
Now the entire line is selected. Let's01:09:28
keep going. Now the entire body of this01:09:30
function is selected but not the curly01:09:32
braces. We can keep going. Now the01:09:35
braces are selected. If we keep going01:09:37
the entire function definition is01:09:39
selected. Obviously that's not what we01:09:41
want. So I'm still holding shift control01:09:43
and command with my left hand. Now if we01:09:46
press the left arrow, we can shrink the01:09:48
selection and delete the code in this01:09:51
function. Now here we're going to01:09:53
declare a state variable. So we use the01:09:56
state hook, initialize it to an empty01:09:59
string, and call it message.01:10:05
Now we're going to write a very basic01:10:06
React code to make an API call. So we01:10:09
use the effect hook. Now I know some01:10:11
people are going to have a heart attack01:10:12
saying this but this is just for a quick01:10:14
demo. There are better ways to make API01:10:16
calls. We'll look at that later in the01:10:17
course. So here we use the fetch01:10:19
function to send a request to /01:10:21
API/hello.01:10:24
Then when the promise is resolved we get01:10:26
the response. We convert it to a JSON01:10:28
object01:10:30
and then we get the data and here we set01:10:33
the message to data message.01:10:38
Now as the second argument to the effect01:10:40
hook, we pass an empty array as our01:10:42
dependencies. So this code is executed01:10:44
only once. This is just basic React01:10:46
stuff. You should be familiar with this01:10:48
concept. And finally, we return a01:10:50
paragraph where we render our message.01:10:54
Now if you run our application, this is01:10:56
going to fail because the API endpoint01:10:59
doesn't exist in our client application.01:11:02
So if you go to our client application01:11:04
and send a request to / API/hello,01:11:06
obviously it's not going to work. This01:11:08
is only available in our server01:11:09
application.01:11:11
So to solve this issue, we're going to01:11:13
set up a proxy to automatically forward01:11:15
all requests starting with /appi to our01:11:19
server application. To do that, we go to01:11:22
vit.config.ts.01:11:26
In this object, we add a server01:11:28
property.01:11:29
Next, we set proxy to an object. And01:11:32
here we map requests from / API to HTTP01:11:38
localhost port 3000. And that means if01:11:42
you send a request to let's say /01:11:43
API/hello,01:11:45
this will be automatically forwarded to01:11:48
localhost port 3000/ API/hello.01:11:53
Okay, so with that in place, let's test01:11:56
our application. Back to the browser.01:11:59
Let's go to our client application.01:12:02
Refresh. There you go. We have the hello01:12:03
world message, but it's displayed in the01:12:05
center of the screen, which is not what01:12:07
we want. So, back to VS Code. Let's go01:12:10
to index.css01:12:13
and delete all these styles. We'll come01:12:16
back and work on styling in the future.01:12:18
So, back to the browser. All right,01:12:20
looking good. So, let's wrap up this01:12:22
lesson by making a commit. And here we01:12:24
say connect the front end and back end.01:12:31
[Music]01:12:37
With our current setup, every time we01:12:39
want to start this application, we have01:12:41
to open two terminal windows. One to01:12:43
start the server using one rundev and01:12:46
the other to start the client using the01:12:49
same command. This is tedious. So in01:12:51
this lesson, I'm going to show you a01:12:52
simple way to start both applications01:12:54
using a single command. First, we stop01:12:57
the client and the server. Now we open a01:13:02
new terminal window. Make sure this is01:13:05
pointing to the root of the project.01:13:07
Here we install a dependency as a01:13:10
development dependency called01:13:12
concurrently. Make sure to spell it01:13:14
properly. With this library, we can01:13:17
start multiple applications using a01:13:19
single command. To do this, we go to01:13:22
index.ts in the root directory. Now,01:13:25
currently, we have a console lock01:13:26
statement. Let's get rid of this.01:13:28
Instead, we import the concurrently01:13:31
function from the concurrently module.01:13:35
We call this function and give it an01:13:37
array of commands. Each command is for01:13:40
starting one application. So, here's one01:13:42
object here. We should set a few01:13:44
properties. The first one is name. We01:13:47
set this to server. Next is command. We01:13:50
set this to bun rundev. This is the01:13:54
command that we run. We're starting our01:13:55
server application. Right. Next, we set01:13:58
cwd or current working directory to01:14:02
packages/server.01:14:04
So, we want to run this command from01:14:07
this directory.01:14:09
Now optionally we can assign a prefix01:14:11
color here because with this approach01:14:13
we're going to have a single terminal01:14:15
window. So to differentiate between01:14:17
client and server messages we can assign01:14:19
them different colors. So for server we01:14:22
can use cyan.01:14:24
Now let's duplicate this again. We put01:14:27
the cursor somewhere here. Hold down01:14:29
shift control command and press right to01:14:32
expand selection.01:14:34
Now the entire object is selected. Now01:14:36
let's duplicate it with shift option and01:14:39
down. Good. Now we add a comma here and01:14:43
make a few changes. So this one is going01:14:45
to be client. Again we run our client01:14:48
application using the same command but01:14:50
from a different directory. Also let's01:14:53
change the color to green. Good. So with01:14:56
this setup to start both applications we01:14:59
should run index.ts from our root01:15:02
directory. Now to simplify things, we're01:15:04
going to go to the package.json file in01:15:07
the root directory and define a custom01:15:11
script here. So scripts,01:15:14
we can define a dev script01:15:17
and set it to bun run index.ts.01:15:22
Now back to the terminal. So we're in01:15:24
the root directory here. We run bun01:15:26
rundev.01:15:28
This started both applications. You can01:15:30
see server messages are in cyan and01:15:33
client messages are in green. Let's make01:15:35
sure our setup is working. So back to01:15:37
the browser, let's refresh. Beautiful.01:15:41
So with this, we no longer need the01:15:43
server and client terminal windows.01:15:46
Let's clean things up and make a commit01:15:49
to wrap up this lesson. Run both apps01:15:52
together.01:15:55
[Music]01:16:01
All right, let's talk about styling our01:16:02
application. To style our application,01:16:04
we're going to use Tailwind CSS. Now, if01:16:06
you haven't used Tailwind before, it's a01:16:08
utility first CSS framework, which means01:16:11
it gives us a bunch of small descriptive01:16:13
CSS classes like flex, PT4, which is01:16:16
short for padding, top four, text01:16:19
center, and so on. So, we can use these01:16:21
classes in our markup to style our01:16:24
elements. With this, all the styling is01:16:26
here. So, we don't go back and forth01:16:28
between a CSS file and a CSS file. Now,01:16:31
some people love this, others not so01:16:33
much. But in this course, our focus01:16:35
isn't on styling, it's on building AI01:16:37
powered features. So, we'll keep styling01:16:39
to minimum. And we'll use Tailwind01:16:41
because it's a very popular framework.01:16:43
And if you're not familiar with it, I01:16:45
highly recommend to learn it because01:16:46
it's something that comes up in job01:16:48
descriptions a lot. So, head over to01:16:50
tailwinds.com.01:16:52
Now let's go to the documentation and01:16:55
follow the installation instructions. So01:16:58
we are using Vit. Let's see what we have01:17:00
to do. First we have to create our01:17:01
project which we have done so far. Next01:17:04
to install Tailwind we have to install01:17:06
two libraries. Now we're not going to01:17:09
use npm. So let's grab these two01:17:11
libraries.01:17:13
Back to VS Code. Let's open a new01:17:16
terminal window and go to01:17:18
packages/client.01:17:21
Next, we run bon add and paste these two01:17:24
libraries.01:17:26
All right, good. Now, back to the01:17:28
documentation. The next step is01:17:30
configuring the vit plugin. So, we're01:17:33
going to go to vit.config.ts,01:17:35
import tailwind CSS on the top, and add01:17:39
it in the list of plugins. So, let's01:17:41
grab this line,01:17:43
copy it, and go to vit.config.ts.01:17:50
We paste it here and then add it in the01:17:53
list of plugins. This is a function so01:17:56
we should call it. Okay. Next,01:17:59
we should import tailwind CSS in our01:18:02
root CSS file. So, let's grab this line01:18:06
and01:18:07
go to index.css.01:18:11
Paste it here. I believe this is the01:18:14
last step. So, that's it. Now we can01:18:17
start our application and start01:18:18
building. So let's go to app.tsx01:18:24
and style this message. Here we set01:18:26
class name. Let's set it to font bold.01:18:29
And by the way, I highly recommend to01:18:31
install Tailwind extension in VS Code to01:18:34
get auto completion here. So here on the01:18:36
extensions panel, search for Tailwind01:18:39
CSS.01:18:41
Okay, this is the extension I'm using.01:18:43
Tailwind CSS IntelliSense 10 million01:18:46
downloads. All right. So, let's try font01:18:49
bold. Here's what we get. That looks01:18:52
good. Now, let's give it some padding.01:18:53
So, we can add in a padding of four,01:18:56
which is equivalent to padding of one01:18:59
ram. So, this utility class is a01:19:01
container for this st padding of one01:19:04
ram, which is 16 pixels. Now, take a01:19:07
look. We have some padding around the01:19:08
text. We can also make the text larger.01:19:11
Let's try text 3x large.01:19:16
Okay, that's better. So, that was the01:19:18
basics of Tailwind. As we go through the01:19:20
course, I'm going to show you some01:19:21
additional features. So, let's wrap up01:19:23
this lesson by making a commit and say01:19:25
setup Tailwind CSS.01:19:30
[Music]01:19:36
All right, we set up Tailwind. Now,01:19:37
we're going to set up a UI component01:19:39
library to speed things up, and that's01:19:41
Shatzen. In case you haven't used it01:19:44
before, it's a collection of beautifully01:19:45
designed, accessible, and customizable01:19:48
components. Here on their homepage at01:19:50
ui.shhatsen.com,01:19:52
you can see various examples. They have01:19:54
all these beautiful modern01:19:57
customizable components that we can01:19:59
easily add to our projects. So, let's01:20:01
follow the documentation.01:20:04
Let's go to the docs. First we select01:20:06
our framework which is vit. Now we have01:20:09
created our project. So let's move on.01:20:12
Next we should add tailwind because01:20:13
chaten is built with tailwind. We can01:20:16
move on from this step. We did it in the01:20:17
previous lesson. We also imported01:20:19
tailwind in our index.css file. So now01:20:23
we should modify our typescript01:20:25
configuration file. Now in the current01:20:27
version of vit projects we have three01:20:29
typescript configuration files. We have01:20:31
to modify two of them. One of them is01:20:33
tsconfig.json. JSON. In this file, we01:20:37
should add the compiler options. So,01:20:40
let's select these few lines. Copy. Now,01:20:44
back to VS Code. Here in the client01:20:46
directory, look, we have three01:20:49
TypeScript configuration files. Here's01:20:51
the base one with base settings that is01:20:53
shared between the others. We have one01:20:56
for our React application or front- end01:20:58
stuff and one for Node, which is used01:21:00
for tooling. So, first let's go to01:21:02
tsconfig.json.01:21:04
and paste compiler options.01:21:08
Now back to the documentation.01:21:11
Next, we should modify tsconfig.app.json01:21:14
which is used by our react app. In this01:21:17
file, we already have the compiler01:21:20
options property. So we should only01:21:22
select base URL and paths. Let's copy01:21:26
these. Now let's go to01:21:29
tsconfig.app.json.01:21:32
So here's the compiler options. We just01:21:34
paste these two properties on the top.01:21:38
Back to the documentation. Let's move01:21:40
on. Next, we should update our V01:21:42
configuration file. First, we have to01:21:44
install node types. So, let's copy this01:21:48
line. Back to our terminal. Make sure01:21:51
you're in the client directory. Paste01:21:53
it. Okay. Now, back to the docs. In our01:21:57
V config file, first we have to import01:22:00
path. We should also import tailwind CSS01:22:03
which we did in the previous lesson. So01:22:05
let's just grab the first import01:22:07
statement. Copy it and go to vit01:22:10
config.ts.01:22:13
We paste it on the top. Back to the01:22:15
docs.01:22:17
Now while configuring vit we should add01:22:19
these two plugins react and tailwind01:22:21
which we did before. We just have to add01:22:24
the resolve property. So copy this. And01:22:29
I like to order these alphabetically. So01:22:31
after plugins, I add Resolve.01:22:35
Okay, we're almost there. Now back to01:22:37
the docs. With this, we can run the01:22:40
Shatian CLI. With this CLI, we can01:22:43
easily add components to our project. So01:22:46
we're going to use BONX, which is like01:22:48
npx for running packages. Let's copy01:22:51
this line. Back to the terminal again.01:22:54
Make sure you're in the client01:22:55
directory. Paste it.01:22:58
All right. Chaten is asking what color01:23:00
we want to use as our base color. We01:23:02
have a few options. Neutral, gray, zinc,01:23:05
stone, and so on. What is the01:23:07
difference? Well, back to their website.01:23:09
On the top, let's go to the colors page.01:23:13
Look, this is an example of neutral01:23:15
colors. Then we have stone, which has a01:23:17
warmer tone. We have zinc, which has a01:23:19
cooler tone, slate, gray, and so on. So,01:23:23
that is the difference. I'm going to go01:23:25
with neutral.01:23:27
Now, this CLI created a file called01:23:29
components.json, which keeps track of01:23:32
the components we have installed. Let me01:23:34
show you components.json.01:23:37
It's just some internal stuff. We're not01:23:39
going to modify this. This is used01:23:40
internally by the CLI. Later, when we01:23:43
install components, those components01:23:45
will be listed here. Okay. Now, this CLI01:23:48
also modified our index.css file. Let's01:23:51
take a quick look. index CSS.01:23:54
So in the previous lesson, we only added01:23:57
Tailwind CSS. Now we have a bunch of01:23:59
additional stuff for our theme. So all01:24:02
the base variables for our colors,01:24:05
padding stuff, they're all defined in01:24:07
our CSS file and we can always modify01:24:09
this in the future. Okay, so back to the01:24:12
documentation. Let's move on to the next01:24:14
step. Now you're ready to install01:24:16
components. So if you go to the01:24:20
components page, you can see all the01:24:22
components. In this lesson, I'm going to01:24:24
add a button, you can see a preview up01:24:27
here. You can see an example in the01:24:29
code. Now on the same page, you can see01:24:31
the installation instructions. So we use01:24:34
BONX again to use Shatn CLI to add this01:24:37
button. Let's copy this line and run it01:24:40
in the terminal.01:24:44
Great. Now this button component is part01:24:46
of our project. Take a look.01:24:49
We have all the source code here. We can01:24:51
make any changes we want. All these01:24:53
classes are Tailwind classes. So, we can01:24:55
customize this button to achieve the01:24:57
look and feel we're looking for. Okay.01:25:00
Now, let's see how we can use this. So,01:25:01
we go to app.tsx.01:25:04
First, let's wrap this expression in01:25:07
parenthesis so we can break it down into01:25:10
multiple lines. Now, below the01:25:12
paragraph, I want to add a button. So,01:25:14
we add a button component. This is01:25:16
defined in components/ UI/button.01:25:20
Let's import it. We give it the text01:25:23
like click me. Now, because we have01:25:25
multiple elements, we have to wrap them01:25:27
inside a root element.01:25:30
Okay, back to the browser. Here's what01:25:33
we get. Beautiful. But the button is too01:25:35
close to the edge of the screen. So01:25:38
let's convert this to a div01:25:42
and give it a class of P4. Now we can01:25:47
remove P4 from our text. Now take a01:25:50
look. Okay, that's better. So let's wrap01:25:53
up this lesson. We make a commit and say01:25:55
setup shaden UI.01:26:00
[Music]01:26:06
In this lesson, we're going to set up01:26:07
Prettier. Prettier is a tool that01:26:09
automatically formats our code, so we01:26:12
don't have to think about things like01:26:13
spacing, indentation, or semicolons.01:26:16
That means fewer distractions, fewer01:26:18
style debates, and code that's easier to01:26:20
read for us or anyone else working on01:26:22
this project. So, there are a number of01:26:23
steps you have to follow. Pay close01:26:25
attention to what I'm doing, even if you01:26:27
have set up prettier before. First, we01:26:29
go to the extensions panel and find the01:26:32
prettier extension. If you haven't01:26:35
installed it, go ahead and install it.01:26:37
Next, we're going to define our styling01:26:40
rules. Now, by default, Predier comes01:26:42
with its own rules, but we can override01:26:44
them by creating a prettier rc file. So,01:26:47
here in the root of our project, we add01:26:49
a file called prettier rc. Make sure to01:26:55
spell it properly.01:26:57
Here we add a JSON object where we01:26:59
define our formatting rules. Now, there01:27:01
are a number of settings you can01:27:02
customize. You can look at the prettier01:27:04
documentation, but at a minimum, you01:27:06
want to set single quote to true. This01:27:10
is my personal preference. I prefer01:27:12
single quotes to double quotes. And by01:27:14
that, I'm talking about JavaScript code,01:27:16
not JSON because in JSON, we cannot have01:27:20
single quotes like this. Okay? So, we're01:27:22
going to use single quotes in this01:27:23
project. Next, we set semi to true. That01:27:27
will terminate our lines with a01:27:28
semicolon. Again, my personal01:27:30
preference. Next, we set trading comma01:27:34
to ES5. This setting controls whether or01:27:37
not Prettier adds a comma at the end of01:27:39
the last item in things like arrays,01:27:42
objects, or function arguments when they01:27:44
are written on multiple lines. Now, if01:27:46
we set this to ES5, this tells Priier to01:27:49
add trailing commas where valid in ES5.01:27:52
That means objects, arrays, functional01:27:54
arguments, but not in function01:27:56
definitions or inline arrow functions.01:27:59
Okay. The next setting we're going to01:28:01
set is print width. The default is 80.01:28:04
We keep that.01:28:06
And also tab width, which is the number01:28:08
of spaces for indentation. The default01:28:10
is two. I'm going to change it to three.01:28:13
Now, to see this in action, let's go to01:28:16
app.tsx.01:28:18
Now, in this file, we're using single01:28:19
quotes. I'm going to change these single01:28:22
quotes to double and also remove the01:28:25
semicolon. Now, we're going to go to the01:28:27
command pallet. We can find it under the01:28:30
view menu. The shortcut is shift command01:28:34
and P on Mac. Here search for format01:28:37
document. Now the first time you execute01:28:39
this command, VS code will ask you about01:28:41
the default formatter. Select prettier.01:28:44
Once you do that, format your code. Now01:28:47
look, the double quotes are replaced01:28:49
with single quotes. We have a semicolon01:28:51
and we have consistent tab width. Now we01:28:54
can also configure VS Code to01:28:56
automatically format our code whenever01:28:58
we save our files. To do that we go to01:29:00
the settings. So settings the shortcut01:29:04
is command and comma on Mac.01:29:08
Here search for format on save.01:29:11
Make sure it's enabled with this. If you01:29:14
remove this semicolon but save this file01:29:17
prettier automatically formats this01:29:18
code. Now we can also format our code01:29:20
from the command line. And this is01:29:22
useful before committing our code to git01:29:24
and sharing it with others. To do that,01:29:26
first we have to install Predier as a01:29:29
development dependency. So open a01:29:32
terminal window, a new terminal window01:29:34
pointing to the root of our project.01:29:36
Let's run bon add-er.01:29:40
We add this to the root of our project01:29:42
because we don't want this to be01:29:43
specific to the client or the server01:29:45
application. Okay, let's install this.01:29:49
Next, we go to the package.json JSON01:29:50
file in the root of our project.01:29:53
In this file, we have a script or a01:29:56
command for running both applications.01:29:58
Next, we're going to define a command01:30:00
for formatting the entire codebase. We01:30:03
set this to prettier d-right01:30:06
period, which means start from the01:30:08
current directory. Now, as part of01:30:10
formatting our files, we don't want to01:30:12
format third party code stored in the01:30:15
node modules directory.01:30:18
So here we're going to add a new file in01:30:21
the root of our project called predier01:30:25
ignore. This is similar to git ignore.01:30:28
In this file we can list all the files01:30:30
or directories that should be ignored by01:30:32
predier. So at a minimum we add node01:30:34
modules and also it's good to add01:30:37
bun.lock. This is a lock file used by01:30:39
bun for installing dependencies. We01:30:41
should never touch this. With this in01:30:43
place, now we go back to the terminal in01:30:45
the root of our project and run bun run01:30:48
format.01:30:50
All right. So this formatted all the01:30:52
files in this project. With this we can01:30:55
wrap up this lesson and say setup01:30:58
prettier.01:31:04
[Music]01:31:08
In the last lesson, I showed you how we01:31:10
can format our code before committing it01:31:12
to Git. And I told you that this is a01:31:14
good practice to follow before01:31:16
committing our code to Git and sharing01:31:18
it with others. But there's a problem.01:31:20
What if we forget to run this command01:31:22
before we make a commit? This is where01:31:24
Husky comes in. With Husky, we can01:31:26
automate our Git workflow. So, we can01:31:28
run certain commands like formatting our01:31:31
code or running tests before committing01:31:33
or pushing our code. To get started, go01:31:36
to typicode.github.io.01:31:38
io/husky.01:31:40
Now let's go to the get started page.01:31:43
First we have to install husky as a01:31:45
development dependency. So let's copy01:31:47
this command back to the VS code. Open a01:31:50
terminal window pointing to the root of01:31:52
the project. Let's run this command.01:31:54
Good. Back to the documentation. Next we01:31:57
have to initialize husky. What this does01:32:00
is it creates a pre-comit script in the01:32:03
husky directory. I'll show you that in a01:32:05
second. So let's run bonex husky in it01:32:09
in the terminal window.01:32:12
Good. Now back to our project. So here01:32:16
we have the husky directory. In this01:32:18
directory we have this pre-commit01:32:20
script. In this file we can add any01:32:23
commands that should be executed before01:32:25
committing our code. By default it tries01:32:27
to run one test for running our tests01:32:30
because this is a good practice to01:32:31
follow. But in this project we don't01:32:33
have any tests. So instead we should run01:32:36
bun run format. But there's a problem01:32:39
here with this command we'll format our01:32:41
entire codebase. And that means as our01:32:44
project gets larger as we add more files01:32:46
this operation is going to get slower.01:32:48
But there's a second problem. If we have01:32:49
worked on a certain feature and modified01:32:51
only let's say two files this command01:32:54
will potentially format other files that01:32:56
are not formatted and we'll put them in01:32:58
our commit which can be misleading. So01:33:00
later when we look at our git history,01:33:02
if you open a commit, we'll see a bunch01:33:04
of files that are modified just as a01:33:06
result of formatting. So instead of01:33:08
formatting the entire codebase, we01:33:10
should format only the staged files. To01:33:13
do that, we're going to use a separate01:33:15
library called lint staged. With this01:33:17
library, we can execute tasks on staged01:33:20
files. So back to the terminal, let's01:33:23
install lintstaged as a development01:33:26
dependency. lint dash staged.01:33:31
All right, good. Now, back to our01:33:33
pre-commit script. We're going to01:33:34
replace this command with bonex lint01:33:37
dash staged. So, when we're going to01:33:40
make a commit, we'll run lint staged.01:33:43
Next, we should tell lintstaged what01:33:45
task to perform on what files. To do01:33:47
that, we go in the root of our project01:33:50
and add a new file01:33:53
called lintstagedrc.01:33:57
Make sure to spell it properly. In this01:33:59
file, we add a JSON object where keys01:34:02
are file patterns like we can say any01:34:04
file with any name but with one of these01:34:07
extensions. So in braces we add JS, JSX,01:34:11
TS, TSX and CSS.01:34:14
Now for the value we specify the command01:34:17
that should be executed for stage files01:34:19
that match this pattern. In this case01:34:21
we're going to run prettier d-right. Now01:34:25
earlier we added a period but we're not01:34:27
going to use that here because this will01:34:28
format the entire codebase starting from01:34:31
the current directory but in this case01:34:33
we only want to write or format files01:34:35
that match this pattern. Okay so to01:34:38
recap next time we're going to commit01:34:40
husky will run the pre-commit script in01:34:43
this script we're running lint staged01:34:46
lint stage will look at this file it01:34:48
figures out that it should run prettier01:34:50
on files that match this pattern. Okay.01:34:52
Now, to see this in action, let's go to01:34:56
app.tsx01:34:58
and make a few changes. First, I'm going01:35:00
to add an exclamation mark here, but I'm01:35:03
going to also mess up with formatting01:35:07
and also remove this semicolon. Now, I'm01:35:10
not going to save this file because if I01:35:12
do so, Predator will automatically01:35:13
format this file. In my VS Code, I have01:35:16
set up autosaving. So under file menu we01:35:19
have autosave enabled which means the01:35:22
file is saved but it's not automatically01:35:24
formatted. Formatting only happens when01:35:26
we explicitly save this file. Okay. Now01:35:30
let's go and make a commit. So here we01:35:32
can say setup husky.01:35:35
Now there is a problem at the time of01:35:37
this recording. I believe this is a01:35:38
temporary issue with VS Code. Hopefully01:35:41
that doesn't happen when you're watching01:35:42
this video or maybe this is a problem01:35:44
with my setup. So when I make a commit,01:35:47
look, we get this error saying bonex01:35:50
command not found. Here's what's01:35:52
happening. So VS code is complaining01:35:54
that the bonex command that we have01:35:56
referenced in our pre-commit script01:35:58
cannot be found. Now this doesn't happen01:36:00
if we make a commit from the terminal01:36:02
window. So one way to solve this is by01:36:06
adding all the files here and then01:36:08
making a commit. Let's say setup husky.01:36:13
Okay, the commit is done and now we can01:36:16
verify that our app tsx is formatted. So01:36:19
let's go to app.tsx.01:36:21
Look, the file is beautifully formatted01:36:23
and we have this semicolon here. But01:36:25
what if this happens on your machine and01:36:27
you don't want to commit from the01:36:28
terminal? The solution for that is to01:36:30
replace bonex with npx. So we go to our01:36:34
pre-commit script and replace bonex with01:36:39
npx. I know this is not ideal. is kind01:36:41
of like a hack because we decided to use01:36:43
bun for the entire project. But if you01:36:45
really like the source control panel in01:36:47
VS Code and prefer to make commits this01:36:49
way, you have to replace bonex with npx.01:36:52
Let's make sure this works. So back to01:36:54
appsx again, let's make a change here.01:36:58
Remove the semicolon and mess up with01:37:01
formatting. Let's make a commit. I'm01:37:04
going to say test husky.01:37:07
Okay, no problem. But I'm not going to01:37:09
keep this commit in our history. So back01:37:12
to the terminal. Let's run git log d-01:37:15
one line. So here's our commit history.01:37:18
Now the head pointer is pointing to this01:37:20
commit test husky. We want to get rid of01:37:23
it and have the head point to this01:37:26
previous commit. So the way we do that01:37:29
is by running get reset d- hard. Then we01:37:33
get the head pointer and go one step01:37:36
back. Let's go ahead. Good. Now let's01:37:39
verify that everything looks good. Get01:37:41
log one line. Now the head pointer is01:37:45
pointing to this commit. Beautiful. So01:37:47
we're done with this section. In the01:37:49
next section, we'll start building our01:37:50
first project.01:37:53
[Music]01:37:55
Chatbots are everywhere now. They're01:37:57
becoming a core part of modern01:37:59
applications. So in this section, we're01:38:01
going to build one together from01:38:02
scratch. At first glance, it looks01:38:04
simple. A text box, a send button, and a01:38:06
list of messages. But behind the scenes,01:38:09
there's a lot going on. There's subtle01:38:11
UX details, state management challenges,01:38:13
and edge cases that are easy to overlook01:38:15
if you haven't built one before. So,01:38:17
grab yourself a cup of coffee and let's01:38:19
get started.01:38:24
Now, this section is a little bit01:38:25
longer, so I've broken it down into two01:38:28
segments. In this segment, we'll start01:38:30
by building the backend for chatbot.01:38:33
First, we'll create a basic API that01:38:35
receives a message and returns a01:38:36
response from an AI model. Once that's01:38:39
working, we'll gradually improve it by01:38:41
adding input validation, error handling,01:38:43
and making sure it's robust and clean.01:38:46
Then, we'll reorganize our code to keep01:38:48
things modular and easy to maintain. By01:38:50
the end of this segment, we'll have a01:38:52
fully functional production ready01:38:53
backend ready to plug into our front01:38:55
end. So, let's jump in.01:38:58
[Music]01:39:04
In this lesson, we're going to build a01:39:06
simple API endpoint that receives a01:39:08
message from the user and returns a01:39:10
response. To get started, first we open01:39:12
a new terminal window and go to01:39:14
packages/server01:39:17
and install OpenAI. So, one addi.01:39:22
Good. Next, we go to index.ts in our01:39:25
server application.01:39:28
on the top. First we import open AAI01:39:31
from OpenAI. Once we run config, then we01:39:35
create a new instance of OpenAI with our01:39:37
API key. So let's declare a constant01:39:40
called client and set it to new OpenAI.01:39:43
Here we set API key to we go to process01:39:47
environment and grab open AI underline01:39:51
API underline key.01:39:54
Okay. Next, we define a new endpoint for01:39:58
receiving prompts from the user. So, we01:40:01
call app.post.01:40:04
Now, in this case, we're not going to01:40:05
use that get method because we're not01:40:07
just getting information, we're01:40:08
submitting data to the server. So, we01:40:10
have to send an HTTP post request to01:40:12
this endpoint. Now, for the path, let's01:40:15
go with API/ chat. Next, we add a01:40:19
request handler. So request01:40:22
and response.01:40:26
Now in this function first we should01:40:28
grab the user's prompt from the request.01:40:31
So this request object has a body01:40:33
property. Let's say in the object that01:40:35
we sent to the server we have a property01:40:37
like prompt. We get that and store it in01:40:40
a constant. A cleaner way is to use01:40:43
dstructuring. So instead of accessing01:40:45
the prompt property, we grab request01:40:48
body and dstructure it to grab the01:40:51
prompt property. That's cleaner. Next,01:40:54
we send this to OpenAI. So we call01:40:56
client responses.create.01:41:00
We pass an object. First, we set the01:41:03
model. Now what model are we going to01:41:04
use? Back to the OpenAI website. Look01:41:07
here on the models page. We have01:41:09
different categories of models. We have01:41:11
reasoning models which are used for01:41:13
solving complex multi-step tasks like01:41:15
coding problems. We have another01:41:17
category flagship chat models. They're01:41:20
highly intelligent chat models. Then we01:41:22
have costop optimized models. These are01:41:24
smaller and faster. We also have01:41:27
research models, runtime models, image01:41:30
generation models, and so on. For a01:41:32
chatbot, we can go with one of these01:41:35
costs optimized models because we want a01:41:37
small model that can quickly respond to01:41:39
the user's queries. We don't need01:41:40
reasoning. We don't need to solve01:41:42
complex problems. So for comparison,01:41:45
let's compare a couple of these in terms01:41:47
of their performance and price. I'm01:41:49
going to compare 04 Mini with GPT 4001:41:53
Mini. So on the top, let's compare01:41:56
models. Here we have 04 Mini. Let's also01:41:59
compare GPT-4001:42:03
Mini. Now Mini has various flavors. We01:42:06
have mini audio, realtime, and so on.01:42:08
We're going to grab this base model. Now01:42:11
compare these two models. So for OMI is01:42:16
the fastest of all these models. It's a01:42:18
multimodal model. So in the input we can01:42:20
pass text and image. Now compare the01:42:23
prices for this model. The price of 101:42:26
million input tokens is 15 cents. Now01:42:28
compare that to this other model. It's01:42:31
10 times more. So it makes more sense to01:42:34
use this model for our chat application.01:42:37
Now, what about context window? The01:42:40
context window of this model is 128,00001:42:43
compared to this other model. But for a01:42:45
chatbot, let's say this is going to be a01:42:47
customer assistant. Usually, we don't01:42:49
have long conversations. We don't need a01:42:51
very large context window. Users come01:42:54
ask a few questions and move on. So, I01:42:56
believe 128,000 tokens is a good size01:42:59
for the context window. So, back to the01:43:01
code. Let's set the model to GPT-40-01:43:05
mini.01:43:07
Next, we set input to users prompt. It's01:43:11
good to set a temperature. Now, in the01:43:13
chatbot, responses should be accurate01:43:15
and consistent. We don't need creativity01:43:17
here. So, we should stick with lower01:43:20
temperatures somewhere between 2 to 4.01:43:23
I'm going to go with 02, but we can01:43:25
always modify this in the future.01:43:26
There's no hard and fast rule. This is01:43:28
more an art than science. We have to01:43:30
test different temperatures to see what01:43:32
kind of responses we like more. Now,01:43:34
it's also good to set max output tokens,01:43:37
otherwise the responses are going to be01:43:39
long. But in a chat application for a01:43:41
chatbot, we should have relatively short01:43:43
responses. So, I'm going to set this to01:43:46
100 tokens. And again, we can always01:43:48
come back and adjust this. So, we call01:43:51
this method. We await the call and get01:43:54
the response. Because we are using01:43:57
await, we have to mark this function as01:44:00
async. So, we have the response. The01:44:03
final step is to return a JSON object to01:44:05
the client. So we call response.json.01:44:09
We pass an object. And here we add a01:44:12
property like message. We set it to01:44:13
response output text. We're almost done.01:44:18
There's just one step missing. Look in01:44:20
this function. We're extracting the01:44:22
prompt from the request body. By01:44:24
default, this is not going to work01:44:26
unless we tell Express to automatically01:44:28
parse JSON object from the request body.01:44:30
The way we do that is by adding a01:44:32
middleware function. So on the top once01:44:35
we create an app we call app dot use.01:44:41
Here we call express.json.01:44:44
This returns a middleware function that01:44:46
gets executed before passing that01:44:48
request to our request handler. So in an01:44:51
express application we can have one or01:44:53
more middleware functions. These01:44:55
middleware functions can be used for01:44:56
parsing request data, for enforcing01:44:59
security rules, for login and so on. So01:45:01
once we install the JSON middleware,01:45:04
we'll be able to access request.body01:45:06
otherwise this is going to be undefined.01:45:09
In other words, the JSON middleware gets01:45:11
executed before our request handler. It01:45:14
parses the JSON object in the request01:45:15
body and stores it in request.body.01:45:19
We're done with our first step. Next,01:45:21
I'm going to show you how to test this01:45:22
endpoint. All01:45:24
[Music]01:45:30
right. Now to test our API endpoint,01:45:32
let's go to the extensions panel and01:45:34
search for Postman.01:45:37
This is a very useful extension for01:45:39
testing API endpoints. It's also01:45:41
available as a standalone application.01:45:43
In the past, I used to use the01:45:45
application, but recently I've been01:45:47
using the extension more. It's kind of01:45:48
more convenient. So, let's go ahead and01:45:51
install this. Once you do this, go to01:45:54
the command pallet. You can find it01:45:56
under the view menu. The shortcut is01:45:58
shift command and P on Mac and probably01:46:01
shift control P on Windows. Here, search01:46:04
for show Postman.01:46:07
You get this panel. The first time you01:46:09
have to create an account and sign in. I01:46:11
know it's a pain in the neck, but trust01:46:12
me, it's completely worth it. It only01:46:14
takes a minute. With this, we can save01:46:16
your HTTP requests in your account and01:46:18
share them across your different01:46:20
machines, so you don't have to recreate01:46:22
them every time. But you can also share01:46:23
your requests with other members in your01:46:25
team. It's very convenient. We're going01:46:28
to create a new HTTP request. We're01:46:30
going to send a post request to HTTP01:46:35
localhost port 3000/ API/ chat. Next, we01:46:40
go in the body tab, select raw for the01:46:43
type of data we want to send. And from01:46:46
this drop-own list, we select JSON.01:46:49
Now, here we add a JSON object to send01:46:51
to the server. So, we add a JSON object.01:46:54
We give it a property called prompt and01:46:56
set it to let's say what is the capital01:46:59
of France. Let's send this request.01:47:04
All right, we got a response with a01:47:05
status of 200. Now, let me put this side01:47:08
by side so you can see clearly. We can01:47:10
toggle the view mode. So, here's our01:47:13
request and here's our response. We have01:47:14
a message saying the capital of France01:47:16
is Paris. Beautiful. So, our API is01:47:19
working. Let's move on to the next01:47:20
lesson.01:47:22
[Music]01:47:28
Right now, our chatbot doesn't have a01:47:30
memory. So, if you ask a follow-up01:47:32
question, it doesn't remember our01:47:33
previous questions. Let me show you. So01:47:36
here I'm going to change the prompt to01:47:39
what was my previous question.01:47:42
Let's see what it says.01:47:45
It says I can't access previous01:47:47
interactions or questions. So how can we01:47:49
solve this? Well, one very basic way to01:47:51
solve this is by declaring a global01:47:53
variable for keeping track of the last01:47:56
response ID. This is a temporary01:47:58
solution. We're going to do things step01:47:59
by step. So outside of our route01:48:03
handler, we declare a global variable01:48:06
like last response ID. Now in terms of01:48:10
the type, this can be either a string if01:48:13
we have a valid response ID or null. The01:48:17
first time we're going to initialize01:48:18
this to null. Now every time we get a01:48:21
response from OpenAI, we update01:48:24
last response ID, we set it to response01:48:28
ID. Now when calling the create method01:48:32
in this options object, we can pass01:48:35
previous response ID to establish a01:48:39
conversation history. So let's set this01:48:42
to last response ID and test our API01:48:44
again. Back to Postman. Let's start by01:48:48
asking what is the capital of France.01:48:54
It says the capital of France is Paris.01:48:56
Great. Now let's ask what was my01:49:00
previous question.01:49:04
It says your previous question was about01:49:06
the capital of France. Great. So we have01:49:08
built memory into this chatbot. But01:49:10
there is a problem. Back to our code.01:49:13
With this global variable, we can only01:49:16
keep track of the last response ID for01:49:18
one conversation. But in a real01:49:20
application, we can have multiple users01:49:23
and each user can have multiple01:49:25
conversations. So the right way to01:49:27
address this is by using a map or a01:49:29
dictionary. So instead of one global01:49:32
variable, we declare a map. Let's call01:49:35
it conversations.01:49:37
We set it to a new map that here we01:49:39
specify the type of keys and values. I'm01:49:42
going to go with string and string. I01:49:45
will explain what it means in a second.01:49:47
So in this dictionary or in this map,01:49:49
we're going to map conversation ids to01:49:52
last response ID in that conversation.01:49:56
For example, we might have a01:49:57
conversation conversation one and the01:49:59
last response ID in that conversation01:50:01
can be 100. Similarly, we can have01:50:04
another conversation and in that01:50:06
conversation in that thread, the last01:50:08
response ID might be 200. So we're going01:50:11
to replace this single global variable01:50:14
with a map.01:50:16
Now in our route handler first we should01:50:20
get the conversation ID from the body of01:50:22
the request. So01:50:25
let's grab it from this object. Let's01:50:28
call it conversation ID. Now this is the01:50:30
same experience we have in chat GPT. For01:50:32
example, when we ask a new question,01:50:35
let's say what is the capital of France?01:50:38
Look what happens in the URL.01:50:42
This client application created a Gwid01:50:45
or a globally unique identifier to01:50:47
represent this conversation. So the01:50:49
client is sending the conversation ID to01:50:51
the server. Now back to our code. We01:50:54
have the conversation ID. Once we get a01:50:57
response, we should update the last01:50:59
response ID in that conversation. To do01:51:02
that we call conversations01:51:05
set as the key we provide conversation01:51:08
id and as the value we provide response01:51:13
do ID01:51:15
and also when setting the previous01:51:18
response ID we should get the last01:51:20
response ID of the current conversation.01:51:23
So we call conversations that get we01:51:26
pass conversation ID and get the last01:51:30
response ID. Let's test this. So back to01:51:33
Postman, I'm going to start with what is01:51:37
the capital of France.01:51:42
It says the capital of France is Paris.01:51:44
Now I forgot to pass the conversation01:51:46
ID. So let's add conversation ID here.01:51:51
Now we can use a grid or just a simple01:51:53
string like con one. Let's start again.01:51:57
Okay. Now in the same conversation I'm01:52:00
going to ask what was my previous01:52:03
question.01:52:06
Now it's not updating. This is a glitch01:52:08
with Postman extension. I don't know if01:52:10
it happens on your machine or not. But01:52:12
if you go to the raw tab, you can see01:52:14
the updated response. Sometimes it01:52:16
doesn't update on the pretty tab. So if01:52:18
that happens you can simply close this01:52:20
window and reopen it. Alternatively you01:52:23
can use the raw or preview tabs. So here01:52:25
it says your previous question was about01:52:27
the capital of France. Great. Now let's01:52:30
open a new conversation and in that01:52:32
conversation ask what was my previous01:52:34
question. Let's see what happens.01:52:38
Again the pretty tab is not updating. So01:52:39
let's go to the raw tab. It says I can't01:52:42
access previous questions or01:52:43
conversations. Great. Let's ask a01:52:45
different question here and say what is01:52:48
after one.01:52:52
After one, the next number is two. Now01:52:55
let's repeat. What was my last question?01:53:01
It says your last question was what is01:53:03
after one? Now if you ask the same01:53:06
question but go to a different01:53:07
conversation,01:53:10
it says your last question was what was01:53:13
my previous question? So it's properly01:53:15
keeping track of the conversation01:53:16
history. Now back to our code. So using01:53:19
a map, we can keep track of the last01:53:23
response in each conversation. Now in01:53:26
this implementation, we are storing01:53:27
these values in memory. In a real01:53:29
application like chat GPT, we should01:53:31
store these values in the database. But01:53:33
that's more complicated. We're not going01:53:35
to do any database work in this project01:53:37
because we just want to focus on01:53:38
foundations. Later in the course, we01:53:40
have another project that involves some01:53:42
database work.01:53:44
[Music]01:53:50
In the last lesson, we assumed that01:53:51
everything would go smoothly. But in a01:53:53
real world application, we can't rely on01:53:55
that. We need to make sure that the01:53:57
request body contains valid data. More01:54:00
specifically, we want to make sure that01:54:02
prompt is a string between 1 and 1,00001:54:05
characters. And conversation ID is a01:54:07
valid Gwid or globally unique01:54:10
identifier. just like the GUID we have01:54:12
here on chat GPT. So how can we01:54:15
implement these validation rules? This01:54:17
is where we use Zot. Zot is a very01:54:20
popular data validation library used in01:54:22
React applications. So let's open a01:54:25
terminal window here in the server01:54:27
directory. Let's add Zot.01:54:31
All right, good. Now with Zot, we can01:54:33
define the shape of our objects like01:54:35
incoming request data and easily01:54:37
validate them. So let's go to index.ts.01:54:42
First on the top we import Z from zot.01:54:48
Now down here01:54:52
outside of our route handler, let's01:54:55
declare a constant called chat schema.01:54:59
We set it to Z.Object.01:55:02
And here we pass an object for defining01:55:04
the shape of our incoming request data.01:55:06
So in the request we want to have a01:55:08
property called prompt.01:55:11
This should be a string. So we set it to01:55:13
Z dot string. Now here we can chain01:55:16
various methods for defining validation01:55:18
rules. For example, we can call min to01:55:21
specify a minimum length. Let's say a01:55:23
minimum of one character. Now here01:55:26
optionally we can provide a custom error01:55:28
message like prompt is required.01:55:32
Now, we can chain additional methods for01:55:34
defining additional validation rules.01:55:36
For example, we can apply a max length01:55:38
of 1,00 characters. Now, why do we do01:55:41
this? Because we want to prevent a bad01:55:43
user from posting a large amount of text01:55:45
and potentially bringing down our system01:55:48
or at a minimum, we want to prevent them01:55:50
from wasting our tokens. So, we should01:55:52
always apply constraint on the min and01:55:54
max length of our strings. Again, we01:55:57
provide a custom error and say prompt is01:56:00
too long. Max 1,000 characters.01:56:05
Now, when adding multiple validation01:56:07
rules, I like to break my code down into01:56:10
multiple lines. That makes it easier to01:56:12
see things01:56:14
like this. That's better. So, that's the01:56:16
prompt property. Now, in our request, we01:56:18
also want to have a property called01:56:20
conversation ID. This should also be a01:56:23
string. But here we don't want to apply01:56:25
a min and max length. Instead, we want01:56:27
to make sure that this is a valid UYU01:56:30
ID. That's short for universally unique01:56:33
identifier. So, UYU ID or GWIT, they're01:56:36
the same thing. Now that we have a chat01:56:38
schema, we go to our route handler. The01:56:41
first thing we're going to do is01:56:42
validate our incoming request data. So,01:56:45
here we call chat schema01:56:49
safe parse and pass request.01:56:53
This returns an object. We store it in a01:56:56
constant called parse result.01:57:00
Next, we check if parse result is not01:57:03
successful,01:57:06
then we set the status of the response01:57:08
to 400, which means bad request. This is01:57:12
the standard error code we use when the01:57:14
client sends bad data to the server.01:57:16
Also, in the body of the response, we01:57:18
want to add a JSON object to provide01:57:20
error messages to the client. We can get01:57:22
that object from parse result dot error01:57:26
dot format.01:57:29
Okay. Now finally we return. So the rest01:57:32
of this method is not executed. Now01:57:34
let's test this. So let's go to the01:57:36
postman window. Let's see what happens01:57:38
if we pass an empty string for the01:57:41
prompt.01:57:43
All right. Here's what we get. We get an01:57:45
object with three properties. errors01:57:47
which contains common errors as well as01:57:50
prompt and conversation ID which contain01:57:53
specific error messages for these01:57:55
properties. So for prompt we have an01:57:57
error saying prompt is required and for01:57:59
conversation ID we have another error01:58:01
saying invalid Uyu ID. Now let's see01:58:04
what happens if we pass a few white01:58:06
spaces. So with this we have a string01:58:09
that is at least one character long. But01:58:11
a string with white spaces is not a01:58:13
valid prompt. So let's see what happens.01:58:16
The error for the prompt property is01:58:18
gone which is not good. So to prevent01:58:20
this we have to go back to our schema.01:58:24
And before applying min and max rules01:58:27
first we trim the string. With this we01:58:30
get rid of the white spaces at the01:58:32
beginning or end of our string. Now01:58:35
let's send this request one more time.01:58:37
All right the error for the prompt01:58:39
property is back. Great. So let's pass a01:58:42
valid prompt like what is the capital of01:58:45
France.01:58:46
Now for conversation ID we need to pass01:58:48
a valid Gwid. How do we do that? Well we01:58:52
can install an extension for generating01:58:55
grids. So here search for Gwid or UIU01:58:58
ID. There are a lot of different01:58:59
extensions. I use this one UU ID01:59:02
generator. Now back to our request01:59:05
editor. We put the cursor here. Bring up01:59:08
the command pallet and search for UYU01:59:11
ID. We have two commands. The first one01:59:13
is generate UU ID at cursor. Let's01:59:16
select this command. Now we have this UU01:59:19
ID. Copy to clipboard. Let's replace con01:59:22
one with this valid UIU ID. Now we send01:59:26
this request. Okay, it's gone through01:59:29
and we got a response from OpenAI.01:59:34
[Music]01:59:39
All right. Now that we have added basic01:59:40
input validation, the next step is to01:59:42
handle unexpected errors more01:59:44
gracefully. In this lesson, we'll update01:59:46
our API to catch and respond to runtime01:59:48
errors and return a proper error message01:59:51
to the client. So look on this line01:59:53
where we try to get a response from01:59:55
OpenAI. This line might fail for various01:59:57
reasons. Maybe the network is down.02:00:00
Maybe OpenAI servers are down. Perhaps02:00:02
we run out of tokens. Many different02:00:04
things can go wrong. Right now, we are02:00:06
not handling errors. So, to demonstrate02:00:08
this, I want to add an exclamation mark02:00:11
here to represent an invalid model. Now,02:00:14
let's see what happens when we send a02:00:16
request to our API.02:00:19
All right, we get this HTML document. If02:00:22
you preview it, here's what we get.02:00:24
Error 400. The requested model does not02:00:27
exist. And down below, we have our full02:00:30
stack trace. So we can see on which line02:00:33
this error has occurred. This is not a02:00:35
good response to return from our API. So02:00:37
instead we're going to handle this error02:00:39
and return a proper error message to the02:00:41
client. To do that we're going to add a02:00:45
try catch block in our route handler.02:00:48
So try catch02:00:51
in the try block we add our happy path.02:00:54
So we add all the code for getting a02:00:57
response, updating the conversations map02:01:00
and returning the response. We get all02:01:03
this code and put it inside the try02:01:05
block. Okay. Now because this line for02:01:09
extracting the prompt and conversation02:01:12
ID is closely related to the rest of the02:01:14
code, I want to bring this down and put02:01:16
it inside the try block as well for02:01:19
clarity. Now in the catch block, we02:01:21
handle errors.02:01:24
In case something goes wrong, first we02:01:25
want to set the status to 500, which02:01:28
means internal server error. And then we02:01:31
want to return a JSON object with an02:01:34
error property saying failed to generate02:01:38
a response. Okay, now let's see what02:01:42
happens if we send another request to02:01:43
our API.02:01:46
All right, here's what we get. We get a02:01:47
proper error message that we can show on02:01:49
the client.02:01:52
[Music]02:01:57
Right now there is too much happening in02:01:59
our chat API. We have some code for02:02:02
managing conversation state. We have our02:02:04
schema definition. We have data02:02:06
validation, the call to open AI. There's02:02:09
so much happening in this file. There's02:02:11
no real separation of concerns.02:02:13
Everything is just mixed together. It's02:02:15
kind of like a chaotic closet. It's hard02:02:17
to find a particular t-shirt in this02:02:19
closet. So now we're going to refactor02:02:21
or reorganize our code. Refactoring02:02:24
means changing the structure of the code02:02:26
without changing its functionality. It's02:02:28
like reorganizing a chaotic closet.02:02:30
We're not going to add or remove02:02:32
clothes. We're just going to move02:02:33
everything where it belongs. So we're02:02:36
going to have different sections where02:02:37
each section has one and only one02:02:40
purpose. So over the next few lessons,02:02:42
we're going to refactor our code and02:02:44
introduce a few layers into our02:02:45
application. Each layer will be focused02:02:47
and have a single responsibility. At the02:02:50
very top, we'll have controllers.02:02:52
Controllers are responsible for02:02:54
receiving HTTP requests and returning02:02:57
HTTP responses. They act like a gateway02:02:59
into our application. They're kind of02:03:01
like a receptionist in a building. Below02:03:03
controllers, we're going to have02:03:04
services. And this is where we'll have02:03:06
the actual application logic. For02:03:09
example, in our chat API, the piece of02:03:12
code for calling OpenAI to generate a02:03:14
response belongs to this layer, belongs02:03:16
to a service. Below services, we'll have02:03:19
repositories and this is where we have02:03:21
data. So, anytime we need to get or02:03:23
store a piece of data, we worked with a02:03:25
repository. Where that data exists, we02:03:27
don't care. It could be in the memory or02:03:29
in a database. If you follow this02:03:31
architecture, our codebase is going to02:03:33
be much easier to maintain. If something02:03:35
breaks or needs to change, we know02:03:37
exactly where to look. It also improves02:03:39
readability because each layer or module02:03:42
has one clear purpose and overall it02:03:45
makes our application more scalable02:03:47
because we can reuse and test each piece02:03:49
independently and plug them into new02:03:51
features later without duplicating code.02:03:54
So over the next few lessons, we're02:03:55
going to refactor our code and extract02:03:57
these layers one by one.02:04:00
[Music]02:04:06
So we talked about the layered02:04:07
architecture in the previous lesson. Now02:04:09
in this architecture the direction of02:04:11
dependency between layers is always from02:04:14
top to bottom. So controllers can talk02:04:16
to services and services can talk to02:04:18
repositories but not the other way02:04:20
around. So the most fundamental layer in02:04:22
our application is the repository layer.02:04:24
In this lesson we'll introduce a02:04:26
repository and then in the next lesson02:04:28
we'll introduce a service that will use02:04:30
our repository. So I told you that02:04:32
repositories are for data access.02:04:34
Anytime we need to get or store a piece02:04:36
of data, we should use a repository. Now02:04:39
back to our code. Look here we have this02:04:42
line to keep track of our conversations.02:04:45
And these two statements for getting and02:04:47
storing the last response in a02:04:49
conversation. All these pieces are about02:04:51
data access and should be encapsulated02:04:54
inside a repository. So back to our02:04:56
project here in the server directory we02:04:59
add a new folder called repositories02:05:04
and in this folder we add a new file02:05:07
called conversation02:05:09
repository.ts.02:05:12
Now back to index.ts.02:05:14
First we grab this piece of code for02:05:18
declaring the conversations map. We cut02:05:20
it and move it into our repository. Now02:05:23
in this implementation we are storing02:05:25
data in memory. This is what we call02:05:28
implementation detail. Now when defining02:05:31
our modules we don't want to expose02:05:33
implementation detail. So we don't want02:05:35
to export this constant from this02:05:37
module. Instead we should export what we02:05:40
call the public interface of the module.02:05:43
Let me give you a metaphor. Think of a02:05:45
remote control. A remote control has a02:05:47
bunch of buttons on the outside that we02:05:49
use. But it also has a complex02:05:51
electronic board on the inside that we02:05:52
don't care about. That's the02:05:54
implementation detail and the buttons on02:05:56
the outside are the public interface. So02:05:58
when creating this module, we want to02:06:00
keep the implementation detail private02:06:02
and only export the public interface. In02:06:05
this application, we need two functions02:06:08
for getting and setting the last02:06:10
response ID. So we export a function02:06:13
called get last response ID.02:06:17
We give it a parameter conversation ID02:06:19
of type string.02:06:22
Now we go to our index.ts02:06:24
and grab02:06:27
this piece of code,02:06:29
cut it and move it into our module. And02:06:33
of course we return the result. With02:06:36
this in place we go to index.ts ts and02:06:39
here we call get last response02:06:42
and pass the conversation ID.02:06:46
Similarly, we export another function02:06:49
called set last response ID. We give it02:06:52
two parameters conversation ID which is02:06:55
a string and response ID which is also a02:06:59
string.02:07:01
Now we go back to index.ts ts and grab02:07:05
this statement, cut it and move it into02:07:09
this function. We just have to make a02:07:11
tiny change. All right, good. Now back02:07:13
to index.ts.02:07:15
Here we call set last response ID and02:07:18
give it two arguments conversation ID02:07:21
and response.02:07:23
ID.02:07:24
Now with this change, we have kept the02:07:27
implementation detail private and only02:07:30
exported these two functions. That means02:07:33
this index.ts module doesn't know02:07:36
anything about where the data is stored.02:07:38
Right now it's in memory. If in the02:07:40
future we decide to modify our02:07:42
repository and store the data in a02:07:44
database, this module is not going to be02:07:46
affected because it's only dependent on02:07:49
these two functions for getting and02:07:51
setting the last response ID. There's02:07:54
just a tiny problem here with our02:07:56
current implementation. These two02:07:57
functions look kind of like utility02:08:00
functions. The responsibility or the02:08:02
layer they belong to is not quite clear.02:08:05
So here we're going to take a different02:08:06
approach. We're going to go to our02:08:08
repository. Instead of exporting these02:08:11
to standalone functions, we're going to02:08:13
export a constant called conversation02:08:17
repository.02:08:19
This is an object with two methods. I'm02:08:22
going to grab this function definition,02:08:25
copy it, paste it here. Now, let's also02:08:30
do the same for this other function.02:08:35
So, now we're exporting an object called02:08:37
conversation repository with these two02:08:40
methods.02:08:42
Now, we can remove these functions.02:08:45
Save. Back to index.ts.02:08:48
Now on the top we have these two errors02:08:51
because these functions no longer are02:08:53
exported. So instead we import02:08:55
conversation repository from this02:08:57
module. Now down here we prefix these02:09:01
function calls with conversation02:09:03
repository02:09:06
like this. Now it's quite clear in the02:09:09
code that we're asking the conversation02:09:11
repository to give us the last response02:09:14
ID. So that was our first step. In the02:09:16
next lesson, we're going to introduce02:09:18
the chat service.02:09:21
[Music]02:09:27
All right. Now, we're going to introduce02:09:28
a service and this is where we'll have02:09:30
the actual application logic. So, I told02:09:32
you that controllers act as gateways. A02:09:35
controller receives an HTTP request. It02:09:38
validates it. If it's valid, it calls a02:09:40
service to do the job. So a service02:09:43
shouldn't know anything about HTTP02:09:45
requests and responses. Now here in our02:09:48
chat API up to this point we are working02:09:50
with the request object and down here we02:09:54
are working with the response. So all02:09:56
the code in between belongs to a02:09:58
service. So let's go to our project and02:10:01
here in the server directory add a new02:10:03
directory called services.02:10:06
In this directory we add a new file02:10:09
called chat.service.ts.02:10:11
TS.02:10:13
Now here we export an object called chat02:10:16
service and give it a single method that02:10:19
is send message. Here we need two02:10:22
parameters prompt which is a string and02:10:25
conversation ID which is also a string.02:10:30
Now back to our index module. Let's grab02:10:35
this piece of code for calling OpenAI to02:10:38
generate a response and also this line02:10:41
for updating the last response ID in our02:10:44
conversation. So let's cut these lines02:10:46
and move them to our chat service.02:10:49
Now here we need to import the02:10:51
conversation repository. So real quick.02:10:55
Okay. Now we have an error on this line02:10:57
because we are using the await keyword.02:11:00
So let's mark this as async. We should02:11:03
also bring the client object from our02:11:06
index module. So back to the index02:11:09
module. Now let me show you another cool02:11:11
shortcut. Press command and P on Mac or02:11:14
control and P on Windows. Earlier we02:11:17
used this shortcut to jump to a file in02:11:19
our project. Now here if we type an at02:11:21
sign we can jump to a symbol in this02:11:24
file. A symbol can be a variable, a02:11:26
constant, a function and so on. So here02:11:29
I want to find the client object. There02:11:32
you go. Now we can grab these few lines,02:11:34
cut and move them into this module. Now02:11:39
let's import open AI.02:11:42
Good. Now in this implementation,02:11:45
this client object again is02:11:47
implementation detail. So we don't want02:11:49
to export it outside of this module. So02:11:51
this is the only module in our02:11:53
application where we know what LLM we're02:11:55
going to use. If tomorrow we decide to02:11:57
move away from open AAI and use a02:12:00
different LLM, this is the only module02:12:02
we should modify. So the consumer of02:12:04
this module which is going to be our02:12:06
index module shouldn't know what LLM we02:12:09
are using under the hood. That is the02:12:11
implementation detail and what we are02:12:13
exporting here is the public interface.02:12:17
Okay. So we don't have any errors in02:12:19
this module. Now let's go back to our02:12:22
index module. on the top we can remove02:12:25
this line for importing conversation02:12:27
repository as well as open AAI. So our02:12:30
index module is getting leaner with each02:12:32
refactoring we have been doing. Okay.02:12:34
Now we have an error down here. So first02:12:38
we extract the prompt and conversation02:12:40
ID from the request body. Right after we02:12:43
call chat service02:12:46
dot send message. We give it two02:12:49
arguments prompt and conversation ID. We02:12:52
await the call and get a response.02:12:56
Now here we have an error because I02:12:58
forgot to return the response object02:13:01
from our service. So after we get the02:13:04
response, we update the last response ID02:13:07
in our conversation repository. And02:13:10
finally we should return the response.02:13:12
Okay, no more errors. Everything is02:13:15
working. But there's a hidden problem02:13:17
here. Look here we are getting this02:13:19
response object but this object is02:13:21
specific to the open AI platform. So02:13:24
here we are using the output text02:13:26
property to return a message to the02:13:28
client. But what if tomorrow we use a02:13:30
different LLM like Gemini and the02:13:32
response object we get from Gemini02:13:34
doesn't have a property called output02:13:36
text. So back to our chat service.02:13:40
This chat service object that we are02:13:42
exposing is what we call a leaky02:13:46
abstraction. What does it mean? Well,02:13:49
this is an abstraction over open AAI02:13:51
because it hides the complexity. It02:13:53
hides the details. The consumers of this02:13:56
module like our index module don't know02:13:58
what LLM we are using under the hood. So02:14:01
the chat service is an abstraction over02:14:03
open AAI but it's a leaky abstraction02:14:06
because some of the details are being02:14:08
exposed to the outside to the consumers.02:14:11
In this case we are returning this02:14:14
response object which is specific to the02:14:15
OpenAI platform. That's why we say this02:14:18
service is a leaky abstraction. To solve02:14:21
this problem we have to introduce a new02:14:23
type that would be platform agnostic.02:14:25
This will represent a response from an02:14:27
LLM. So up here, let's define an02:14:33
interface. We can also use a type. It02:14:35
doesn't really make a difference. We02:14:37
call this chat response and give it two02:14:40
properties. At a minimum, we need an ID,02:14:43
which is a string, and a message, which02:14:46
is also a string.02:14:48
Next, we annotate this method with its02:14:51
return type. It should return a promise02:14:55
of chat response.02:14:58
Okay, now we have an error because down02:15:02
here we're returning this response02:15:04
object which is not an instance of the02:15:06
type that we just defined. So we have to02:15:08
return a custom object. Here we add two02:15:11
properties ID which we set to response02:15:14
ID and message which we set to02:15:17
response.output02:15:19
text. So if tomorrow we decide to use a02:15:22
different LLM and that LLM doesn't have02:15:24
an output text property, this is the02:15:26
only place in our codebase we have to02:15:28
modify. In other words, this module,02:15:30
this chat service encapsulates all the02:15:33
details for working with an LLM and02:15:35
exposes a simple interface that is our02:15:38
chat service with the send message02:15:40
method. Okay, now back to our index02:15:42
module. Here we have to change output02:15:44
text to message.02:15:47
Okay, no more errors. Now, one last02:15:49
thing before we finish this lesson. I02:15:51
just noticed that in our chat service,02:15:54
we are using the wrong model. So, let's02:15:57
remove this exclamation mark. Great.02:16:00
We're done with this lesson. In the next02:16:02
lesson, we'll introduce a controller.02:16:05
[Music]02:16:11
Earlier I told you that a controller is02:16:13
a gateway to our application. It02:16:15
receives an HTTP request and returns an02:16:18
HTTP response. As part of this, first it02:16:22
validates the request data. If it's02:16:24
invalid, it returns an error. Otherwise,02:16:27
it calls one or more services to perform02:16:30
some functionality. And finally, it02:16:32
returns a response to the client. So02:16:35
now, we're going to grab all the code02:16:36
inside this function or this route02:16:38
handler and move it to a controller. So02:16:42
back to our project here in our server02:16:44
application, let's add a new directory02:16:47
called controllers.02:16:50
Inside this directory, we add a new file02:16:52
called chat.controller.ts.02:16:56
In this module, we export an object02:16:59
called chat controller and give it a02:17:02
method called send message with two02:17:05
parameters request02:17:09
and response.02:17:12
Now while this code works it's better to02:17:14
explicitly import these types from02:17:16
express. So on the top import type02:17:20
request and response from express. Now02:17:25
back to our index module.02:17:28
Earlier we talked about the shortcut for02:17:30
extending selection. You can find it up02:17:32
here. On Mac it's control shift command02:17:35
and right. So the cursor is here. I'm02:17:39
going to hold shift, control, and02:17:40
command with my left hand and keep02:17:43
pressing the right arrow to extend the02:17:45
selection. Now we have the semicolon,02:17:47
now the entire line. Keep going. We have02:17:50
this entire try catch block. Let's keep02:17:53
going. And now we have the entire body02:17:56
of this function selected. Cut. Let's02:17:59
paste it into our chat controller02:18:04
and save the changes. Now let's see02:18:07
what's happening. So we're using the02:18:09
chat service. Let's import it on the02:18:11
top.02:18:13
We're using await. So let's make this02:18:15
method async.02:18:18
Also, we need the chat schema. So back02:18:21
to our index module. Once again, command02:18:24
P on Mac or controlMP on Windows. We02:18:27
type an at sign and find chat schema.02:18:31
Again we extend the selection, grab this02:18:33
object, cut it and move it to our02:18:37
controller module.02:18:39
Here we need to import Z from Zod. Good.02:18:44
No more errors here. Now in this02:18:47
implementation, this chat schema is02:18:51
implementation detail02:18:53
and this chat controller is the public02:18:57
interface. So the consumer of this02:19:00
module which is the index module02:19:02
shouldn't know what library we are using02:19:04
for validating data. That is02:19:06
implementation detail. In other words,02:19:08
it's none of index modules business. The02:19:11
index module just needs a method for02:19:13
sending a message to the application.02:19:15
How the request is validated doesn't02:19:17
matter. Right now we are using Zot.02:19:19
Tomorrow we might use a different02:19:20
library. If we decide to replace Zot02:19:23
with something else, this is the only02:19:24
module we want to modify. We don't want02:19:26
to modify both this module as well as02:19:28
the index module. Okay, so no more02:19:32
errors here. Now back to the index02:19:34
module. We're going to replace this02:19:37
lambda function with chat controller02:19:41
dot send message. Now jump to the top.02:19:45
Let's remove this unused import02:19:47
statements. So we can press command and02:19:49
period on Mac or control and period on02:19:51
Windows and delete all unused imports.02:19:54
So again, our index module is getting02:19:57
cleaner with each refactoring. But we're02:19:59
not done yet. There's one more02:20:00
refactoring which we'll do next.02:20:03
[Music]02:20:09
Right now, all of our route definitions02:20:11
are in index.ts. That works fine for02:20:13
small projects, but as our application02:20:15
grows, keeping everything one file can02:20:17
get messy. So in this lesson, we'll move02:20:19
our route definitions into a separate02:20:21
file. It's a small change, but it helps02:20:23
keep our code clean, modular, and easier02:20:26
to maintain as we add more endpoints.02:20:29
So, back to our project here in the02:20:31
server application, we add a new file02:20:34
called route.ts.02:20:37
In this file, first we import express02:20:40
from express.02:20:43
Now, back to index.ts.02:20:45
Let's grab all our definitions,02:20:49
cut, and paste them here.02:20:53
Now, here we're using the request and02:20:55
response types. So, let's import them02:20:58
from express import type request and02:21:02
response. Okay, good. Now, in this02:21:04
module, we are not going to work with02:21:06
the app. Instead, we're going to work02:21:07
with a router. So, here we create a02:21:11
router. We set this object to express02:21:14
router. On this router, we register our02:21:17
endpoints. Now, let me show you another02:21:19
cool shortcut. Let's say we want to02:21:21
rename all instances of app to router.02:21:24
With app selected under the selection02:21:27
menu, look at the shortcut for select02:21:30
all occurrences. On Mac, it's shift02:21:33
command and L. On Windows, it's probably02:21:35
shift control and L. So, I'm going to02:21:38
press shift command and L. Now we have02:21:41
multicursor editing. All instances of02:21:43
app are selected. So we press backspace02:21:46
and replace them all with router. Now to02:21:49
jump out of multicursor editing, we02:21:51
press the escape button twice. Okay,02:21:54
good. Now down the bottom, we should02:21:57
import chat controller.02:22:00
Okay, now technically in a real02:22:03
application, we shouldn't have our route02:22:06
handlers. We should only have a02:22:07
reference to a function inside a02:22:09
controller, but we added these earlier02:22:11
for demonstration as part of setting up02:22:14
our full stack project. These are02:22:16
oneliners. I'm not worried about them at02:22:18
this point, so we don't need to change02:22:19
them. Now, finally, at the end, we02:22:21
export the router as the default object02:22:24
from this module. I'm using default02:22:26
because this is the only object we02:22:28
should export from this module. Now,02:22:31
back to our index module on the top. We02:22:34
don't need this line anymore. Let's02:22:36
remove it and also chat controller.02:22:38
Instead, we import router from the02:22:42
current folder / routes. So, we02:22:46
configure our environment variables.02:22:48
Next, we create an application. We use02:22:51
the JSON middleware right after we add02:22:55
our router. Okay, so these three lines02:22:58
are closely related. They're all about02:23:00
setting up our app. They're a little bit02:23:02
different from initializing the port. So02:23:04
I like to add a line break between the02:23:06
two. So we create the app, initialize02:23:08
the port and finally start the app. Now02:23:11
our index module is much cleaner. We02:23:13
only have the necessary code for02:23:15
starting the application. All the02:23:17
details are somewhere else. Now let's02:23:19
review what we have done so far. So we02:23:21
created the routes module where we have02:23:24
our routes or endpoints. Now right now02:23:27
we only have a single file for this02:23:28
purpose. But as our application grows,02:23:31
we might have various route files for02:23:33
different functional areas in our02:23:34
application. For example, we can have a02:23:36
route file for registering all the02:23:38
routes related to products and02:23:40
categories. We can have another route02:23:42
file for managing orders. We can have02:23:44
another route file for admin endpoints02:23:46
and so on. Okay. So in this route file,02:23:49
we are using the chat controller as our02:23:51
route handler. Let's take a quick look02:23:53
at this method.02:23:55
This controller is the gateway to our02:23:57
application. It receives an HTTP02:24:00
request, validates it. If it's valid, it02:24:03
asks the service to do the job and02:24:05
finally it returns a response. Now, in02:24:08
our service, we have the application02:24:10
logic. So, for a chat API, we have the02:24:13
code for calling an LLM to generate a02:24:16
response and updating the last response02:24:19
ID in our conversation repository. In02:24:22
our repository, we only have data access02:24:24
code. There is no HTTP request here.02:24:27
There is no LLM call. There is no02:24:29
middleware setup. So over the past few02:24:31
refactorings, we broke down index.ts02:24:34
into a set of small and focused modules.02:24:37
Each having a single responsibility. The02:24:39
repository has data access code. The02:24:42
service has application logic. The02:24:44
controller acts as the gateway and the02:24:46
routes has all the route definitions. So02:24:49
we're done with implementing the back02:24:51
end. Over the next few lessons, we'll02:24:52
start building the front end.02:24:57
Now that the back end is ready, it's02:24:59
time to move on to the front end. Just02:25:01
like we did with the back end, we're02:25:02
going to build a fully functioning02:25:04
chatbot step by step. And once02:25:06
everything works the way it should,02:25:08
we'll take time to refactor and organize02:25:10
our code to keep it clean and modular.02:25:12
Let's jump in.02:25:15
And that's it for this tutorial. What02:25:16
you just watched is the first two hours02:25:18
of my full 7-hour course on building AI02:25:22
powered apps. If you enjoy this and want02:25:24
to keep going, the full course covers02:25:26
everything in much more depth. You'll02:25:28
find the link in the description. I02:25:29
would love to have you join me in the02:25:31
full course, and I can't wait to see02:25:32
what you will build.Description:
This AI course teaches you how to build AI-powered apps with React & Express. You’ll learn about LLMs, prompt engineering, and full-stack AI integration. 🚀 Want to dive deeper? - Get the full course: https://codewithmosh.com//p/build-ai-powered-apps - Subscribe for more videos like this: https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1 💡 Related tutorials https://www.youtube.com/watch?si=ALGbprFSjzSnVfms&v=SqcY0GlETPk https://www.youtube.com/watch?si=NamrMlwEwC99MIfQ&v=d56mG7DezGs ✋ Stay connected: - Full Courses: https://codewithmosh.com - Twitter: https://twitter.com/moshhamedani - Facebook: https://www.facebook.com/unsupportedbrowser - Instagram: https://www.facebook.com/unsupportedbrowser - LinkedIn: https://www.linkedin.com/school/codewithmosh/ 📖 Chapters 0:00:00 Welcome 0:01:26 Prerequisites 0:02:21 What You’ll Learn 0:06:15 Setting Up Your Development Environment 0:07:12 Introduction to AI Models 0:07:48 Rise of AI Engineering 0:11:49 What Are Large Language Models? 0:16:12 What Can You Do With Language Models? 0:18:37 Understanding Tokens 0:21:40 Counting Tokens 0:25:43 Choosing the Right Model 0:30:45 Understanding Model Settings 0:39:32 Calling Models 0:47:07 Setting Up a Modern Full-Stack Project 0:48:19 Setting Up Bun 0:49:51 Creating the Project Structure 0:52:39 Creating the Backend 0:59:18 Managing OpenAI API Key 1:04:33 Creating the Frontend 1:07:18 Connecting the Frontend and Backend 1:12:31 Running Both Apps Together 1:15:55 Setting Up TailwindCSS 1:19:30 Setting Up ShadCN/UI 1:26:00 Formatting Code With Prettier 1:31:02 Automating Pre-Commit Checks With Husky 1:37:53 Project: Building a ChatBot 1:38:22 Building the Backend 1:38:58 Building the Chat API 1:45:25 Testing the API 1:47:22 Managing Conversation State 1:53:44 Input Validation 1:59:33 Error Handling 2:01:52 Refactoring the Chat API 2:04:00 Extracting Conversation Repository 2:09:21 Extracting Chat Service 2:16:05 Extracting Chat Controller 2:20:03 Extracting Routes 2:24:55 Building the Frontend
Mediafile available in formats
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "AI Course for Developers – Build AI-Powered Apps with React" video?
http://univideos.ru/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "AI Course for Developers – Build AI-Powered Apps with React" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "AI Course for Developers – Build AI-Powered Apps with React" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "AI Course for Developers – Build AI-Powered Apps with React" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "AI Course for Developers – Build AI-Powered Apps with React"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "AI Course for Developers – Build AI-Powered Apps with React"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
How do I play and download streaming video?
- in video formats, hover your mouse over "Streaming Video**";
- right-click on "Copy link";
- open VLC-player;
- select Media - Open Network Stream - Network in the menu;
- paste the copied link into the input field;
- click "Play".
- copy the video address (URL);
- select "Open Network Stream" in the "Media" item of VLC player and paste the link to the video into the input field;
- click on the arrow on the "Play" button and select "Convert" in the list;
- select "Video - H.264 + MP3 (MP4)" in the "Profile" line;
- click the "Browse" button to select a folder to save the converted video and click the "Start" button;
- conversion speed depends on the resolution and duration of the video.
For this purpose you need VLC-player, which can be downloaded for free from the official website https://www.videolan.org/vlc/.
How to play streaming video through VLC player:
To download streaming video via VLC player, you need to convert it:
Warning: this download method no longer works with most YouTube videos.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.