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

[@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 😆

[@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 👍🏻

[@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

[@Jonathan_Henderson]

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

[@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

[@frankorefice4115]

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

[@sarvagya-sharma]

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

[@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}

[@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.

[@greenie62]

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

[@hello-peters]

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

[@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.

[@sharpdotexe1660]

Kyle never disappoints, great video 👏

[@sethurk]

This is actually a great css tutorials as well!

[@pallavggupta]

This channel is best simply for learning web stuff

[@MohamedAshraf-ur1jp]

great video! I would love it if you made a video implementing this with an OT or CRDT library for synchronization.

[@aditya_01]

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

[@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 '/'

[@dragonburger5676]

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

[@nicholaspreston9586]

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

[@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

[@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

[@mirkosedda3196]

Crazy tutorial! Nice job Kyle!

[@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

[@avneet12284]

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

[@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!

[@msundar661]

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

[@Ribhav.Singla]

worth watching!

[@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#

[@mukiibipeter07]

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

[@MiSt3300]

wow dude what an awesome tutorial!

[@akashmurugesh3509]

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

[@buncakciku]

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

[@TralkNEW]

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

[@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.

[@alinet2007]

amazing tutorial time to make notion.so next

[@konstantinreut2577]

That is updated code due to new version of React.

[@AJF013]

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

[@adityak1231]

@@losing_interest_in_everything 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

[@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.

[@julian_pp]

Amazing! thank you! please do more short app tutorials

[@murunwascengy2762]

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

[@iJuce]

if only you uploaded this 2 years earlies...

[@cristhianjoeljarquin8016]

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

[@ianterada6821]

Really cool! Thanks for putting this together!

[@creativetech8471]

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

[@autorevolutionHQ]

Can you make a tutorial on how to add pages that google docs or word has?

[@RahulSingh-b1t8u]

Ek number bhai

[@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 😍😜

[@strawberryjoker]

This was a fantastic tutorial! Thank you!

[@MiserableDuck95]

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

[@thesubinsebastian]

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

[@FindYourWhyInLife]

great one bud!

[@RianY2K]

nice tutorial, thank you

[@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).

[@konstantinreut2577]

[@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

[@acerik97]

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

[@tylertachiki5186]

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

[@OleksandrDanylchenko2k]

Great trick with useCallback instead of useRef

[@oussamasethoum2755]

aren't you the best ? yes you are

[@ratul1125]

Hostinger is the the Best

[@navpreetsingh3007]

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

[@rangabharath4253]

Awesome as always 👍😀

[@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)

[@piusvictor8780]

Great Job 👏👏👏

[@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

[@shubhamdodiya-s2s]

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 ????

[@hbfl3x50]

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

[@shakirahsanromeo7863]

Nice. Now please create a Google Sheets clone

[@snehalambatkar9910]

Will you make a tutorial on game development

[@aman9267]

💯👍👍 Yes! This is what I wanted!

[@n3x404]

Great idea, amazing really cool project 💪👌

[@tsydi]

Very useful, thanks

[@rlopez6636]

Custom Google excel next pls

[@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?

[@paulmichaelpangan8710]

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

[@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 😀

[@rosalyna_24]

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

[@birotest6294]

I love your videos.

[@ankitdubey9310]

you are a god!

[@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... 😂

[@hartyom]

So much covered in less than an hour.

[@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?

[@lokeshnegi5051]

I don't know why the loading is not going from my sheet I've event tried copy pasting your code but still facing same issue.

[@anils1383]

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

[@giwrgosiwannidis4684]

Sooo helpfull great work

[@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

[@priyaraj4735]

Can someone tell me how to deploy this project??

[@shivanimehta4046]

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

[@mistekfcio]

That's so cool! Really informative video :)

[@trochymiak]

To było dobre :) Very nice thx !

[@abhaytiwari6411]

One video On How to build Netflix in React js

[@29namankumar29]

Thanks

[@damiangilz]

That's a lot of useEffects! Can they be split into files? I think I have to create many custom hooks.

[@danielf535]

Why not split it into multiple smaller functions that you call inside the useEffect hook?

[@damiangilz]

@@danielf535 So a bunch of functions will do? Using hooks is innecesary then. Thanks for the tip.

[@danielf535]

@@damiangilz Do something like this: useEffect(() => { callFirstFunction() callSecondFunction() callThirdFunction() }, []) The benefit of doing it like this is that you get the benefit of using lifecycle methods, but you don't repeat useEffect 3 or 4 times. Note that the code I wrote is only good if you need to do something once when the application first mounts.

[@damiangilz]

@@danielf535 thanks for the example. A question, if function A (fA) receives args like fA(arg1), fB(arg1,arg2), and fC(arg2), and I put arg1 and arg2 in the dependency arrays, all 3 functions will get triggered each time either variable changes, right?

[@danielf535]

@@damiangilz I'm not sure how experienced you are with React, but if you want the useEffect to trigger on anything but the component mounting, then you need to add variables to the useEffect dependency array, and the useEffect will trigger if any of these change. As far as I know, you can use these variables as arguments to the functions inside the useEffect hook.

[@rishabkumar9578]

Next How to create your own Chrome

[@m-series719]

Can you plz provide the flaw chart plz ..

[@benlaw7843]

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