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 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 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Full-Stack Project with Claude Code
Sources: Mckay Wrigley (takeoff)
In this workshop, participants step by step create an MVP clone of FigJam - a visual collaboration editor - using Claude Code, Opus 4, Cursor IDE, and...
1 hour 12 minutes 14 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced
Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
React Node AWS - Build infinitely Scaling MERN Stack App
Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
Planning with Claude Code
Sources: Mckay Wrigley (takeoff)
In the workshop, participants create a simple front-end project— a landing page generator (marketing pages)- using Claude Code and Next.js. The focus is not...
47 minutes 32 seconds
Server side rendering with Next + React
Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds