Build a Google Docs Clone

10h 26s
English
Free

Course description

In this 10-hour course, you will learn how to create a fully functional Google Docs clone from scratch. You will master full-stack development, including the implementation of real-time collaboration, a commenting and discussion system, an advanced text editor based on Tiptap, custom extensions, a template gallery, and much more. The course is perfect for those who want to delve into web development and master modern technologies for creating complex applications.

Watch Online

0:00 0:00
#Lesson TitleDuration
1Introduction02:14
2Project setup26:31
3Project structure18:06
4Tiptap setup15:39
5Tiptap extensions24:22
6Editor store (Zustand)17:49
7Basic editor tools13:40
8Font family & headings tool20:47
9Color tools (text & highlight)14:22
10Link & image tool17:57
11Align & list tool08:41
12Font size tool (custom extension)19:37
13Line height tool (custom extension)13:16
14Margin ruler slider26:47
15Editor navigation bar24:15
16Navigation bar tools11:05
17Search input component25:53
18Template gallery component15:31
19Database setup (Convex)17:04
20Authentication setup (Clerk)17:59
21Create & list documents27:33
22Document actions (update & delete)30:23
23Search documents08:04
24Organizations (invites & permissions)26:04
25Real-time collaboration (Liveblocks)23:43
26Room permissions21:55
27Populating user information21:29
28Notifications feature16:45
29Collaborative margin ruler06:21
30Loading document data33:52
31Templates and initial content11:56
32Deployment (Vercel)19:31
33Editor autofocus01:15

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project ...
25 hours 1 minute 19 seconds
Build A Finance Platform

Build A Finance Platform

Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own financial SaaS platform with the ability to track income and expenses, categorization...
13 hours 43 minutes 45 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...
NestJS + Next.js: Event Driven Architecture

NestJS + Next.js: Event Driven Architecture

Sources: Michael Guay
Learn how to create an event-driven architecture with NestJS and Next.js. The course covers EventEmitter and SSE for developing real-time systems.
45 minutes 9 seconds