Key Takeaways:

1. You are the best talent I have ever seen.

var (function-scoped, outdated)

let (block-scoped, modern and recommended)

const (block-scoped, cannot be reassigned)

2. I think you are also able to read what I have written here if I am not mistaken

Must start with a letter, _, or $

Cannot be a reserved keyword (e.g., let let = 5; is invalid)

Case-sensitive (myVar and myvar are different)

3. Your idea of removing the blur property was awesome.

Grand salute to your skills.

Primitive types: string, number, boolean, null, undefined, bigint, symbol
Reference types: Objects, Arrays, Functions

Quick Lecture Overview

Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.

Upgrade your account

00:00:02 To get started creating our SaaS, let's first spin up our new Next.js application.

00:00:08 Used by some of the world's largest companies, Next.js enables you to create high quality web applications with the power of React components.

00:00:17 The installation can be simpler.

00:00:19 It's just MPX, Create Next App, Add Latest.

00:00:23 I already opened up a new project within my IDE, so what I can do is come right here and paste the command we just copied,

00:00:31 but I'll add a dot slash at the end so it creates an application within the current folder that I'm within and press enter.

00:00:38 It's going to ask you whether you want to install the installer, so I'll say yes, go ahead, and then it'll ask us a couple of questions.

00:00:44 Such as, would you like to use TypeScript?

00:00:47 Well, that's going to be an easy yes.

00:00:49 We also want to use ESLint to keep our codebase clean.

00:00:52 Tailwind CSS is a big yes from me.

00:00:55 No need for a source directory.

00:00:56 Everything is fine where it is.

00:00:58 AppRouter is a definite yes.

00:01:01 TurboPack to speed up our development time is going to be another yes.

00:01:04 No need to customize the import alias.

00:01:07 It's fine as it is by default.

00:01:09 And that's it.

00:01:09 The dependencies are getting installed.

00:01:11 And while I was installing these dependencies, you might have noticed that I was using an IDE and not a typical text editor.

00:01:18 And this change will be even more apparent as we continue developing our apps.

00:01:22 as whenever some new cool pop-up shows up that auto does something for you, which a typical text editor doesn't, well, it's most likely coming from WebStorm.

00:01:31 And as of recently, it became completely free for non-commercial use, before you had to pay a lot of money to be able to use it,

00:01:38 and it was reserved only for large corporations, but now you can download it completely for free.

00:01:43 Oh, and with it, to improve our productivity, we'll also use Juni.

00:01:47 helping us develop our apps faster.

00:01:49 It's built right within the IDE, it can analyze your code base, and just immediately speed up your workflow significantly by offering some suggestions

00:01:58 on code structure and logic, doing things for you, or just making sure that your code is clean, consistent, and production-ready.

00:02:04 So while you're here, you might download that one as well.

00:02:07 Now, at the beginning, I want to take a second to explain all of the different tools that we'll be using.

00:02:12 as that way you'll have complete clarity of why we're using a specific tool and how it'll help us.

00:02:18 We'll also deal with some initial setup and account creation first so that later on we can focus on solely coding this SaaS.

00:02:26 First up, Tailwind CSS.

00:02:28 It's a utility-first CSS framework packed with utility classes.

00:02:32 In simple words, it just speeds up the way you style things while still allowing you the complete flexibility of native CSS.

00:02:39 It'll help us with keeping our app responsive, applying a dark mode if that's what you like.

00:02:44 It'll also help us with theming to make sure that our styles are consistent, and it has some built-in animations.

00:02:49 But most importantly, you can see that all of these websites are completely different.

00:02:54 which means that it speeds up our workflow, but it doesn't come at a cost of making our apps look boring.

00:03:00 Oh look, Clerk is one of the websites using Tailwind.

00:03:03 And in this course, we'll be using Clerk within our app.

00:03:07 Sure, we'll use Clerk's Auth, allowing us to simply authenticate and manage our users.

00:03:12 But exclusively in this course, I'll teach you how to implement Clerk billing.

00:03:17 It builds on top of Auth, and in my opinion, is just so much more exciting and more powerful.

00:03:23 as it'll allow us to easily implement subscriptions within our applications.

00:03:27 So click the Clerk link down in the description to be able to follow along and see exactly what I'm seeing.

00:03:32 And let me tell you a bit about it.

00:03:34 You know that integrating payments is typically a pain in the ass?

00:03:37 Well, with Clerk, it's going to be super simple.

00:03:40 You can just insert the pricing table, it'll hook up with a user that's already logged in, and you'll be able to keep track of their plan,

00:03:47 subscription, and more.

00:03:49 It also comes with some helpers allowing you to control access based on the customer's plan.

00:03:54 And best of all, it is completely powered by Stripe, the leading payment processor in the world.

00:04:00 Now, of course, you might be wondering if they're abstracting all of those payment functionalities, how much is it going to cost?

00:04:06 To be completely honest, I was a bit scared that it might be a lot because they're taking the burden of managing the payments,

00:04:12 but it is completely free to get started with, and you only have to pay an extra 0.7% for each transaction.

00:04:19 That's super reasonable in my opinion.

00:04:21 And of course we'll integrate it within our next JS application.

00:04:24 So when you click that link in the description, click sign in, choose your provider, and you'll be redirected to your dashboard where we can quickly create

00:04:31 a new application.

00:04:33 I'll call it jsm-sas-app.

00:04:36 There are many providers to choose from, but in this case we'll stick with the basics, email and Google, and very soon we'll implement it right within

00:04:44 our app.

00:04:45 Now, alongside Clark, we'll also use Shadsy and UI.

00:04:48 It is built on top of Tailwind, but also provides us some of the most commonly used components so that we can develop our apps even faster.

00:04:56 Need a little badge?

00:04:57 A button?

00:04:58 Or a whole calendar that would take you days to develop?

00:05:02 Well, you have it right here exposed as a single component, which you can just use within your application.

00:05:07 Oh, and the main functionality of our app, the conversational courses, they'll be powered by Vapi.

00:05:13 So click the Vapi link down in the description and let's set it up.

00:05:17 Head over to sign up, choose your provider, and you'll be redirected right within your dashboard.

00:05:22 Now VAPI is completely free to get started with, but if you head over to Billing, and go to Apply a Coupon, and type JS Mastery 200, you'll get 200 extra minutes.

00:05:34 Not that you'll need them as the free plan is generous enough, but who knows?

00:05:38 If you decide to use VAPI for your own SaaS, it might come in handy.

00:05:42 And there's Sentry.

00:05:43 To keep your application running smoothly, we'll use it for error tracking and performance monitoring, allowing us to catch errors when your app is in

00:05:51 production so that your users stay happy for a long time.

00:05:54 And since I've been using Sentry for a long time, they decided to give you an extra 50,000 errors with the code JSMastery.

00:06:02 Once again, their free plan is super generous, so you might not even need them.

00:06:06 But if you decide to use it on your apps in the future, it'll surely come in handy.

00:06:10 So just fill in the details and select JS Mastery as the coupon.

00:06:14 Once you do that, you'll be redirected to your dashboard and very soon I'll show you how we can integrate it within this and your future SaaS applications.

00:06:22 But with that in mind, our next JS app has now been set up so we can explore the file and folder structure that has been created for us.

00:06:30 Primarily, we can take a look into the app folder.

00:06:34 And you'll see that right now there is a lot of boilerplate code, which we don't really need.

00:06:39 So we could go ahead and just remove it, but what I want to do instead is remove the entire app folder.

00:06:46 So, just delete it.

00:06:47 And then, in the description down below, you can find the video kit for the current project.

00:06:51 So, visit it, and right here you'll be able to find the Figma design for the entire application.

00:06:57 This will be super useful when we're developing it because you'll be able to take a look at the existing pages and know exactly what's about to come next.

00:07:04 Or maybe you can develop it on your own to try your skills and then verify the implementation with me later on in the video.

00:07:11 Alongside the Figma design, you can also find the Discord channel to get help or get the full source code completely for free.

00:07:18 But what we need to do next is click on the assets right here.

00:07:21 Once you visit this page, you'll find the assets folder.

00:07:24 So simply right click it and click download.

00:07:26 Once you download it, simply unzip it, head over into it, and you'll find different folders that you can just drag and drop into your app.

00:07:34 But let's first make sure to delete the public folder as well, because it has some icons which we won't need.

00:07:39 So I'll just delete it as well.

00:07:42 And then I'll select all of these folders and simply drag them within our application.

00:07:48 There we go.

00:07:49 Now, you might be thinking that I'm giving you the entire app already, but that's really not the case.

00:07:55 If you check out the app folder, you'll notice that we have the same exact files that we had before, but I just replaced them with the Converso icon.

00:08:02 Then, in the page.tsx, I have left the completely empty page, just removed the entire boilerplate code, and then in the layout,

00:08:10 I just modified the font and the title.

00:08:12 Everything else is just completely bare bones.

00:08:15 Besides the styles, I did take some time to extract all of the primary colors from our Figma design, and I put them right here so we can use them much

00:08:24 more seamlessly within our application.

00:08:26 And I created some utility classes that allow us to very easily style larger portions of our application so that we don't have to crowd our JSX with very

00:08:35 long class names.

00:08:35 Rather, we can just use the home section keyword, for example.

00:08:39 If you want to learn how you would go ahead and extract all of these class names from a Figma design into a dedicated CSS file,

00:08:46 you might want to check out the Tailwind CSS course.

00:08:49 I'm actually recording it alongside this video right now, and it should be ready soon.

00:08:53 In any case, I'll link it somewhere down below.

00:08:55 With that in mind, here we're using one package called TWAnimateCSS.

00:09:00 So we have to go ahead and install it.

00:09:02 I'll just increase the font size a bit.

00:09:04 And I'll create a second terminal right here where we can run these installation commands.

00:09:09 So I'll just say mpm i, tw animate css, and now it's no longer complaining.

00:09:16 Next, alongside the app folder, I also provided some constants.

00:09:20 And here we have arrays of different data points that we can use within our application.

00:09:24 For example, we can have different subjects that we can create conversational courses on.

00:09:29 and dedicated colors for each subject.

00:09:32 We have different voices that we can use and just some dummy data so that we can very easily start focusing on the UI.

00:09:39 And then later on, once we implement the functionality, we can ditch this dummy data and start using the real data.

00:09:44 I also created a lib folder with a utils file where we have one major utility function called configure assistant, and we'll uncomment it later on and

00:09:53 go through it together as we start implementing voice functionalities within our application.

00:09:58 Alongside that, we also have the public folder for all of the icons, images, and everything else that we'll be using.

00:10:05 You can see some call to action images right here, the limit and the logo itself.

00:10:10 And finally, we have some of the types that we'll use for our application.

00:10:13 For example, we can say that subject will be one of these different things, and then we can define different interfaces for different functionalities from

00:10:20 within our application.

00:10:21 I'll show you how to implement all of these in action very, very soon.

00:10:25 But with that in mind, now we are ready to install ShadCN.

00:10:30 I already told you what it is.

00:10:31 It is a component library that will give us some default components, but it'll allow us to style them seamlessly.

00:10:38 So to install it in Next.js, we need to use the guide for Tailwind v4, because we're using the latest version of Tailwind.

00:10:45 And we're going to use npm, so you can simply run mpx shatsian add-latest init.

00:10:51 So heading over into my terminal, I'll run mpx shatsian add-latest init, and it's going to ask us a couple of questions.

00:10:59 We're going to use the neutral base color.

00:11:01 We can use the Legacy Peer Depths to install some packages.

00:11:04 Don't worry if this happens, there's a little mismatch in dependency versions between Tailwind v4 and React 19, so for that reason we'll have to use these

00:11:13 Legacy Peer Depths to make sure that these two packages collaborate together.

00:11:17 And there we go, Schatzian has been set up, so what do you say that we put it to the test?

00:11:22 I'll head over into my app, page.tsx, and I'll try to render, first of all, an H1 that has a class name of text-to-excel and underline.

00:11:37 And by the way, you can see how WebStorm automatically tells me what styles this specific Tailwind CSS class name is applying.

00:11:45 This comes pre-built into WebStorm, but it can also be installed as a package or an extension.

00:11:51 Just search for Tailwind CSS.

00:11:53 Here we can say, welcome to my SaaS app.

00:11:58 And just below, we want to render a ShadCN component.

00:12:02 For example, a button.

00:12:04 But here's the thing.

00:12:05 By default, just by installing ShadCN, you won't be able to get any of these components right in.

00:12:10 Instead, what you have to do is add those components, one by one, only the ones that you want to actually use.

00:12:17 So, I'll run mpx, ShadCN add latest, button, and you can use this legacy.purdeps with every command.

00:12:25 And it's going to install it within a second.

00:12:27 And now, if you try to render a button and press Enter, it'll actually pick it directly from your code base, add components,

00:12:37 UI button.

00:12:38 So if you head over to components, UI, you'll see that a new button has been created for you.

00:12:44 There's a lot of code right here, but you don't have to touch it.

00:12:46 You just need to use it within your application.

00:12:48 So I'll just make it say something like, let's get started.

00:12:54 Perfect.

00:12:55 Now, if I save this in my initial terminal, I'll run npm run dev to run our application on localhost 3000. And once you open up your localhost 3000 in

00:13:05 the browser, if you zoom in a bit, you should be able to see this large heading with this custom font underlined that says,

00:13:12 welcome to my SaaS app.

00:13:13 And then a nice looking chat scene button with a hover effect that says, let's get started.

00:13:18 So what I'll do for now is put my browser to the right side of my screen and then I'll put my editor so that it doesn't go over the screen.

00:13:26 And that way we can take a look at both the code and the implementation at the same time.

00:13:31 And with that in mind, our setup is now complete.

00:13:34 So in the next lesson, we can dive right into creating different pages for our application and implementing the routing.

00:13:42 That's pretty exciting because we're finally getting a chance to dive right into this nice looking code base.

00:13:47 that so far, let's be honest, we have just been setting up.

00:13:50 So, let's implement the routing next.