No Comments Yet
Be the first to share your thoughts and start the conversation.
Introduction
Loading...
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Â Are you sick of tutorials that promise real-time features but deliver real-world headaches?
00:00:05Â You watch a video and get hyped about building the next big thing, but when you try to make it work in your project, you just get bugs,
00:00:12Â errors, and frustration.
00:00:14Â Those days are gone.
00:00:15Â In this course, you'll build and deploy LiveDocs, an improved version of Google Docs that manages millions of collaborators in real-time.
00:00:24Â With a secure authentication flow, full markdown editor, complete document management where you can create, edit, save, and delete documents,
00:00:33Â real-time nested comments with tagging, emojis, and complete crowd functionalities for engaging discussions.
00:00:40Â floating comments, live cursors that show you exactly what your collaborators are working on, instant notifications to keep everyone in the loop,
00:00:48Â flexible sharing options such as inviting editors and viewers or revoking their access, native-like, fully responsive design that works flawlessly on any device.
00:00:58Â And all of this while learning Next.js with server-side rendering, nested layouts, server actions, and revalidation.
00:01:05Â TypeScript for type safe code.
00:01:08Â Lexical, which is a powerful editor developed by Meta.
00:01:11Â ShadCN and Tailwind CSS for a modern, completely mobile responsive UI.
00:01:16Â Clerc for hassle-free auth that transforms weeks of building out your own authentication into minutes of integration, giving you a fully customized system
00:01:26Â without the headache.
00:01:27Â And Sentry, a monitoring software for analyzing performance to ensure your app is enterprise ready.
00:01:32Â Now with even better teaching methods, where you'll get an open source code base you can look at if you get stuck.
00:01:39Â A custom Figma design so you know exactly what you're building.
00:01:43Â And a Discord server to get all of your bugs resolved.
00:01:46Â All those things are free, so grab those from the links below while I continue telling you more about the app.
00:01:52Â And this isn't just your average tutorial.
00:01:54Â You'll build a real-world, real-time web app and feel confident enough to create any kind of truly dynamic, responsive, and collaborative experience with LiveBlocks,
00:02:05Â the shortcut to adding these real-time features into your app.
00:02:08Â what would typically take months to build from scratch, you'll implement in hours.
00:02:13Â It's so robust that even Vercell, the platform powering Next.js, chose it for their live stream to improve engagement through live reactions.
00:02:21Â Oh, and all the software we'll use in this course, like LiveBlocks, ChatCN, Tailwind, Clark and more, is completely free too.
00:02:28Â No credit card required, so you can follow along with the entire course from anywhere in the world.
00:02:33Â A basic to medium understanding of React or Next.js is needed.
00:02:37Â So if you're not there yet, check out my Next.js crash course and come right back.
00:02:41Â With that said, here's a full demo to show you precisely what you'll build.
00:02:46Â Let's kick things off by creating our account.
00:02:48Â You'll see right away that this layout looks quite different from what you're used to with Clark.
00:02:54Â They rolled out some cool new features offering more ways to log in, like phase detection and even AI authentication.
00:03:02Â After successfully creating your account, you'll land on a sleek, minimalistic home screen where you can begin creating documents.
00:03:10Â So let's go ahead and create one.
00:03:12Â And we're in.
00:03:13Â There's so many editing options to choose from, from headings and bold italics to alignments.
00:03:19Â And adding more options is super easy too.
00:03:22Â You can type anything you need, style it, and then to the right, there's a section for adding comments.
00:03:27Â If you spot a typo or two or just want to provide feedback, simply select the text and add a comment right there.
00:03:35Â It works exactly like the commenting feature in Google Docs.
00:03:39Â Hover over it and you'll see a floating comment.
00:03:42Â You can edit, delete, or add additional nested comments here.
00:03:46Â You can also tag other people or add emojis.
00:03:50Â We have a notification system at the top.
00:03:53Â Whenever you tag someone, they'll get an instant notification so they can join right away.
00:03:59Â Well, let's give that a shot.
00:04:00Â I've been mentioning these real-time features quite a lot.
00:04:04Â So here we go.
00:04:05Â I'll split the screen into two and log in with a different account.
00:04:09Â Now, on my first account, I'll grant access to my other account as an editor.
00:04:13Â And if you look at the other part of the screen, you'll immediately see the notification about it.
00:04:17Â And now, the other user has arrived.
00:04:20Â I can't type on two screens simultaneously, but hey, look at that active collaborator.
00:04:26Â They're editing the same document as you with their cursor waving around to show exactly what they're up to.
00:04:33Â And if they're causing any trouble, you've got the power to revoke their access.
00:04:38Â Your call.
00:04:39Â Next, you can change the document title.
00:04:41Â And once saved and back at the home screen, changes are reflected instantly.
00:04:47Â You can create as many real-time documents as you need and share them with other users and collaborators.
00:04:53Â And of course, everything is fully responsive, including the editor screen, making it super easy to use it on your phone without any issues.
00:05:02Â So I hope you're excited to learn a ton, build this app, and use it as an example of a real-world problem you've experienced and decided to solve with
00:05:12Â your programming skills.
00:05:14Â Trust me, recruiters and hiring managers love that.
00:05:17Â I'm super excited to dive into the code with you.
00:05:20Â So enough talk, thinkers on the keyboard, and time to write some code.