Collaborative Whiteboard with React Canvas and SocketIO

Collaborative Whiteboard with React Canvas and SocketIO, available at $79.99, has an average rating of 4.75, with 74 lectures, based on 21 reviews, and has 1015 subscribers.

You will learn about 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 This course is ideal for individuals who are Developers and Students which wants to learn how to create Collaborative Whiteboard It is particularly useful for Developers and Students which wants to learn how to create Collaborative Whiteboard.

Enroll now: Collaborative Whiteboard with React Canvas and SocketIO

Summary

Title: Collaborative Whiteboard with React Canvas and SocketIO

Price: $79.99

Average Rating: 4.75

Number of Lectures: 74

Number of Published Lectures: 74

Number of Curriculum Items: 74

Number of Published Curriculum Objects: 74

Original Price: $89.99

Quality Status: approved

Status: Live

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

Who Should Attend

Developers and Students which wants to learn how to create Collaborative Whiteboard

Target Audiences

Developers and Students which wants to learn how to create Collaborative Whiteboard

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 SocketIOwe will add some realtime effects to our application. We will share our moves with other Userswhich will give us effect of Collaborative Whiteboard.At the end we will add tracking system for Cursorsof all connected users to our App.

What we will learnthrough the course:

Creating React Application from scratch
Working with ReduxState Management
Adding HTML Canvas to React Application
Handle Mouse Events to create new shapes
Use hooksto manage state of the Canvas
Creating Rectangles, Lines, Freehand drawings and Text
Adding functionality of movingand resizingelements
Creating SocketIO Server
EXTRA Collaborative part of sharing our actions on canvas with other Users
Sharing cursorswith all connected users

Who this course is for:

New beginners to create amazing project
Anyone who wants to learn how to createbasics shapes on Canvas
Anyone who wants to learn how to share your actionswith other users thanks to SocketIO
Anyone who wants to work with Canvasin React
Adding HTML Canvas to React Application

Course Curriculum

Chapter 1: Introduction

Lecture 1: Node installation

Lecture 2: Creating React Application

Lecture 3: Redux Introduction

Lecture 4: Cleaning Redux Template

Lecture 5: Creating Whiteboard Component

Lecture 6: Creating Tools Menu

Lecture 7: Creating Add Rectangle Button

Lecture 8: Connecting Action To Rectangle Button

Lecture 9: Complete code after section

Chapter 2: Drawing Rectangle

Lecture 1: Preparing Canvas And Drawing Simple Elements

Lecture 2: Handling Mouse Move Event

Lecture 3: Creating Rectangle Element

Lecture 4: Adding New Element To Elements Array

Lecture 5: Handling Mouse Up Event

Lecture 6: Updating Element On Mouse Move

Lecture 7: Drawing Rectangle

Lecture 8: Coordinates Adjustments

Lecture 9: Complete Code After Section

Chapter 3: Implementing Collaborative Feature with SocketIO

Lecture 1: Introduction to SocketIO

Lecture 2: Creating Express Server

Lecture 3: Connecting With SocketIO Server From Client Side

Lecture 4: Exchanging Data through SocketIO Server With Other Connected Clients

Lecture 5: Complete Code After Section

Chapter 4: Creating Line Element

Lecture 1: Adding Line Menu Button

Lecture 2: Creating Line Element

Lecture 3: Handling Mouse Move Event When Drawing Line

Lecture 4: Drawing Line

Lecture 5: Adjusting Line Coordinates

Lecture 6: Complete Code After Section

Chapter 5: Rubber Feature

Lecture 1: Creating Menu Button and Clearing Local State

Lecture 2: Clearing Elements State At Server Side And All Connected Clients

Lecture 3: Complete Code After Section

Chapter 6: Pencil Feature

Lecture 1: Adding Pencil Button To Menu

Lecture 2: Perfect Freehand Introduction

Lecture 3: Creating New Pencil Element

Lecture 4: Updating Array Of Points

Lecture 5: Drawing Pencil Element

Lecture 6: Fixing Console Error

Lecture 7: Complete Code After Section

Chapter 7: Text Feature

Lecture 1: Creating Text Button

Lecture 2: Small Refactor Of Handle Mouse Down Handler

Lecture 3: Updating Text Element

Lecture 4: Rendering Text Area

Lecture 5: Drawing Text Element

Lecture 6: Handling Blur Event

Lecture 7: Fixing Console Error

Lecture 8: Fixing Jumping Effect

Lecture 9: Complete Code After Section

Chapter 8: Selection Feature (Resizing And Moving Rectangle)

Lecture 1: Creating Selection Button

Lecture 2: Getting Element At Position

Lecture 3: Fixing Bug With Position

Lecture 4: Getting Correct Cursor Depending On Position

Lecture 5: Setting Action Type Depending On Position On Rectangle

Lecture 6: Calculating Offset And Setting Element

Lecture 7: Calculating Coordinates After Moving Element

Lecture 8: Fixing Bug And Testing Moving Functionality

Lecture 9: Resizing Functionality And Testing

Lecture 10: Complete Code After Section

Chapter 9: Moving Text Element

Lecture 1: Moving Text Element

Lecture 2: Complete Code After Section

Chapter 10: Resizing And Moving Line

Lecture 1: Resizing Line

Lecture 2: Moving The Line

Lecture 3: Complete Code After Section

Chapter 11: Selecting And Moving Pencil Element

Lecture 1: Selecting Pencil Element

Lecture 2: Fixing Bug With Selection

Lecture 3: Adding Login On Move

Lecture 4: Fixing Bug With Moving

Lecture 5: Complete Code After Section

Chapter 12: Sharing Cursor Positions Functionality

Lecture 1: Preparing Cursor Slice (Redux)

Lecture 2: Preparing Events To Send Cursor Data

Lecture 3: Sharing Cursor Position With Other Users

Lecture 4: Rendering Cursors

Lecture 5: Removing Disconnected User Cursor

Lecture 6: Comple Code After Section

Instructors

Marek Gryszkiewicz
Web Developer

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 0 votes
4 stars: 4 votes
5 stars: 17 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu