Initialize the project

00:00:00 To get started building our great collaborative application, let's start from bare beginnings by creating a new empty folder on our desktop.

00:00:09 I'll call it jsm-underscore-live-underscore-docs, which is the name of our application, and then drag and drop it into your code editor.

00:00:18 Once you're here, we can initialize the project.

00:00:20 To develop our great live blocks, we'll be using React as the best library for web interfaces.

00:00:28 And of course, we'll power it up with Next.js, the go-to React framework for the web.

00:00:35 To style our applications, we'll use Tailwind CSS that's packed with utility classes like flex, paddings, and centers to provide completely customized

00:00:45 but quick styling across our application.

00:00:48 and will power up our styling with ChatCN, which comes with a lot of beautifully designed components that you can copy and paste into your apps and then

00:00:57 style however you want.

00:00:58 To enable live collaborative features like comments, notifications, text editors, and real-time APIs, we'll use LiveBlocks.

00:01:08 And what an amazing job they've done with their recent landing page.

00:01:12 You can move these 3D elements in real time with other people checking out the website too.

00:01:17 Crazy stuff, you'll love it.

00:01:19 Later on, we'll also add Clark, the go-to authentication for modern Next.js applications.

00:01:25 And to make our application enterprise ready, we'll also implement Sentry, an application monitoring software considered not too bad by 4 million developers.

00:01:35 I gotta mention that all of these tools are completely free to use.

00:01:40 Moving forward, at every single point in time when you're watching this video, I want you to know what you're doing and not just follow along blindly.

00:01:48 So that's why I prepared a complete Figma design for you.

00:01:52 Here, you'll be able to see exactly what we're building.

00:01:55 And who knows, maybe you can pause the video a bit, give yourself a challenge, and code some of these things on your own to truly learn how to think like

00:02:03 a developer and implement collaborative features.

00:02:07 You can get access to this Figma design by clicking the link down in the description.

00:02:11 So without any further ado, let's get started with initializing our app.

00:02:15 Since we'll be using ChatCN, we can go to their website, click get started and head over to installation and Next.js.

00:02:24 We'll use their installation process and then we'll keep adding more stuff as we go.

00:02:29 So let's copy this initial command.

00:02:32 Open up the terminal and paste it with a slight modification.

00:02:37 Since we have already created a folder, we don't have to specify a folder name such as my app.

00:02:42 We can just say dot slash to create it in the current repository and press enter.

00:02:48 It's going to ask us a couple of questions, whether we want to install create next app.

00:02:53 So we can say why, please do.

00:02:55 We will not be using source directory.

00:02:59 We will be using the latest app router.

00:03:02 We don't need to customize the default import alias.

00:03:05 And with those questions out of the way, all of the dependencies needed to run the base of our application are getting installed.

00:03:12 So wait until that is done and I'll be right back.

00:03:15 Once it installs, we can check out the second step.

00:03:18 So let's copy the second command to initialize ShadCN.

00:03:22 Paste it right here and press enter.

00:03:25 It'll also ask us a couple of questions, such as the style, which we prefer, the color, and then in this case, we'll say no for CSS variables.

00:03:33 I'll show you a different way of coloring the elements.

00:03:36 That's it.

00:03:36 The dependencies have been installed.

00:03:38 What do we have to do next?

00:03:40 Oh, we have to establish some of the fonts.

00:03:43 So let's copy this entire root layout from here, and let's head over to app-layout.tsx.

00:03:51 And if something's looking a bit weird, well, that's because I moved my sidebar to the right side.

00:03:56 You can do the same by right-clicking it and say move primary sidebar to right or left, no matter what you prefer.

00:04:03 Either way is okay.

00:04:05 And now we can simply override our existing layout.tsx.

00:04:10 We can modify this TypeScript property by simply saying that children is of a type React node.

00:04:16 Now let's see what the next step is.

00:04:19 We can configure the theme font family in the tailwind.config.js file.

00:04:25 So let's copy this part right here.

00:04:27 Go over to tailwind.config.ts.

00:04:32 And then right here, go under extend and you can just add font family right here.

00:04:38 And you'll have to import the font family from Tailwind CSS default theme.

00:04:43 So we can do that right here at the top.

00:04:45 Great.

00:04:46 Next, we can see the app structure.

00:04:48 So whenever you add new Shadzian components, they'll be added to the UI folder.

00:04:54 I'll show you exactly how that looks like later on.

00:04:56 For now, we can simply add our first ChatCN component to see whether it works.

00:05:01 Let's copy the installation, paste it in the terminal, MPX ChatCN UI latest add button, and then we can simply import the button and use it within our code.

00:05:12 What I love about ChatCN is that it only installs the components that you want to have, such as the button in this case.

00:05:19 Great.

00:05:20 Now, let's go over to page.tsx.

00:05:23 Let's remove everything that we have here and just run RAFCE.

00:05:29 This is a shortcut to create a React arrow function component, which we can call simply home.

00:05:36 Within this home, we can create a new button and we can automatically import it from components, UI button.

00:05:45 This is the one that was created for us by ChatCN.

00:05:49 So let's quickly go back to layout.tsx to check if everything is good.

00:05:55 I think we'll have to fix these styles at the top as we have just imported this over from ShadCN, but we don't really have those styles here,

00:06:04 so let's remove them.

00:06:05 And instead, we can simply say import .slash globals.css.

00:06:12 Great.

00:06:13 And while we're here, let's also fix up our metadata by saying export const metadata of a type metadata coming from next.

00:06:23 It's going to be an object that'll have a title of a live docs, which is the name of our collaborative application and a description,

00:06:32 something like your go to collaborative editor.

00:06:39 Let's also remove this head from here and let's make sure we return the children.

00:06:44 So here we can say children and we can remove this BG background.

00:06:48 Great.

00:06:49 Now that we have the page and the primary layout, let's run our application.

00:06:54 We can do that by opening up our terminal and splitting it.

00:06:58 We'll use one half to run our application and the other to run additional commands.

00:07:03 So I'll run npm run dev and then open it up in the browser.

00:07:07 And as you can see, localhost 3000, there is a click me button.

00:07:12 That's great.

00:07:13 Now I want to update the styles of our application a bit, as our final application will only consist of the dark mode.

00:07:20 So to quickly fix up some of the boring styles regarding the setup, the background, and so on, I have given you access to the complete GitHub repository

00:07:29 for the code of this entire application.

00:07:31 You can check it out.

00:07:32 The link is in the description.

00:07:34 But what I want you to specifically focus on is the readme.

00:07:38 And then under Read Me, you can find all of the code snippets that we'll have to use in this application.

00:07:43 There's just a few.

00:07:45 We'll start with the globals.css.

00:07:47 So simply expand it, copy it, go back to your application, and let's override our existing globals.css by pasting the new one right here.

00:07:57 Don't get scared that there's too many classes right here.

00:07:59 Most of these will be provided for you when we start using your editor.

00:08:03 But in simple terms, what we do here is we change the background, some colors, and we even go a step further and create a custom scroll bar that's of a

00:08:11 dark color to completely match your design.

00:08:13 Other than that, we create some utility classes for Tailwind CSS so that whenever we use a text 28 semi-bold, we don't have to retype all of the classes

00:08:24 right here or the entire gradient or the entire dialogue.

00:08:28 Rather, we can use these shorthands for these classes.

00:08:31 But at any point, you can come back to this file and see exactly which classes are being used.

00:08:36 With that in mind, this is it for the globals.css.

00:08:39 Just for now, we'll have to comment out these three lines.

00:08:42 And just make sure that these three imports are commented out.

00:08:45 I believe they already should be on your end.

00:08:47 We'll use them later on.

00:08:48 So now if you go back to your browser, this should look much better.

00:08:51 We're developers after all.

00:08:53 We love a good dark mode.

00:08:55 Yet another way in which we can customize the styles is by modifying the tailwind.config.ts file.

00:09:02 So copy that one too, scroll down to tailwind.config.ts, copy everything and simply override it.

00:09:11 Not too many changes right here, but you can notice that I added some custom colors that I took from the design.

00:09:17 So now whenever we have to use this specific shade of blue or red or dark, we can just say colors blue 100 instead of specifying the entire hexadecimal string.

00:09:29 And if you're wondering how I found these, and if you might want to give it a shot for yourself, Everything is right here in the Figma design.

00:09:36 So you can just come here, keep clicking the elements until you get to the part of which styles you want to copy.

00:09:42 Or if you want to just get the main background, you can just select everything, copy it, and then add it to your tailoring config.

00:09:48 It's not super difficult.

00:09:50 You just give a color a name, and then specify different shades.

00:09:53 Great.

00:09:54 Now that we've gotten that out of the way, we can start focusing on real functionality.

00:09:59 What will we do first?

00:10:01 Well, we can do the homepage where we can see all the different documents, or we can focus on the editor itself first.

00:10:08 What do you say?

00:10:10 Well, I think you came here for the editor, right?

00:10:13 So let's do that first.