Build Real-time code editor using React, Node Js, Web sockets π₯π₯π ( Hindi )
Reserve your spot in Backend Foundation Live Batch: Use coupon code: EARLY_BIRD https://learn-backend.now Master Full-Stack Engineering! From frontend to backend, build job-ready skills fast. Enroll now: https://codersgyan.com/c/fullstack-js-engineer Get 1:1 mentorship: https://topmate.io/codersgyan Build Real-time code editor using React, Node Js, Web sockets π₯π₯ We will be building a full-stack real-time code editor, a collaboration tool for many cases. We will be using React, Node Js, Express Js and Socket.io for the web sockets. We will be deploying our app on Heroku after completion for free π₯ Source code: https://github.com/codersgyan/realtime-code-editor ππΎPrerequisites: Javascript complete course: https://www.youtube.com/watch?v=C5KMrqNc3eA&list=PLXQpH_kZIxTV7slsiwQarBEVXHgQWDhLQ Node JS crash course: https://youtu.be/wdBCoRMMxto Express js crash course: https://youtu.be/46Mjvdv_UUM Mongo DB crash course: https://youtu.be/22oqSaTsn08 Rest APIs crash course: https://youtu.be/iM8h8-LcJPk Timestamps:- 0:00:00 - Intro 0:03:59 - Project setup 0:07:15 - React router 0:16:37 - Home page 0:44:26 - Unique id 0:51:26 - Toast 1:04:59 - Editor page 1:31:18 - Editor design 1:44:39 - Server 2:08:40 - WS error handling 2:38:01 - Disconnect 2:50:59 - Sync the code 3:19:42 - Copy room id 3:23:54 - Leave room 3:27:29 - Auto sync on first load 3:37:03 - Deployment 4:06:53 - Wind up #reactjs #socketio #nodejs #expressjs #MERN #Node js #javascript #codersgyan #learnCoding π₯ Let's connect on LinkedIn: π₯β€οΈ https://www.linkedin.com/in/codersgyan/ ππΎ β My gears for everyday work: π₯ππΎπΈ https://docs.google.com/spreadsheets/d/1o58GFIKKYDFQ-aplKYMgH8TfNlrAomosZre2aDjYl7I/edit?usp=sharing
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.