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
- Level
- All levels
- Language
- English
- Updated
- 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?
UpdatedServer side rendering with Next + React
By: UdemyBuild server-side rendered apps with Next.js and React, adding Redux, MongoDB, and Auth0, then deploy a full project live on Heroku.29h 43m
UpdatedBuilding an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
By: WebDevCodyBuild a real AI icon generator with the T3 stack: Next.js, Prisma, TailwindCSS, and the Dall-E API, plus Stripe and AWS integration.5h 53m
UpdatedNextJS E-Com Masterclass: Learn The All New Next JS
By: UdemyBuild a full-stack e-commerce site with Next.js, TypeScript, MongoDB, and Cloudinary in this 171-lesson project-based masterclass.19h 17m5/5
Updated 2y agoBuild a Microservices app with .Net and NextJS from scratch
By: UdemyMicroservices is the latest 'buzzword' and hot topic in the web development industry at the moment and nowadays having microservices as part of your skillset.31h 42m
ClassicComplete Next.js Developer in 2023: Zero to Mastery
By: Zero To MasteryLearn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R27h 12m5/5
Updated 2y agoCode With Antonio Workshops
By: Antonio Erdeljac (Code With Antonio)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
FreeUpdated 2y agoBuild an LMS Platform
By: Antonio Erdeljac (Code With Antonio)In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch.10h 41m
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
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 ago
Code 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.