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

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Sources: udemy
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to
28 hours 38 minutes 19 seconds
Build and Deploy a SaaS AI Agent Platform

Build and Deploy a SaaS AI Agent Platform

Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
Next.js 14 Real-Time Chat App using Socket IO

Next.js 14 Real-Time Chat App using Socket IO

Sources: udemy
This course will introduce you to creating a real-time chat application using Next.js 14 and Socket.IO. We will cover both the latest features of Next.js and...
12 hours 22 minutes 25 seconds
Build and Deploy a Lovable Clone

Build and Deploy a Lovable Clone

Sources: Code With Antonio
In this course, you will create an AI platform for generating applications from scratch. You will learn how to build fully functional full-stack applications...
10 hours 34 minutes 16 seconds