Build Collaborative editor and Real-time video call with NodeJS

Leotrieu

Leo Trieu

Codeshare

Full Source Code

Discussion Support

Course Description:

In this project, you will be learning how to build a collaborative platform with real-time code editor so that you can share what you are coding/typing on the screen with other people at the same time, just like Google Docs. Also I will teach you how to create video call function for this app like FaceTime.

This project will take you through everything from setup to execution and from empty folder to a real app…but it won't stop there. You won’t just be watching these videos...you’ll actually build this site yourself. With minimum of basic Javascript, you will see this project is super easy and fast to get started and you definitely can build your own ideal application based on the knowledge your learn from here.

Even better if you do a business in which you offer pair training or mentoring of how to code or how to debug someone’s project and then you will charge them for hour rate or something like that. Just like CodeMentor.

Prerequisites/Requirements

What skills will we learn during this project?

  • How to setup environment and tools for NodeJS.

  • How to use 3rd libraries to power up your app.

  • How to structure your application with good practice.

  • How to work with object models and MongoDB database.

  • How to work with NodeJS code in handlebar templates.

  • How to handle form submission and validation in NodeJS with ease.

  • How to integrate Facebook authentication to any NodeJS apps.

  • How to create real-time transactions with Socket.io.

  • Applying Bootstrap templates into your code.

  • How to create your own peer-to-peer server.

  • Learn how to deploy your NodeJS application on a real hosting.

What features will we build in this project?

  • A collaborative platform with code editor and video call.

  • Authenticate with email & password.

  • Authenticate with Facebook.

  • Sending transactional emails.

  • Real-time collaborative code editor like Google Docs.

  • Real-time chat message like Facebook Messenger.

  • Real-time video call like FaceTime.

  • Hosting the app on a live host.

  • 20775538?v=4

    lindseypeng

    hi Leo! thank you for the awesome course!i have a question: is there anyway i can implement an jupyter notebook editor via the codemirror library? thank you!!

  • 2897420?v=4

    Anastasios Orfanidis

    Cool, enjoyable and also to the point!

  • 88abcc6cff01a43faf90fdafb9164699

    Jimmy

    Awesome course! Up and running quickly with real world application. Thank you so much Leo! 

  • 0ce4e58128e42da84c05614c8135e294

    Daniyal Aamir

    Great course with real world app. Hope to see more projects with NodeJS on Code4Startup due to the massive demand of it in the market currently.

  • 2a90762e412aebdedb94ac45e0452f76

    Pallavi Aggarwal

    Good course :)

  • Picture

    An Le

    The course is great to get a good glimpse at NodeJS and Socketio. However, I do feel like the course is intended too much on assembling the parts rather than explaining why the part is chosen, how did you learn to use that part and where did you pick up those parts from. Overall, great course but it would be better some extra videos to go deep in the how and why.

  • Starter

    • Vision of this project 3:22  
    • What are we building? 5:18  
    • Download Source code  

  • Task 1: Setting up

    • Install NodeJS and npm 3:56  
    • Install GUI Tool for MongoDB database 1:44  
    • Create your first web app 2:50  

  • Task 2: Start here

    • What are we building in this task? 0:43  
    • Understanding project's structure 6:50  
    • Implementing Bootstrap 7:06  
    • Create your first static page 5:25  

  • Task 3: Forms and Transactional emails

    • What are we building in this task? 0:51  
    • Create Contact page 9:55  
    • Form validation 11:12  
    • Sending Transactional Emails 10:32  

  • Task 4: Authentication with Email

    • What are we building in this task? 0:39  
    • Create Register & Login page 7:15  
    • Create database for User 6:38  
    • Register with Email & Password 22:24  
    • Login with Email & Password 9:19  
    • Logout function 4:48  

  • Task 5: Authentication with Facebook

    • What are we building in this task? 0:45  
    • Create Facebook app 1:29  
    • Authenticate with Passport Facebook 14:00  

  • Task 6: Creating Tasks for code editor

    • What are we building in this task? 0:54  
    • Create Task function 9:24  

  • Task 7: Chat system (Socket.io)

    • What are we building in this task? 0:58  
    • Create Code Editor 7:23  
    • Create Chat function 19:49  
    • Create Room chat 8:10  

  • Task 8: Collaborative Code editor

    • What are we building in this task? 1:14  
    • Sharing code editor 13:19  
    • Save task to database 7:36  

  • Task 9: Real-time video call

    • What are we building in this task? 0:42  
    • Create UI for video call 8:14  
    • Create account for PeerJS Server 1:41  
    • Setting up WebRTC 12:03  

  • Task 10: Go Live

    • Heroku & Mlab 5:00  
    • Heroku Deployment 10:50  
    • Updating Gmail & Facebook settings 7:47  
    • Create our own Peer Server for video call 12:49