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.
Build a Google Docs Clone
10h 26s
English
Free
About the Author: Antonio Erdeljac (Code With Antonio)
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.
Watch Online 33 lessons
- 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 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 |
Related courses
-
Updated 4mo agoNestJS Server-Sent Events | Build a Real Time Crypto Dashboard
By: Michael GuayStudy how to create a crypto dashboard on NestJS using Server-Sent Events to stream data in real-time without reloading the page. Set up23m -
Updated 2y agoNext40. Master Next.js 14 in 40 days of epic projects
By: Reed Barger, Next40Become a Next.js pro in the best way - by building tons of amazing apps, from admin dashboards, personal websites, full-stack apps and more.4h 52m -
Updated 8mo agoPlanning with Claude Code
By: Mckay WrigleyIn this workshop, you build a small landing page generator with Next.js and Claude Code.47m
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.