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!
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.
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
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
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
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
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}
between your spotify's background refreshing, this background saving and a little useCallback thrown in there, good stuff man. Enjoying these React projects!
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.
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.
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
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
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!
@@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.
@@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.
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.
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?
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)
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
@@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
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
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?
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.
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 ????
@@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
@@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)
setQuill(q) -> results on an error because it repeatedly calls setState inside componentDidUpdate or componentDidMount. React throws an error to avoid loops
import { BrowserRouter as Router, Switch, Route, Redirect, } from "react-router-dom"; import { v4 as uuidV4 } from "uuid"; showing error at this place can any help me out ?
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
How do I handle images in the document? I've noticed once I try to put an image in the document it stops updating in other browsers until I remove the picture and hit refresh. Any ideas?
Hi Kyle, I have doubt in google docs version history module, google docs maintain different colors for multiple users changes to highlight the text like insert, delete, retain, operation. Any way to implement that feature in react project. Pls provide any solution🙂
Now we can sell it to Google so that they can do their interviews in it
but doesn't invert a binary tree 😆
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!
yeah me too
You make creating these projects look so easy! One could only wish to create such an awesome and fluent tutorial
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.
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
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
@@patcodingcodester9781 My guess a collision of some type which is why the caching was recommended.
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
Funny how I needed this yesterday. Either way, I'm happy there are more videos on this.
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
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!
@@sidheshwartiwari9834 you're welcome! Glad to know I helped :D
Great info 👍🏻
I saw your project upload on github and knew it was coming!
This is the best channel about Web dev I've ever seen!
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}
Kyle never disappoints, great video 👏
between your spotify's background refreshing, this background saving and a little useCallback thrown in there, good stuff man. Enjoying these React projects!
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.
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.
This is actually a great css tutorials as well!
This channel is best simply for learning web stuff
Thanks for the Hostinger mention. I'll check it out!
You really did what your name is "Web dev simplified". Thanks a lot for such a great content.Keep posting .Thanks again 😁
Crazy tutorial! Nice job Kyle!
great video! I would love it if you made a video implementing this with an OT or CRDT library for synchronization.
Could you do a follow up video explaning how to proceed with the V6 react-router-dom?
👇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 '/'
Just incredible work man. Perfectly described and explained.
Love this channel
wow dude what an awesome tutorial!
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
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
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
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!
amazing tutorial time to make notion.so next
Unbelievable build in 45 minutes! and very neat explanation. so cool video. Thank you so much bro ❤🍻
gg i watch every second...didn't notice the video was 47 min.....best code tutorial ever, easy to understand....good job
I haven't watched this tutorial ye but brooooooo ...
I'm excited.
Brilliant stuff ! I can imagine the amount of research to pull off something so good.
Me like a week ago: hmm i wonder how to make a google docs clone
This video: :)
Thank you!
And I can't wait to know how u can do this... Exceptional kyle
worth watching!
21:39 Correct me if I'm wrong but I think that CORS stands for cross-origin resource sharing.
yeah i think so#
Really cool! Thanks for putting this together!
Perfect one 😉
Pls can u do Spotify Clone another time and Netflix clone too and mainly Amazon clone
@@losing_interest_in_everything Hey do you know any vid which shows how to use react with an MVC structure?
@@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.
@@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.
@@adityak1231 do you do nextJs or u comfy with just React?
@@trueuchiha2042 Just React
😆 wow you are really amazing, you make the explication super easy
I wanted to same but as mark down editor, Great Content
Amazing! thank you! please do more short app tutorials
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?
This was a fantastic tutorial! Thank you!
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.
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?
Resolved! please forget about my previous question.
Here is my code:
yes need code bro can u help
Can you make a tutorial on how to add pages that google docs or word has?
nice tutorial, thank you
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)
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
@@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
@@mthaha2735 sorry noob.
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.
great one bud!
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
That is updated code due to new version of React.
Awesome as always 👍😀
if only you uploaded this 2 years earlies...
aren't you the best ? yes you are
Cel ung'shade, angeke ngik'phoxe 😍😜
Great trick with useCallback instead of useRef
Custom Google excel next pls
Great idea, amazing really cool project 💪👌
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
Web Dev Simplified in 5 years: Google Search Engine clone with the algorithm
🎉🎉🎉 thank you Kyle, how to create multiple pages using quill just like word-document???
Ek number bhai
Brother could you please please do this in angular too, Would really love to do this project in angular🙂
Hey plz make a video on how to handle multiple collection in database plz
I don't see websocket traffic in google docs. Does it use websocket too or is there another method for realtime syncing?
Great Job 👏👏👏
Awesome video! The client folder code didn't get committed to the repo properly btw.
That's so cool! Really informative video :)
Very nice, what is main benefit from cloning google docs, spotify...
I saw many videos like this, clone this, clone that...
Very useful, thanks
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?
Hostinger is the the Best
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.
Nice. Now please create a Google Sheets clone
💯👍👍 Yes! This is what I wanted!
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.
Maybe a newbie question but what is the proper way to store rich/formatted text like this to database (mysql)?
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).
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 ????
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?
Thank you so much! Are you planning on making an Angular course anytime soon?
Why use that shitty and unnecessarily large angular when you have it's dad React
@@aguyoninternet9883 I also prefer react but my uni wants us to use Angular this semester so I have to learn it :)
@@oa1197 oh, I see
@@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
@@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)
HI, Thanks for this tutorial, i have question, like how to send the value from MS docx file text as default
I want to like it once again 😀
setQuill(q) -> results on an error because it repeatedly calls setState inside componentDidUpdate or componentDidMount. React throws an error to avoid loops
Hi Sir! Is it possible to open a word file then edit like what google docs does? Thank you in advance.
Just a beginner question. We have to create a MongoDB document and pass the DB uri to the mongoose.connect()? Am I right?
Will you make a tutorial on game development
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
import { v4 as uuidV4 } from "uuid";
showing error at this place can any help me out ?
Sooo helpfull
great work
PLEASE MAKE DEPLOYMENT !!
hey can u make a video about signing a PDF using nodesignpdf module
One video On How to build Netflix in React js
I m unable to emit send-changes i don't know what's going wrong everything works fine no error but not receiving changes into the backend
I love your videos.
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
To było dobre :) Very nice thx !
So much covered in less than an hour.
How do I handle images in the document? I've noticed once I try to put an image in the document it stops updating in other browsers until I remove the picture and hit refresh. Any ideas?
Hi Kyle,
I have doubt in google docs version history module, google docs maintain different colors for multiple users changes to highlight the text like insert, delete, retain, operation. Any way to implement that feature in react project. Pls provide any solution🙂
Thanks
how to handle the server calls, don't you think making requests every 2s is quite costly, so how will we handle it?