How To Build A Google Docs Clone With React, Socket.io, and MongoDB

Hostinger: www.hostinger.com/webdevsimpl...
Use coupon WEBDEVSIMPLIFIED for 10% off an yearly plan.
Google docs revolutionized word documents with its collaborative features, but actually creating your own Google docs is not that hard. In this video I will show you how to create a complete Google Docs clone from scratch using ReactJS, Socket.io, MongoDB, and QuillJS.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/g...
Learn React Today Course: courses.webdevsimplified.com/...
useEffect Video Tutorial: • Learn useEffect In 13 ...
useEffect Article: blog.webdevsimplified.com/202...
useRef Video Tutorial: • Learn useRef in 11 Min...
useRef Article: blog.webdevsimplified.com/202...
Box Model Video: • Learn CSS Box Model In...
Media Queries Video: • Learn CSS Media Query ...
MongoDB Install Video: • How To Install MongoDB...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:23 - Project Overview
03:53 - Project Setup
05:36 - Setting Up Quill
11:25 - CSS Styles
20:36 - Server Setup
25:45 - Transmitting Changes To Clients
30:49 - Handling Multiple Documents
39:50 - Persisting Documents
#ReactJS #WDS #JavaScript

[@zawadahmed9111]

Now we can sell it to Google so that they can do their interviews in it

[@berndeveloper]

but doesn't invert a binary tree 😆

[@frankorefice4115]

Funny how I needed this yesterday. Either way, I'm happy there are more videos on this.

[@Jonathan_Henderson]

You make creating these projects look so easy! One could only wish to create such an awesome and fluent tutorial

[@greenie62]

between your spotify's background refreshing, this background saving and a little useCallback thrown in there, good stuff man. Enjoying these React projects!

[@sarvagya-sharma]

I saw your project upload on github and knew it was coming!

[@mirkosedda3196]

Crazy tutorial! Nice job Kyle!

[@SivakD]

I am doing my own little socket app and I mainly came for the explanation of implementing socket which starts at 23:07, but I definitely enjoyed the other parts. Thanks for the good content.

[@sharpdotexe1660]

Kyle never disappoints, great video 👏

[@gustavoshigueo]

I know this really doesn't matter, but if you want an exact A4 paper size you should use these measuraments: width: 21cm; min-height: 29.7cm; Yes, cm is a CSS unit for centimeters

[@sidheshwartiwari9834]

I needed to know this. I am actually coding a packing slip for an e-commerce business. Since they are printable, an A4 size would be great. Thanks!

[@gustavoshigueo]

@@sidheshwartiwari9834 you're welcome! Glad to know I helped :D

[@rishabh1S]

Great info 👍🏻

[@dragonburger5676]

Just incredible work man. Perfectly described and explained. Love this channel

[@HelloPeter05]

This is the best channel about Web dev I've ever seen!

[@aditya_01]

You really did what your name is "Web dev simplified". Thanks a lot for such a great content.Keep posting .Thanks again 😁

[@nicholaspreston9586]

Thanks for the Hostinger mention. I'll check it out!

[@sethurk]

This is actually a great css tutorials as well!

[@msundar661]

Unbelievable build in 45 minutes! and very neat explanation. so cool video. Thank you so much bro ❤🍻

[@ianterada6821]

Really cool! Thanks for putting this together!

[@yooos3]

I was so skeptical how is he gonna build something like that in just 46 minutes. But woah! This is amazing and even though I have experience in working with react and socket, still I learned so much! Great video!

[@habeeb_a]

yeah me too

[@strawberryjoker]

This was a fantastic tutorial! Thank you!

[@DopeCode123]

Bro you are just awesome. No comments just awesome. My first point of reference related to MERN or web itself. For me you are the "single source of concept" from the beginning. And I wish I reach your level of expertise very fast

[@julian_pp]

Amazing! thank you! please do more short app tutorials

[@shwanky]

Great video. You should try figuring out the document sharing feature next!

[@GavHern]

I recommend you cache the document when you save it and then next time you save it, make sure changes have been made to the document before updating the database. That way you can eliminate unnecessary database writes and API calls.

[@patcodingcodester9781]

So I implemented this pretty simply with just a let oldData and compared it to the data passed in the saved change function using JSON.stringify(oldData) === JSON.stringify(data) and it works great. But one issue I'm unsure of is what would happen if another browser window accessed the document within the two second window of saving. What would occur? Would it be better to just call this any time a change is made on the doc instead of setting an interval and caching? Wouldn't it be much more consistent that way? Or does this matter? I guess if someone else is accessing the document at that exact moment it is still an open socket so it would be seen by the new user?? I'm confused by this lol

[@patcodingcodester9781]

Actually that was a potential issue. I did a quick test my self and saw it sometime did not catch all the data. It seems like a small issue but could be problematic with a lot of people. I decided to emit "save-document" right after I emit "send-changes". I kept it a separate emit for ease and to reuse save as a button incase someone doesn't trust the auto save. Either way this fixed the issue for me on a personal testing stand point. I'm sure this would still have errors somehow like with a lot of changes, but maybe ill look into a message queue or something if that's a possible issue

[@TheLumiBros]

@@patcodingcodester9781 My guess a collision of some type which is why the caching was recommended.

[@xavimb]

I would rather have a throttled function whenever a user changes their content. This way you ensure that 1- DB writes only when changes are made 2- for each text change, you only do one write to the DB

[@MiSt3300]

wow dude what an awesome tutorial!

[@pallavggupta]

This channel is best simply for learning web stuff

[@avneet12284]

Brilliant stuff ! I can imagine the amount of research to pull off something so good.

[@rangabharath4253]

Awesome as always 👍😀

[@nikitakrulikov]

Your tutorial is really awesome and very helpful. Nowadays, typescript is very popular and if you make the video with typescript , it would be great.

[@creativetech8471]

I wanted to same but as mark down editor, Great Content

[@RianY2K]

nice tutorial, thank you

[@CS_parth]

Bug : If you are getting double texteditors Fixation : When Strict Mode is on, React will run one extra development-only setup+cleanup cycle before the first real setup. This is a stress-test that ensures that your cleanup logic “mirrors” your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.{source: reactdocs}

[@mukiibipeter07]

I haven't watched this tutorial ye but brooooooo ... I'm excited.

[@n3x404]

Great idea, amazing really cool project 💪👌

[@evans8245]

Please, if you're reading this. Learn about operational transformations (OT). A set of algorithms for real-time collaboration. Y'all know sockets are expensive.

[@FindYourWhyInLife]

great one bud!

[@cristhianjoeljarquin8016]

😆 wow you are really amazing, you make the explication super easy

[@buncakciku]

gg i watch every second...didn't notice the video was 47 min.....best code tutorial ever, easy to understand....good job

[@konstantinreut2577]

Thank you for the greate tutorial Kyle! It would be wonderful if you could record a video about how to deploy full-stack app to repository. Because it's important to show projects to employer. Thanks in advance!

[@akashmurugesh3509]

And I can't wait to know how u can do this... Exceptional kyle

[@tsydi]

Very useful, thanks

[@user-rd5sd9mh8g]

Ek number bhai

[@BlueEyedSexyPants]

Now do the hard part that clients always want: Pagination.

[@AbdulKhan-ul7th]

any luck finding something with this?

[@piusvictor8780]

Great Job 👏👏👏

[@mistekfcio]

That's so cool! Really informative video :)

[@murunwascengy2762]

🎉🎉🎉 thank you Kyle, how to create multiple pages using quill just like word-document???

[@aman9267]

💯👍👍 Yes! This is what I wanted!

[@giwrgosiwannidis4684]

Sooo helpfull great work

[@alinet2007]

amazing tutorial time to make notion.so next

[@trochymiak]

To było dobre :) Very nice thx !

[@TralkNEW]

Me like a week ago: hmm i wonder how to make a google docs clone This video: :) Thank you!

[@austinmallar5430]

Awesome video! The client folder code didn't get committed to the repo properly btw.

[@giantPangolin]

Could you do a follow up video explaning how to proceed with the V6 react-router-dom?

[@codewithhazem_]

👇update of react-router-dom v6 👇 import {BrowserRouter as Router,Route,Routes,Navigate,} from "react-router-dom"; // Switch > Routes //Redirect > Navigate // component > element // no more exact path for '/'

[@muhammadrezahaghiri]

It would be great if you show us how we can add authentication from another backend to this (e.g. a django or rails application).

[@birotest6294]

I love your videos.

[@adrianohermes]

nice tutorial, how to create multiple pages? if we reach a word limit, we will jump to a new page instead of just increasing the textbox size

[@navpreetsingh3007]

Hey plz make a video on how to handle multiple collection in database plz

[@user-dy5vf3wz3p]

its dope man, does it has new page kinda thing in it, like google docs has, like if you exceding bottom of the page , then it automatically goes to next page ????

[@slyrockyballboa]

Very nice, what is main benefit from cloning google docs, spotify... I saw many videos like this, clone this, clone that...

[@nosiphondlovu6751]

Cel ung'shade, angeke ngik'phoxe 😍😜

[@pankajsharma9801]

This is perfect 💯👍👏

[@acerik97]

Maybe a newbie question but what is the proper way to store rich/formatted text like this to database (mysql)?

[@snehalambatkar9910]

Will you make a tutorial on game development

[@OleksandrDanylchenko2k]

Great trick with useCallback instead of useRef

[@29namankumar29]

Thanks

[@shreyasrivastava5418]

@web dev simplified, how do you build all of this so fast? It would've taken me months to come up with something like this

[@89stoev]

Super cool , however title is misleading. Google Docs have so much complex stuff like pages , headers , footers , page zones , columns . This is just Quill with save to DB

[@thesubinsebastian]

Brother could you please please do this in angular too, Would really love to do this project in angular🙂

[@rosalyna_24]

hey can u make a video about signing a PDF using nodesignpdf module

[@005_harshgupta7]

how can we make this multipage google docs project. For example if we hit a word limit we jump to a new page instead of just increasing size text box

[@rlopez6636]

Custom Google excel next pls

[@paulmichaelpangan8710]

Hi Sir! Is it possible to open a word file then edit like what google docs does? Thank you in advance.

[@anils1383]

HI, Thanks for this tutorial, i have question, like how to send the value from MS docx file text as default

[@bradygerber6372]

Is there a way to set this up so that only you (the person running the doc) can make edits to one specific link, and when someone else sees it, they can't edit the page? Maybe something as simple as hiding the Quill Editor depending on who's viewing it?

[@mattural20]

This really is a great tutorial, almost a year later. Do know that a good bit has changed re: the "Handling Multiple Documents" chapter of the video…"react-router-dom" has upgraded to v.6 something and changed "Switch" to "Routes" and "Redirect" is now "Navigate", and you have to change the way react allows the jsx to be used.

[@mhiro216]

Thank you for the excellent point. Regarding "you have to change the way react allows the jsx to be used.", can you tell me specifically how to modify the code?

[@mhiro216]

Resolved! please forget about my previous question. Here is my code:

[@abumohammad3136]

yes need code bro can u help

[@andrejvujic]

21:39 Correct me if I'm wrong but I think that CORS stands for cross-origin resource sharing.

[@laurenzrausche2387]

yeah i think so#

[@Victor_Marius]

Is it ok to have socket.on("send-changes", ) inside socket.on("get-document", ) ? If it works like addEventListener probably it's a bad idea because it just appends a new listener of the same type on the same object to a new anonymous function and this can create bugs due to multiple unnecessary calls (I saw this kind of mistake in the video about the piano app as well). Usually any kind of event listener should be added once per tuple of (object, type, function) unless the callback function is not anonymous and is the same (probably stored in a more global context). Any way I think in this case you can get away by sending the documentId along side with the delta as one data object and you can acces them inside socket.on("send-changes", ) and take it outside of socket.on("get-document", ). And the same applies for the socket.on("save-document", ). Or...is socket (on the server) a different object for each client? Great video and cheers! This Quill library is good to know about it. Thanks

[@seanmcelroy4074]

What if i wanted to deploy the server on something like AWS or Heroku, how would i know which port and location my client would need to connect to?

[@ashokkumawat88]

I want to like it once again 😀

[@shakirahsanromeo7863]

Nice. Now please create a Google Sheets clone

[@ankitdubey9310]

you are a god!

[@Chris-qg6kc]

Nice!

[@oa1197]

Thank you so much! Are you planning on making an Angular course anytime soon?

[@aguyoninternet9883]

Why use that shitty and unnecessarily large angular when you have it's dad React

[@oa1197]

@@aguyoninternet9883 I also prefer react but my uni wants us to use Angular this semester so I have to learn it :)

[@aguyoninternet9883]

@@oa1197 oh, I see

[@aguyoninternet9883]

@@oa1197 There are some more angular course on yt, you can learn from them, I guess Kyle is not close on doing it, how about angular course by traversy media

[@ivss8927]

@@aguyoninternet9883 Traversy Media is the must go in many Crash Courses hehe, i recommend it to. In fact i was planing to learn php with him (you know, for the legacy stuff of business xd)

[@tylertachiki5186]

Web Dev Simplified in 5 years: Google Search Engine clone with the algorithm

[@yashkhare7308]

Hey could you please tell what changes to be made so that it can be deployed on heroku as well

[@AJF013]

Perfect one 😉 Pls can u do Spotify Clone another time and Netflix clone too and mainly Amazon clone

[@adityak1231]

@@Eloii_Xia Hey do you know any vid which shows how to use react with an MVC structure?

[@ivss8927]

​@@adityak1231 My advice to you is search for explanations about the mvc and then go to a tutorial where they apply to it. Which videos? If there is a database (Mongo, postgress, mysql...) and they use it, and they do a folder called "controllers" they are using it.

[@adityak1231]

@@ivss8927 Hey thanks. That comment was 1 month back and I've learnt a lot in that duration. I had a fully working website with a mongodb database at that point with an MVC architecture and I wanted to use React in it. I don't need it now because I'm comfortable with the full MERN stack now. Thanks again though.

[@trueuchiha2042]

@@adityak1231 do you do nextJs or u comfy with just React?

[@adityak1231]

@@trueuchiha2042 Just React

[@oussamasethoum2755]

aren't you the best ? yes you are

[@marvinkatende5077]

Hello, could you be having , or even upload some tutorials on connecting a UAV via cellular systems using socket.io, JSON API etc. If not, some recommendations would be truly appreciated.

[@LukeWilliams91]

this is truly concerning... 😂

[@vrk4052]

Hello Kyle, I have a generic question. I have made a website which has a news section which needs to be updated weekly by a client. Would I create a backend with an Admin Login that leads to an Admin page which allows them to create 'news cards' that update the on the news section of the web page. Or I have to somehow attach my website to a CMS or re-create my website through a CMS , I'm really not sure what is generally done in this case? Thank you.

[@vinayyadav-sb5hm]

i know react and started learning websockets and mongodb so can i follow this tutorial or is it for someone who is in intermediate level for websockets and mongodb

[@iJuce]

if only you uploaded this 2 years earlies...

[@hbfl3x50]

setQuill(q) -> results on an error because it repeatedly calls setState inside componentDidUpdate or componentDidMount. React throws an error to avoid loops

[@mthaha2735]

Would be useful if you could create the editor by your self. Looking forward to a video where you create a text editor with all standard features like text selection(changing it's calligraphy)

[@ilin76bb]

dong that is a pain in the arse and not nesecary since so many solutions out there justt take them and adjust it according to your needs is better then doing from scratch nooob

[@mthaha2735]

@@ilin76bb Dude you sound like some phony lazy arse dev who can't think and is totally dependant on others. Man if you are a serious dev then you would want to create the editor by yourselves, not because the self made is better in fact quill would be a better choice for production, but since this is a channel where he teaches js this will make your understand more deeper concepts thoroughly. Please refrain from calling noobs and all cause only a shortsighted person would do so

[@ilin76bb]

@@mthaha2735 sorry noob.

[@shivanimehta4046]

Just a beginner question. We have to create a MongoDB document and pass the DB uri to the mongoose.connect()? Am I right?

[@lowvrgamer]

I took you project from github but I can't run it what version of node are you using? How can I install the modules corectly?

[@benlaw7843]

Pagination with Header, Footer, Cover page ... Any tips on this ?

[@hartyom]

So much covered in less than an hour.

[@Harsh-gq3ro]

how to handle the server calls, don't you think making requests every 2s is quite costly, so how will we handle it?

[@thienphongvu2452]

Do you have any hint how to deploy the server with socket.io to AWS?

[@amishadixit5157]

Hii, there is a feature in quill's toolbar to add image with the text. If we'll add image, will it be saved with the text normally, we need to modify our database for such features right?? But I'm unable to understand how will we access an image from within the text area and store it in database and then render it at the same place from where it was picked, start, middle or end of text? I read articles for storing images as url, but I'm not getting how to exactly access and do that here in the editor?? CAN YOU PLEASE HELP WITH THAT?

[@konstantinreut2577]

That is updated code due to new version of React.

[@-leovinci]

Can we make it without any font-end/JS library?