CF

Build a Google Docs Clone

10h 26s
English
Free
Added to CourseFlix

Build a Google Docs Clone is a 33-lesson 10 hours self-paced course by Antonio Erdeljac (Code With Antonio). In this 10-hour course, you will learn how to create a fully functional Google Docs clone from scratch.

Course facts

Lessons
33
Duration
10 hours
Language
English
Added to CourseFlix
December 2024
Instructor
Antonio Erdeljac (Code With Antonio)
Price
Free

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.

Who teaches Build a Google Docs Clone? Antonio Erdeljac (Code With Antonio)

Antonio Erdeljac (Code With Antonio) thumbnail

Antonio Erdeljac is a Croatian developer behind the Code With Antonio YouTube channel — one of the more active independent full-stack JavaScript channels online, with a focus on long-form, project-based clones of well-known applications (Netflix clone, Spotify clone, Notion clone, Discord clone, Trello clone). The channel's distinctive contribution is the depth of those clone tutorials — each typically runs 8-15 hours and covers the full back-end-to-front-end implementation of a working app.

The course catalog covers the modern Next.js / React stack: App Router patterns, server components, server actions, Prisma + PostgreSQL, NextAuth / Clerk authentication, Stripe billing, file uploads, real-time features with Pusher, and the deployment workflow with Vercel. Material is paid extended versions of the YouTube content with additional features and context.

The CourseFlix listing under this source carries over 15 Code With Antonio courses spanning that range. Material is aimed at intermediate-and-up React developers building real full-stack applications.

What lessons are included in Build a Google Docs Clone?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Introduction 02:14
2Project setup 26:31
3Project structure 18:06
4Tiptap setup 15:39
5Tiptap extensions 24:22
6Editor store (Zustand) 17:49
7Basic editor tools 13:40
8Font family & headings tool 20:47
9Color tools (text & highlight) 14:22
10Link & image tool 17:57
11Align & list tool 08:41
12Font size tool (custom extension) 19:37
13Line height tool (custom extension) 13:16
14Margin ruler slider 26:47
15Editor navigation bar 24:15
16Navigation bar tools 11:05
17Search input component 25:53
18Template gallery component 15:31
19Database setup (Convex) 17:04
20Authentication setup (Clerk) 17:59
21Create & list documents 27:33
22Document actions (update & delete) 30:23
23Search documents 08:04
24Organizations (invites & permissions) 26:04
25Real-time collaboration (Liveblocks) 23:43
26Room permissions 21:55
27Populating user information 21:29
28Notifications feature 16:45
29Collaborative margin ruler 06:21
30Loading document data 33:52
31Templates and initial content 11:56
32Deployment (Vercel) 19:31
33Editor autofocus 01:15

Enjoying this free course? One payment unlocks 2,000+ premium courses, from $6.67/mo. No auto-renew.

See plans

What courses are similar to Build a Google Docs Clone?

More courses by Antonio Erdeljac (Code With Antonio)

Frequently asked questions

What are the prerequisites for this course?
Participants should have a basic understanding of web development, including HTML, CSS, and JavaScript. Familiarity with React will be beneficial, as the course covers advanced topics like state management with Zustand and setting up a text editor with Tiptap.
What will I build by the end of this course?
By the end of the course, you will have built a fully functional Google Docs clone. This includes features such as real-time collaboration using Liveblocks, a rich text editor with Tiptap, a commenting system, and a template gallery, all deployed on Vercel.
Who is the target audience for this course?
The course is ideal for web developers who aim to enhance their skills in building complex full-stack applications. It is also suitable for those interested in mastering real-time collaboration features and advanced editor functionalities.
Which specific tools and platforms are used in the course?
The course extensively uses Tiptap for the text editor, Convex for database setup, and Clerk for authentication. Real-time collaboration is handled using Liveblocks, and the final deployment is done on Vercel.
What topics are not covered in this course?
The course does not cover foundational web development concepts such as basic HTML, CSS, or JavaScript. It also does not delve into other frameworks outside of React, nor does it cover backend technologies beyond what's necessary for the project setup like Convex.
How much time should I expect to dedicate to this course?
The course has a runtime of approximately 10 hours, spread across 33 lessons. Additional time will be needed for coding exercises and incorporating the lessons into your project, so plan to dedicate extra hours for practice.
How can the skills learned in this course benefit my career?
The skills acquired in this course, such as building real-time collaborative applications and advanced text editor functionalities, are valuable for developers working on complex web applications. These skills are transferrable to various roles in full-stack development, enhancing both technical capability and marketability.