
No Comments Yet
Be the first to share your thoughts and start the conversation.
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
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.