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
Next.js 14 & React - The Complete Guide
Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
Complete Next.js Developer in 2023: Zero to Mastery
Sources: zerotomastery.io
Learn 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 R
27 hours 12 minutes 37 seconds
supastarter - SaaS starter kit for Next.js & Nuxt
Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...