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 Title | Duration |
|---|---|---|
| 1 | Introduction | 02:14 |
| 2 | Project setup | 26:31 |
| 3 | Project structure | 18:06 |
| 4 | Tiptap setup | 15:39 |
| 5 | Tiptap extensions | 24:22 |
| 6 | Editor store (Zustand) | 17:49 |
| 7 | Basic editor tools | 13:40 |
| 8 | Font family & headings tool | 20:47 |
| 9 | Color tools (text & highlight) | 14:22 |
| 10 | Link & image tool | 17:57 |
| 11 | Align & list tool | 08:41 |
| 12 | Font size tool (custom extension) | 19:37 |
| 13 | Line height tool (custom extension) | 13:16 |
| 14 | Margin ruler slider | 26:47 |
| 15 | Editor navigation bar | 24:15 |
| 16 | Navigation bar tools | 11:05 |
| 17 | Search input component | 25:53 |
| 18 | Template gallery component | 15:31 |
| 19 | Database setup (Convex) | 17:04 |
| 20 | Authentication setup (Clerk) | 17:59 |
| 21 | Create & list documents | 27:33 |
| 22 | Document actions (update & delete) | 30:23 |
| 23 | Search documents | 08:04 |
| 24 | Organizations (invites & permissions) | 26:04 |
| 25 | Real-time collaboration (Liveblocks) | 23:43 |
| 26 | Room permissions | 21:55 |
| 27 | Populating user information | 21:29 |
| 28 | Notifications feature | 16:45 |
| 29 | Collaborative margin ruler | 06:21 |
| 30 | Loading document data | 33:52 |
| 31 | Templates and initial content | 11:56 |
| 32 | Deployment (Vercel) | 19:31 |
| 33 | Editor autofocus | 01:15 |
Want to join the conversation?
Sign in to comment