It's difficult to get the clear understanding of the backend component without having a knowledge in React. Need to learn React as well. But i must say, this is an Amazing content. Keep sharing such contents.
after completing the project , i will share my repository in the comment , // And thanks a lot sir for this great project - a great real time collaboration in hindi 💙💙 and love you a lot❣❣❣❣
Nice tutorial. Just for all of you guys having CORS error, server.js file need to explicitly have declaration of cors allow policy according to new docs of SocketV3. Cheers
Maine CORS ka issue resolve katne ke liye packaje.json me proxy set kar di lekin abhi bhi CORS ka issue aa rha tha fir maine server.js me middleware ka use karke bhi kiya but problem still remains same. Can someone help ?
here after the update of react 18 there is a strict mode and we need to get rid of that else it generates 2 or may be more sockets which therefore return the same user. Go the main React file and remove the strict mode. Commenting so that I can save somebody's few hours. { day in my case :) }
Bro please meri help krdo mere socket connection twice ho rha hai and when any user enter in the room it shows twice and editor page pe changes nhi ho rhe ... please help krdo meri 3 hrs ki video complete ho gyi hai ab 37 min ki rehti hai meri sari mehnat bekar ho jayegi
Bhai bahot badhiya ...Keep it up ...Never stop 😀 Me ye soch raha tha ki aap jese professionals koi bhi nayi technology jeseki React kese sikhte ho? I mean direct documentation se padhte ho ya aap bhi humari tarah koi tutorials dekhte ho? Please bataiyega 🙏
Hi, I at 1:36 when you are using useEffect hook to render the codemirror in text area I am getting error. In my app codemirror text area is rendered two time. On console i see - Warning: Encountered two children with the same key, `3`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.
Sir, without javascript kai se banaunga, please continue the javascript series 🙏❤️, apne javascript ka video dalna chordiya aur mera javascript sikhna bhi stop hogeya.
@@Rajan-xv9cz Nahi bahut smoothly run ho gaya aur Sir ne to ek ek step bahut ache se samjhaya hai Han ek baar problem aayi thi to is video ki description me code bhi hai waha se dekha to solve ho gaya doubt.
When Sir adds codemirror, His screen is not having a scroll bar but mine has, I have seen all the ways to hide the scroll bar but no way seems to work....It is showing editor area 2 times.
@@paryanknamdeo3599 It happens because useEffect is called 2 times, since React.StrictMode intentionally calls it two times to check for unusual effects. Try removing React.StrictMode and it would solve the issue.
There is a small glitch, whenever someone writes, the cursor points to the start always for other members, because of this we have to scroll every time there is a change in the code. Can we do something where we will be pointed to the place where the person is writing directly??? Btw its a great project🔥🔥
i am facing this error:- export 'default' (imported as 'Codemirror') was not found in 'codemirror' (possible exports: EditorView, basicSetup, minimalSetup)
Hi everyone, I made this project 1 month back following sir's video and that time it was running perfectly. But, today I wanted to test it again, but whenever I am creating a new room, after 5-10 seconds, an error pops up and says "Socket connection failed, try again later". If anyone of you know the solution to this, kindly reply to this!!! The error message is: src\components\Editor.js Line 38:8: React Hook useEffect has missing dependencies: 'onCodeChange', 'roomId', and 'socketRef'. Either include them or remove the dependency array. If 'onCodeChange' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps Line 50:23: The ref value 'socketRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'socketRef.current' to a variable inside the effect, and use that variable in the cleanup function react-hooks/exhaustive-deps Line 52:8: React Hook useEffect has a missing dependency: 'socketRef'. Either include it or remove the dependency array. Mutable values like 'socketRef.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps src\pages\EditorPage.js Line 74:8: React Hook useEffect has missing dependencies: 'location.state?.username', 'reactNavigator', and 'roomId'. Either include them or remove the dependency array react-hooks/exhaustive-deps src\pages\Home.js Line 68:25: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
@@riyazahmadkhan9490 the issue is, I deployed the app to netlify and after the entire deployment was over, it was running fine After some days when I checked, it gave me the error
awsome video sir 😍 sir mera ek problem hai backend related jaise ki ham apne admin dashboard me Today earing kaise nikale database se or earning fetch karne ke baad ham earning ki patten kaise design kare for example 10000 hai to ham 10,000 is tarah or 10k is tarah se ham payment kaise design kare automatic sir please video banaye 🙏🙏🙏🙏🙏🙏🙏🙏
I have used your video to create my FYP project. I used uiw/react-codemirror and implemented JS, HTML and CSS languages. Thankyou so much for the sockets coding. However i need your help because i want to assign Host and Participant Relationship to the users joining. Please help me. I will email you my code when you contact. :(
Great knowledge was shared, but please make the videos more crisp and concept oriented. You made a finished project, and this becomes difficult to understand and edit..
Want to master Full Stack development? Enroll now: codersgyan.com/c/fullstack-js-engineer.
It's difficult to get the clear understanding of the backend component without having a knowledge in React.
Need to learn React as well.
But i must say, this is an Amazing content. Keep sharing such contents.
Keep sharing channel 😉
Sir mzaa aa gaya 🎉🎉🎉
Please aise unique project videos Hindi mai laate rhena
you are real hero in world of real life project. Best content i, haven't ever seen before.
Thanks, glad it is helpful!
Omg you are amazing you always come up with new project with different idea . Unique 🥰🥰🥰🥰🥰🥰🥰
mai aapka hi wait kar raha tha thank you for giving this awesome project
sir kya appka coders house wala project ka saath is new project ko milake banaunga toh bahut unique hoga
This is fire man
This is fire 🔥
after completing the project , i will share my repository in the comment , // And thanks a lot sir for this great project - a great real time collaboration in hindi 💙💙 and love you a lot❣❣❣❣
How is the tutorial , could you deploy the website? Please do share
Nice tutorial. Just for all of you guys having CORS error, server.js file need to explicitly have declaration of cors allow policy according to new docs of SocketV3.
Cheers
how to do that brother ?
please give me some more idea on it please, thank you so much
yes bro please guide more how to do this?
hey i am getting webpack error can you help me?
@pranjalgoyal2397
Maine CORS ka issue resolve katne ke liye packaje.json me proxy set kar di lekin abhi bhi CORS ka issue aa rha tha fir maine server.js me middleware ka use karke bhi kiya but problem still remains same. Can someone help ?
Finally wait is over
You are really amazing brother.. we need more real world project like this.. thanks 😍
Please try to give video regularly. Love from Bangladesh. 🇧🇩🇧🇩
here after the update of react 18 there is a strict mode and we need to get rid of that else it generates 2 or may be more sockets which therefore return the same user. Go the main React file and remove the strict mode. Commenting so that I can save somebody's few hours. { day in my case :) }
hey bro can you show me your live code
Thanks a lot
@@sdexstarlord it reduces size of the editor ...how to fix that?
Thanks bro , tried for 6 hours to resolve this
Hlo, if anyone have tried to add a theme option , then pls reply , I am getting a unusual error
Brother your all videos are amazing
Thank you so much 😀
This is my project ❤️ I have to take patent of it as soon as possible. 😅
Happy holi sir 🙏 nice to meet you again 🙏
Today I have off and I will complete this project by today, thanks bro you made my day 😎🔥👍
have you completed ?
bro now what are you doing??
Amazing project !!! I always get to learn from you..
Thank u for such amazing projects. u are really doing great job. u always comes with different project ideas thats really amazingg. keep it up !!
Html css or JavaScript k saath bhi tagda project banayiye sir taaki jinhe sirf yeh aati h woh bhi tagda project bana paye
Thank you so much sir 😊🙏🏻 and happy holi 😊🎉
Thank you 😊
You're just awesome bro please please make that kind of unique project regularly love from Bangladesh 🇧🇩🇧🇩🇧🇩🇧🇩🇧🇩
You know Hindi?
Please ADD functionality to RUN the CODE
Sir please add compiler
Did you add yourself?
Try to do it yourself using piston api.
One of the Best teacher ever
Finally...Done and dusted...Thank you!
Bro please meri help krdo mere socket connection twice ho rha hai and when any user enter in the room it shows twice and editor page pe changes nhi ho rhe ... please help krdo meri 3 hrs ki video complete ho gyi hai ab 37 min ki rehti hai meri sari mehnat bekar ho jayegi
Thank you for such an amazing project.
I will further add compiler and web chat and user authentication in coming weeks..Thank you sir
did you add those features ?
Have you added
@@Live-hh6li Have you added?
@@netherdrake436 Yes
@@Live-hh6li can you send me your git repo? My project requires this module
Thanks for great video
You need to make a fullstack course your teaching great and lots young people needed make it if possible
Hii I am facing issue when I am trying to apply theme in my project Its not working
Bhai bahot badhiya ...Keep it up ...Never stop 😀
Me ye soch raha tha ki aap jese professionals koi bhi nayi technology jeseki React kese sikhte ho? I mean direct documentation se padhte ho ya aap bhi humari tarah koi tutorials dekhte ho?
Please bataiyega 🙏
Brother, documentation is best place to getting started. If something in docs is unable to understand then might watch UA-cam tutorials 😅
Awesome project sir.👌👌
Really appreciate your efforts sir 🙏
Thank you thank you sooo much ❤
How can I implement verison control in it? like saving the code, publish the code, so that user can keep track? Please help by answering...!
Hi, I at 1:36 when you are using useEffect hook to render the codemirror in text area I am getting error. In my app codemirror text area is rendered two time. On console i see -
Warning: Encountered two children with the same key, `3`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.
in my case also codemirror text area is rendered two time how to fix it?
can you help me?
@@AvinashKumar-qs6sf comment out/Remove "React.StrictMode" in index.js file in src folder
@@AbTech114 You are Hero brother
@@AbTech114 Thanks a lot , it worked. 😃
Hlo, if anyone have tried to add a theme option , then pls reply , I am getting a unusual error
Sir, without javascript kai se banaunga, please continue the javascript series 🙏❤️,
apne javascript ka video dalna chordiya aur mera javascript sikhna bhi stop hogeya.
Sir itne ache se samjhane ke liye Thank You.
hi bro ye project purana hai to bnane mai dikkat nhi ayi
@@Rajan-xv9cz Nahi bahut smoothly run ho gaya aur Sir ne to ek ek step bahut ache se samjhaya hai
Han ek baar problem aayi thi to is video ki description me code bhi hai waha se dekha to solve ho gaya doubt.
@@19gautamkumar16 ok thank u
@@19gautamkumar16 react router dom
mai to problem ho rehi hai purane vale tarike se
When hosted , What if two users type simultaneously , who's text will get displayed ?
It will be great if you implement code compilation also. Otherwise everything is great.
is there any other video where implement of code compilation also
Project is nice..sir kuch aisa project banao jisme AWS ke feature use ho like S3 bucket cognito and lammda ..
Outstanding tutorial! Thanks a ton!
Sir, Can you please let me know how to use rafce in home and editor page. I'm unable to find anything related to that.
you have to install this extension ES7+ React/Redux/React-Native/JS snippets
When Sir adds codemirror, His screen is not having a scroll bar but mine has, I have seen all the ways to hide the scroll bar but no way seems to work....It is showing editor area 2 times.
I have checked the code. It is all same but still getting the scrollbar
@@paryanknamdeo3599 It happens because useEffect is called 2 times, since React.StrictMode intentionally calls it two times to check for unusual effects. Try removing React.StrictMode and it would solve the issue.
@@pranshukashyap6848 thanks it worked....
Replace React.StrictMode in index.js file with
@@sahilkachhap4949 When I am removing React.StrictMode in index.js file with . It' decreasing the editor area to half. How can i fix it?
There is a small glitch, whenever someone writes, the cursor points to the start always for other members, because of this we have to scroll every time there is a change in the code.
Can we do something where we will be pointed to the place where the person is writing directly???
Btw its a great project🔥🔥
Did you fix it?
Awesome Thankyou sir
Why you didn't make a separate folder for the backend(server.js)?
We could make it but we have very little functionality on server so decided to keep it as simple as possible
Awesome content. It is very helpful.
i wanted to implement the compilation functionality in this project . any source how to do it ?
i am facing this error:-
export 'default' (imported as 'Codemirror') was not found in 'codemirror' (possible exports: EditorView, basicSetup, minimalSetup)
facing same issue
@@ajaytanwar508 downgrade the codemirror version by using this command in terminal yarn upgrade codemirror@5.65.11 it will resolve your issue
downgrade the codemirror version by using this command in terminal yarn upgrade codemirror@5.65.11 it will resolve your issue
Awesome project 👍
great sir , love you 💙💙💙💙💙
Sir don't why but I got different folder structure of codemirror inside node module after using npm i
bro install code mirror version 5.65.2
Thanks bro thanks for your help🙏
thansks!! bruhh got sucked at this for more than 3 hrs.
Wow i have completed 4 hr video in 2 hr 😁
Hey did you build ? help me please , I am getting error socket error Error : timeout , I am unable to create a room.
nice joke
@aryanvikash1967 pls send me the complete working code link
Hey please help me I am getting stock connection twice I don't know why
Awesome project sir
Nice content brother .. Next time typescript please
amazing video sir
Sir, webdev ke oper full step by step course Lana please
please update for codemirror v6 as it is not working
codemirror@5.65.2 use this
Hi everyone,
I made this project 1 month back following sir's video and that time it was running perfectly. But, today I wanted to test it again, but whenever I am creating a new room, after 5-10 seconds, an error pops up and says "Socket connection failed, try again later".
If anyone of you know the solution to this, kindly reply to this!!!
The error message is:
src\components\Editor.js
Line 38:8: React Hook useEffect has missing dependencies: 'onCodeChange', 'roomId', and 'socketRef'. Either include them or remove the dependency array. If 'onCodeChange' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
Line 50:23: The ref value 'socketRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'socketRef.current' to a variable inside the effect, and use that variable in the cleanup function react-hooks/exhaustive-deps
Line 52:8: React Hook useEffect has a missing dependency: 'socketRef'. Either include it or remove the dependency array. Mutable values like 'socketRef.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
src\pages\EditorPage.js
Line 74:8: React Hook useEffect has missing dependencies: 'location.state?.username', 'reactNavigator', and 'roomId'. Either include them or remove the dependency array react-hooks/exhaustive-deps
src\pages\Home.js
Line 68:25: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
I think You Had forgot to start the server.js file
@@riyazahmadkhan9490 the issue is, I deployed the app to netlify and after the entire deployment was over, it was running fine
After some days when I checked, it gave me the error
I'm getting the same error, please update if the error is resolved
@@harshbisht4573 not yet resolved
I'm getting the same error. Have u found any resolution?
is it only work on same pc's or will also different distant pc's also ?
Very nice project 👌.
Thank you.
Most welcome 😊
expecting course on Blockchain development
You are super teacher
Amazing , Thanks you sir .
On typing the cursor doesnt move and the code which is being received in in reverse manner. Help needed.
I would like to see React Native Content here
I love you projects so much 💞💞💞 my like made the video like to 299 -> 300 lucky
im not able to develop web socket connection.please help me out
your video is nice as well your explaination, can you make video on meanstack
You are genius
awesome project
Can you please show it to deploy on render as heroku free tier is stoped now
And when deployed app on render it's failing to connect to websockets
I am also facing the same problem. I have deployed on vercel but web sockets connection are not getting established
@@princeshubham26 hey is it working now..?
@@jeevansatyam6128 no
Really Nice.
thank you sir for this amazing project,
does this editor even run the code??
Not yet, but that feature can be added
@@CodersGyan sir please add this feature as soon as possible
@@CodersGyan Yes Sir, please add this feature also.
Great man
Sir there is a problem during Deployment. When I deployed it to Versel soket io is not connected to backend. Please help🙏🙏🙏
awsome video sir 😍 sir mera ek problem hai backend related jaise ki ham apne admin dashboard me Today earing kaise nikale database se or earning fetch karne ke baad ham earning ki patten kaise design kare for example 10000 hai to ham 10,000 is tarah or 10k is tarah se ham payment kaise design kare automatic sir please video banaye 🙏🙏🙏🙏🙏🙏🙏🙏
are we saving the data to the database, and how will the user get their data if they have left the room
is there any other video where implement of code compilation also
please someone help me with the codemirror thing i cant import like it is done in the video
Npm i codemirror@5.65.11
Then check in module folder . Evey repo present or not
Sir run code Ka functionality daliye
Add languages(c, c++,java,python,etc...)in editor and make code review platform also
socket connection failed try again getting this error again and again although i've written the same code as you
Hi bro also got the same issue can you let me know ?
Sir, can't we use monaco editor in this ?
I have used your video to create my FYP project. I used uiw/react-codemirror and implemented JS, HTML and CSS languages. Thankyou so much for the sockets coding. However i need your help because i want to assign Host and Participant Relationship to the users joining. Please help me. I will email you my code when you contact. :(
Please join the discord server, link in the description.
ye theme kaise change kr sakte hai ap kuch idea de sakte ho bhaia????
Microservice in node js please sir 🙏🙏🙏
how do the code execution happens once someone put some code in the editor?
Does this solve reader writer problem automatically
why there is not a comipler feature
Looking for Multivendor Ecommerce Project😀
sir a next project on webhooks implementation.
hello sir
why i'm having the double textbox issue ??
is someone having a solution for this??
I too have the same issue..Have you found any solution for that?
My CodeMirror is not working
plese help
How to solve the problem is that. **socket connection failed try again later**
Could you find the solution of this error
Can we run this code inside this project?
Actually having error in loading the client name in the page with avtar
if i want to compile this code which api or library i can use
Can someone explain how can I avoid multiple socket connections? When I join a room, 2 users with same name are getting added.
Hi I want to know how to add any value in editor means any predefined code in editor
Great knowledge was shared, but please make the videos more crisp and concept oriented. You made a finished project, and this becomes difficult to understand and edit..
hey shayan do u completed this project? i need some help regarding it
@@ruchirjainn i didn't complete it, but you can still ask..
@@am_shayantanam getting error as we socket closed before connection is established. Can you help pls