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
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
- Instructor
- Antonio Erdeljac (Code With Antonio)
- Price
- Free
Who teaches Build a Google Docs Clone? 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.
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 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 |
What courses are similar to Build a Google Docs Clone?
Updated 1y agoBuild and Deploy a Lovable Clone
By: Antonio Erdeljac (Code With Antonio)Unlock the potential of AI in application development with this comprehensive course, where you will build and deploy an innovative AI platform from scratch.10h 34m
Updated 1y agoZero To Shipped. The ultimate Next.js template
By: Kitze (Kristijan Ristovski)Zero To Shipped is a powerful Next.js template designed to accelerate the full cycle of web application development. It offers a ready-made infrastructure with.
UpdatedSolidity & Ethereum in React (Next JS): The Complete Guide
By: UdemyBuild two real Ethereum dApps with React and Next.js across 277 lessons: a Faucet app and a course marketplace using Solidity.38h 47m
Updated 3y agoBedrock: Jumpstart your next SaaS product
By: Max StoiberThe modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.5/5
Updated 3y agoFull Stack Development
By: NeetCodeThis course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up.4h 24m
ClassicBuild A Canva Clone
By: Antonio Erdeljac (Code With Antonio)In this 18-hour course, we will create a graphic design platform with a variety of features.17h 48m5/5
More courses by Antonio Erdeljac (Code With Antonio)
Updated 2y agoBuild a Jira clone
In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m
FreeUpdatedNext Auth V5 - Advanced Guide
Free 8-hour course: build a complete Next Auth v5 (Auth.js) toolkit with 2FA, password recovery, email verification, and Google/GitHub OAuth.8h 1m
FreeUpdated 2y agoBuild A Slack Clone
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.15h 13m
Updated 2y agoDuolingo Clone
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language11h 12m
Updated 2y agoCode With Antonio Workshops
These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.17h 3m
UpdatedBuild A Finance Platform
Build a full SaaS finance platform over 11 hours: import transactions via CSV, connect a bank with Plaid, and monetize with Lemon Squeezy.13h 43m5/5
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.