Collaborative Whiteboard with React Canvas and SocketIO

Create Collaborative Whiteboard App with React and SocketIO. Learn how to create, move and resize elements on Canvas

4.70 (19 reviews)
Udemy
platform
English
language
Web Development
category
Collaborative Whiteboard with React Canvas and SocketIO
982
students
7 hours
content
Mar 2023
last update
$79.99
regular price

What you will 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

Why take this course?

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

Screenshots

Collaborative Whiteboard with React Canvas and SocketIO - Screenshot_01Collaborative Whiteboard with React Canvas and SocketIO - Screenshot_02Collaborative Whiteboard with React Canvas and SocketIO - Screenshot_03Collaborative Whiteboard with React Canvas and SocketIO - Screenshot_04

Reviews

Saivarun
October 17, 2023
The Collaborative Whiteboard with React Canvas and Socket.IO is a standout tool. It offers seamless real-time collaboration, powerful drawing features, a user-friendly interface, robust security, stellar performance, and continuous improvements. Highly recommended for creative collaboration! This course will teach us from zero
Finley
March 31, 2023
Amazing course! Starting from the very basics and going into advanced topics. Covers all the main aspects that you need to know.

Charts

Price

Collaborative Whiteboard with React Canvas and SocketIO - Price chart

Rating

Collaborative Whiteboard with React Canvas and SocketIO - Ratings chart

Enrollment distribution

Collaborative Whiteboard with React Canvas and SocketIO - Distribution chart
5205022
udemy ID
3/10/2023
course created date
3/15/2023
course indexed date
Bot
course submited by