Collaborative Whiteboard 2023 With React Canvas And Socketio

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

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

Requirements

Basic Programming Knowledge

JavaScript knowledge

Description

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 scratchWorking with Redux State ManagementAdding HTML Canvas to React ApplicationHandle Mouse Events to create new shapesUse hooks to manage state of the CanvasCreating Rectangles, Lines, Freehand drawings and TextAdding functionality of moving and resizing elementsCreating SocketIO ServerEXTRA Collaborative part of sharing our actions on canvas with other UsersSharing cursors with all connected usersWho this course is for:New beginners to create amazing projectAnyone who wants to learn how to create basics shapes on CanvasAnyone who wants to learn how to share your actions with other users thanks to SocketIOAnyone who wants to work with Canvas in ReactAdding HTML Canvas to React Application

Overview

Section 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

Section 2: Drawing Rectangle

Lecture 10 Preparing Canvas And Drawing Simple Elements

Lecture 11 Handling Mouse Move Event

Lecture 12 Creating Rectangle Element

Lecture 13 Adding New Element To Elements Array

Lecture 14 Handling Mouse Up Event

Lecture 15 Updating Element On Mouse Move

Lecture 16 Drawing Rectangle

Lecture 17 Coordinates Adjustments

Lecture 18 Complete Code After Section

Section 3: Implementing Collaborative Feature with SocketIO

Lecture 19 Introduction to SocketIO

Lecture 20 Creating Express Server

Lecture 21 Connecting With SocketIO Server From Client Side

Lecture 22 Exchanging Data through SocketIO Server With Other Connected Clients

Lecture 23 Complete Code After Section

Section 4: Creating Line Element

Lecture 24 Adding Line Menu Button

Lecture 25 Creating Line Element

Lecture 26 Handling Mouse Move Event When Drawing Line

Lecture 27 Drawing Line

Lecture 28 Adjusting Line Coordinates

Lecture 29 Complete Code After Section

Section 5: Rubber Feature

Lecture 30 Creating Menu Button and Clearing Local State

Lecture 31 Clearing Elements State At Server Side And All Connected Clients

Lecture 32 Complete Code After Section

Section 6: Pencil Feature

Lecture 33 Adding Pencil Button To Menu

Lecture 34 Perfect Freehand Introduction

Lecture 35 Creating New Pencil Element

Lecture 36 Updating Array Of Points

Lecture 37 Drawing Pencil Element

Lecture 38 Fixing Console Error

Lecture 39 Complete Code After Section

Section 7: Text Feature

Lecture 40 Creating Text Button

Lecture 41 Small Refactor Of Handle Mouse Down Handler

Lecture 42 Updating Text Element

Lecture 43 Rendering Text Area

Lecture 44 Drawing Text Element

Lecture 45 Handling Blur Event

Lecture 46 Fixing Console Error

Lecture 47 Fixing Jumping Effect

Lecture 48 Complete Code After Section

Section 8: Selection Feature (Resizing And Moving Rectangle)

Lecture 49 Creating Selection Button

Lecture 50 Getting Element At Position

Lecture 51 Fixing Bug With Position

Lecture 52 Getting Correct Cursor Depending On Position

Lecture 53 Setting Action Type Depending On Position On Rectangle

Lecture 54 Calculating Offset And Setting Element

Lecture 55 Calculating Coordinates After Moving Element

Lecture 56 Fixing Bug And Testing Moving Functionality

Lecture 57 Resizing Functionality And Testing

Lecture 58 Complete Code After Section

Section 9: Moving Text Element

Lecture 59 Moving Text Element

Lecture 60 Complete Code After Section

Section 10: Resizing And Moving Line

Lecture 61 Resizing Line

Lecture 62 Moving The Line

Lecture 63 Complete Code After Section

Section 11: Selecting And Moving Pencil Element

Lecture 64 Selecting Pencil Element

Lecture 65 Fixing Bug With Selection

Lecture 66 Adding Login On Move

Lecture 67 Fixing Bug With Moving

Lecture 68 Complete Code After Section

Section 12: Sharing Cursor Positions Functionality

Lecture 69 Preparing Cursor Slice (Redux)

Lecture 70 Preparing Events To Send Cursor Data

Lecture 71 Sharing Cursor Position With Other Users

Lecture 72 Rendering Cursors

Lecture 73 Removing Disconnected User Cursor

Lecture 74 Comple Code After Section

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