00:00:00 To get started developing our great healthcare application, we can create a new empty folder on our desktop and call it Care Pools,

00:00:09 which is the code name of our application.

00:00:11 Then simply drag and drop it into your Visual Studio code.

00:00:16 And let's get started.

00:00:18 First, I will open up the terminal so that we can properly initialize our project.

00:00:23 And we'll initialize it using only the latest and greatest technologies.

00:00:28 We'll use React for creating web user interfaces.

00:00:32 We'll of course use Next.js to power up that React and make it super high quality and efficient.

00:00:38 We'll also use Tailwind CSS to rapidly style our applications and ChatCN to get some amazing components right out of the box that allow us to then further

00:00:50 style them.

00:00:50 We'll also use AppWrite, an open source tool that allows us to add databases, storage, and also SMS messaging to our application.

00:00:59 And don't forget that we'll make this app enterprise ready by implementing Century, an application monitoring tool considered not bad.

00:01:08 by 4 million developers.

00:01:10 And as I mentioned at the start of this course, you can get a complete Figma design that you can then follow along with.

00:01:16 This will give you access to all of the pages, including the onboarding, all the models like the OTP verification, forms and everything.

00:01:25 So you can use this to build this entire app entirely on your own if you want to, or as additional help to following along with me so you know exactly

00:01:35 what you're building and how we can transfer all of the other designs into code.

00:01:39 So you can get it now from the link down in the description.

00:01:42 But with that said, let's go ahead and initialize our Next.js application by simply copying this command.

00:01:49 Going back to the code and running MPX create next app latest and then dot slash, which will create it in its current repository.

00:01:58 So let's press enter to initialize it.

00:02:01 It's going to ask us a couple of questions.

00:02:03 We will use TypeScript, ESLint, Tailwind CSS, no source directory, yes to the app writer, no need to customize the import alias.

00:02:13 Basically just press enter for all of the options.

00:02:15 Let's wait until it gets initialized and then we can take a look at the starter code base.

00:02:20 There we go.

00:02:21 It has been initialized and what we have here is a typical Next.js application where we have a page, layout, some CSS and a favicon.

00:02:31 So let's immediately clean it up a bit by going to the page and removing this entire main tag and the return statement.

00:02:39 What we need instead is just return and we can return a div that will render an h1 that will say something like home.

00:02:48 Great.

00:02:49 We don't need anything else.

00:02:50 And we can also go into the layout and modify the metadata.

00:02:54 We'll call it CarePulse, a healthcare.

00:02:58 management system.

00:03:01 While we're here, we can also go into the globals.css and remove everything besides these three Tailwind utilities that allow us to use Tailwind classes.

00:03:13 So just to test whether Tailwind is working, back on home, we can give this H1 a class name, equal to, and let's do text-3xl to make it very large.

00:03:24 And we can also give it underline.

00:03:26 We can also remove this existing favicon as soon we'll completely customize it with our own CarePulse one.

00:03:33 Great.

00:03:34 So now that we've done a couple of changes, let's go ahead and run npm run-dev to check out our app in the browser.

00:03:42 Back on localhost, we can see a big underlined home, which means that we are good to start developing it.

00:03:49 So let's start with the layout as that wraps our entire application.

00:03:54 We won't be using the interfont, rather we'll use the plus underscore Jakarta underscore sans coming from next fonts Google.

00:04:03 So we can just exchange it here and call it font sans.

00:04:09 And we can apply additional options so we get more different weights, such as weight is an array of, let's do 300, 400, 500, 600, and 700. And that's just

00:04:24 going to be weight.

00:04:25 And all of these, I believe have to be strings.

00:04:27 So just wrap them in quotation marks.

00:04:30 Also, we can assign a variable to be dash dash font dash sans.

00:04:35 So whenever we apply this, this font will be used.

00:04:39 So let's scroll down and let's give some additional class names to this body.

00:04:45 We'll use a CN, which is short for class name.

00:04:49 And this allows you to add both static and dynamically rendered class names.

00:04:55 Let me show you how that works.

00:04:57 We have to import.

00:05:00 CN from at forward slash lib forward slash utils.

00:05:06 And typically this is installed for us as soon as we install Tailwind.

00:05:10 For some reason, it didn't get added here, but no worries.

00:05:14 We can just create a new folder called lib and within it, we can create a new utils.ts file.

00:05:22 And inside of here, we can put some utility functions we'll use later on within our code.

00:05:27 I actually prepared some of these for you within the finished GitHub repo.

00:05:31 This is not finished code, but if you scroll down, you can see snippets, code to copy number five.

00:05:37 So go to the link down below, go to snippets, and then here you can find some of the files which are needed for this project.

00:05:44 One of which is libutils.ts.

00:05:47 So simply expand it, copy it, and paste it right here.

00:05:53 For that, we'll have to install CLSX and Tailwind Merge, which are some of the Tailwind utilities.

00:05:59 So let's open up a new terminal and run npm install CLSX as well as Tailwind-Merge.

00:06:08 And very soon the squiggly lines should be gone.

00:06:11 Great.

00:06:12 Now, if we go back to the layout and if we try to import CN one more time from add forward slash lib forward slash utils,

00:06:22 you can see that it properly gets it.

00:06:24 And now we can call it as a function and I can show you how we can use it.

00:06:28 First, you pass it some classes you would always want to call, such as min h screen, in this case, to give it a min height of 100 vh,

00:06:38 meaning our homepage will take the full screen.

00:06:41 bgdark of 300, which will be the background color, font-sense, which means that this font will be applied all over the pages,

00:06:51 and anti-aliased.

00:06:53 This is something that helps make some fonts look a bit better.

00:06:56 And then you can apply an additional property, which is dynamic, fontSense.variable.

00:07:03 In this case, we're letting it know that we'll be using this variable when we want to indicate the use of fontSense.

00:07:10 You'll also notice that we have something known as bgDark300 here, which is some kind of a dark color but it really hasn't been specified anywhere,

00:07:19 neither in the globals.css nor in the tailwind.config.ts.

00:07:25 So what we can do here is you can take this app.globals.css, which will contain some base Tailwind classes that we can use.

00:07:35 So simply copy it and paste it right here in globals.css and then copy the tailwind.config.ts and override the existing Tailwind CSS config.

00:07:47 You'll notice that here we have this dark 300. There we go, which is a shade of a dark color we'll use for the background.

00:07:56 Basically, whenever you want to have some custom UI, you never want to repeat yourself with these specific strings because it's easy to make a mistake.

00:08:05 So what you do is you extend the colors of the Tailwind config, and that way you have all of the variants you want to use.

00:08:13 And back when you use them, it will automatically know what kind of color this is.

00:08:18 Back in the Tailwind CSS config, you can notice that we're also using this Tailwind CSS animate for some of the properties as a plugin.

00:08:26 So we can simply install it by running npm install Tailwind CSS animate.

00:08:32 Great.

00:08:32 Moving back to our browser, it seems like there's nothing there, but there should be this home there.

00:08:38 It's just that now the dark background is being applied.

00:08:41 So going back to our page, we can now give this a text-white property, and our home is visible again.

00:08:51 So now that we have Tailwind up and running, we also want to make sure that Shazien works too.

00:08:58 And Shazien is a component library we'll use.

00:09:01 So go to ui.shazian.com and click get started.

00:09:06 Go to installation, choose Next.js and let's just follow the second step, which is MPX Shazian UI, latest in it.

00:09:16 Open up the terminal and paste it.

00:09:19 It'll ask you a couple of questions, just press enter to all of them.

00:09:24 Then it asks us to add the font, which we have already done.

00:09:28 And it asks us to extend the theme in Tailwind Config, which we have already done as well.

00:09:34 And that's it.

00:09:35 We can add our first component, mpx-chatcn-ui-latest-add-button.

00:09:41 So we can add a button.

00:09:43 And this is a pretty cool thing about ChatCN.

00:09:46 It doesn't install the entire library.

00:09:48 Only when you specify which component you want to use, it adds it to your code base.

00:09:54 Great.

00:09:55 So now we have a button and how do we use it?

00:09:58 Well, we just import it and call it.

00:10:01 So let's do just that.

00:10:03 I will say button right here, coming from components, UI button.

00:10:08 And I will say something like click me.

00:10:10 Also, you can notice that Tailwind Overroad are utils.ts.

00:10:15 So simply press control or command Z to go back one step to get our full file.

00:10:20 or copy it again from the GitHub repo down below.

00:10:23 Once we have that, we can go ahead and check this out in the browser.

00:10:27 And you can see that everything is white once again.

00:10:30 So going back to global CSS, you can do the same thing as we've done with the utils.

00:10:35 And that's because globals.css also got overridden by ChatCN.

00:10:39 So simply copy this one more time and paste it right here.

00:10:45 And let's also check the tailwind config.

00:10:47 It looks like it overrode these colors as well.

00:10:50 So simply press Ctrl Z or Command Z to get one step back and to get all of our great extended colors.

00:10:57 And we're back on the homepage.

00:10:59 But as you can see now this click me button is dark and the background is dark as well.

00:11:04 We want to find a way to let ChatCN know that we want all of the components to be automatically in dark mode because our entire app is in dark mode.

00:11:14 So how can we make that happen?

00:11:16 Well, if you go to ChatCN and click dark mode right here and choose Next.js, it'll tell you to install Next Themes.

00:11:25 So let's do that.

00:11:26 Paste it right here, npm install Next Themes.

00:11:31 And we can create a new component called theme provider.

00:11:35 So let's do that right here.

00:11:37 It should be other components, theme-provider.tsx and paste what you copied.

00:11:45 Next, we have to wrap our app in the layout with the theme provider.

00:11:50 So let's copy this part right here, go back to the layout and wrap our children with it.

00:12:00 Of course, make sure to import it from components theme provider.

00:12:05 And in this case, we'll give it an attribute of class, the default theme of dark, and we don't need anything else.

00:12:14 This is it as we'll only stay on the dark mode.

00:12:19 Great.

00:12:20 So now we have the body wrapping this and everything looks great.

00:12:25 As soon as we do that, the button text will be clickable as well, which is exactly what we want.