Course Information
Course Overview
Create Collaborative Whiteboard App with React and SocketIO. Learn how to create, move and resize elements on Canvas
Let's create amazing Application - Collaborative Whiteboard. Course is designed in the practical way. We will start from scratch and finish with complete application. Main goal of this course is to play with technologies like React, Redux, JavaScript, SocketIO and learn how to work with HTML Canvas in React. Thanks to SocketIO we will add some realtime effects to our application. We will share our moves with other Users which will give us effect of Collaborative Whiteboard. At the end we will add tracking system for Cursors of all connected users to our App.
What we will learn through the course:
Creating React Application from scratch
Working with Redux State Management
Adding HTML Canvas to React Application
Handle Mouse Events to create new shapes
Use hooks to manage state of the Canvas
Creating Rectangles, Lines, Freehand drawings and Text
Adding functionality of moving and resizing elements
Creating SocketIO Server
EXTRA Collaborative part of sharing our actions on canvas with other Users
Sharing cursors with all connected users
Who this course is for:
New beginners to create amazing project
Anyone who wants to learn how to create basics shapes on Canvas
Anyone who wants to learn how to share your actions with other users thanks to SocketIO
Anyone who wants to work with Canvas in React
Adding HTML Canvas to React Application
Course Content
- 10 section(s)
- 74 lecture(s)
- Section 1 Introduction
- Section 2 Drawing Rectangle
- Section 3 Implementing Collaborative Feature with SocketIO
- Section 4 Creating Line Element
- Section 5 Rubber Feature
- Section 6 Pencil Feature
- Section 7 Text Feature
- Section 8 Selection Feature (Resizing And Moving Rectangle)
- Section 9 Moving Text Element
- Section 10 Resizing And Moving Line
What You’ll Learn
- Create Collaborative Whiteboard
- Display Data On Canvas
- Learn About HTML Canvas
- Resize Element On Canvas
- Move Elements On Canvas
- Share Your Actions With Other Users Thanks To SocketIO
- Create Sharing Cursor Functionality
- Handle Mouse Events
- Create UI With React
- Create React Application From Scratch
Skills covered in this course
Reviews
-
AAryan Sharma
troube with understanding accent, should add "react.js" "basic react knowledge requried" in description but otherwise good
-
SSrinath
A very good course.
-
SShubham Kumar
This course has exceeded my expectations in every way. As a senior engineer, I had specific goals going in, and the instructor has delivered more than promised. Highly recommend this course for developers looking to master real-time web applications!
-
AAmrit Pal
The instructor does not reply to the question asked related to course content. It seems like sharing some part of big project rather teaching.