Build a Google Docs Clone

Build a Google Docs Clone

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 33 Lessons (10h 0m) | 2.01 GB

In this 10-hour tutorial you will learn how to create an end-to-end fullstack Google docs clone, including real-time collaboration, comments, threads, an advanced tiptap editor, custom extensions, template gallery and much more

Table of Contents

1 Introduction
2 Project setup
3 Project structure
4 Tiptap setup
5 Tiptap extensions
6 Editor store (Zustand)
7 Basic editor tools
8 Font family & headings tool
9 Color tools (text & highlight)
10 Link & image tool
11 Align & list tool
12 Font size tool (custom extension)
13 Line height tool (custom extension)
14 Margin ruler slider
15 Editor navigation bar
16 Navigation bar tools
17 Search input component
18 Template gallery component
19 Database setup (Convex)
20 Authentication setup (Clerk)
21 Create & list documents
22 Document actions (update & delete)
23 Search documents
24 Organizations (invites & permissions)
25 Real-time collaboration (Liveblocks)
26 Room permissions
27 Populating user information
28 Notifications feature
29 Collaborative margin ruler
30 Loading document data
31 Templates and initial content
32 Deployment (Vercel)
33 Editor autofocus

Homepage