Collaborative Whiteboard with React Canvas and SocketIO from Udemy

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

What's inside

Learning objectives

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

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

Syllabus

Introduction

Node installation

Creating React Application

Redux Introduction

Cleaning Redux Template

Creating Whiteboard Component

Creating Tools Menu

Creating Add Rectangle Button

Connecting Action To Rectangle Button

Complete code after section

Drawing Rectangle

Preparing Canvas And Drawing Simple Elements

Handling Mouse Move Event

Creating Rectangle Element

Adding New Element To Elements Array

Handling Mouse Up Event

Updating Element On Mouse Move

Coordinates Adjustments

Complete Code After Section

Implementing Collaborative Feature with SocketIO

Introduction to SocketIO

Creating Express Server

Connecting With SocketIO Server From Client Side

Exchanging Data through SocketIO Server With Other Connected Clients

Creating Line Element

Adding Line Menu Button

Handling Mouse Move Event When Drawing Line

Drawing Line

Adjusting Line Coordinates

Rubber Feature

Creating Menu Button and Clearing Local State

Clearing Elements State At Server Side And All Connected Clients

Pencil Feature

Adding Pencil Button To Menu

Perfect Freehand Introduction

Creating New Pencil Element

Updating Array Of Points

Drawing Pencil Element

Fixing Console Error

Text Feature

Creating Text Button

Small Refactor Of Handle Mouse Down Handler

Updating Text Element

Rendering Text Area

Drawing Text Element

Handling Blur Event

Fixing Jumping Effect

Selection Feature (Resizing And Moving Rectangle)

Creating Selection Button

Getting Element At Position

Fixing Bug With Position

Getting Correct Cursor Depending On Position

Setting Action Type Depending On Position On Rectangle

Calculating Offset And Setting Element

Calculating Coordinates After Moving Element

Fixing Bug And Testing Moving Functionality

Resizing Functionality And Testing

Moving Text Element

Resizing And Moving Line

Resizing Line

Moving The Line

Selecting And Moving Pencil Element

Selecting Pencil Element

Fixing Bug With Selection

Adding Login On Move

Fixing Bug With Moving

Sharing Cursor Positions Functionality

Preparing Cursor Slice (Redux)

Preparing Events To Send Cursor Data

Sharing Cursor Position With Other Users

Rendering Cursors

Removing Disconnected User Cursor

Comple Code After Section

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Students have the opportunity to build a project they can show off, which may be great for their portfolio and job search

Course begins with no assumed knowledge

Teaches about WebSockets, a technology that is widely used in real-time applications such as collaborative editing and multiplayer games

Taught by Marek Gryszkiewicz, an experienced TypeScript developer

Provides hands-on practice with Canvas drawing in React, which is highly relevant to the frontend development industry

Covers important front-end development concepts such as React, Redux, SocketIO, and HTML Canvas, allowing learners to build a strong foundation in these

Career center

Learners who complete Collaborative Whiteboard with React Canvas and SocketIO will develop knowledge and skills that may be useful to these careers:

Computer Programmer

Computer Programmers are responsible for writing and maintaining the code that allows software and applications to run. This course teaches the fundamentals of building software using Redux, SocketIO, and Canvas. It may help lead to success as a Computer Programmer.

See salaries and explore the career path for Computer Programmer

Software Engineer

Software Engineers work in various industries creating, designing, maintaining, and deploying computer software. This course may help build a foundation for a career as a Software Engineer by providing real world experience using Redux, SocketIO, and Canvas.

See salaries and explore the career path for Software Engineer

UI Developer

UI Developers specialize in designing and developing the user interface for websites and applications. This course utilizes Canvas, which is a component of user interface development. It also introduces you to Redux, a powerful state management library for building user interfaces.

See salaries and explore the career path for UI Developer

Full-Stack Developer

Full Stack Developers are responsible for both the back-end and front-end development of a website or application. This course teaches you about Canvas and Redux, which are key technologies for Full Stack Developers.

See salaries and explore the career path for Full-Stack Developer

Software Architect

Software Architects design and develop the overall architecture of a software system. They may also work with other programmers to implement the system. This course provides hands on experience working with Redux, which is a state management library used by many professional Software Architects.

See salaries and explore the career path for Software Architect

Web Designer

Web Designers create the visual look and feel of a website or application. This course provides a foundation to create a user interface using Redux and Canvas.

See salaries and explore the career path for Web Designer

Application Developer

Application Developers design, build, and deploy software applications. This course teaches many tools and concepts commonly used by Application Developers, such as Redux and Canvas. It may lead to success as an Application Developer.

See salaries and explore the career path for Application Developer

UX Designer

UX Designers work to create user interfaces that are both effective and enjoyable to use. This course teaches you how to use Canvas and Redux, which may help build a foundation for a career as a UX Designer.

See salaries and explore the career path for UX Designer

Web Developer

A Web Developer may work with a team of programmers or independently to research, design, build, and test new software products. They may also update and maintain existing products. This course teaches Redux, SocketIO, and Canvas to create a collaborative whiteboard. Working with Canvas may provide you with a strong foundation for a career as a Web Developer.

See salaries and explore the career path for Web Developer

Quality Assurance Analyst

Quality Assurance Analysts test software to identify and fix bugs. This course teaches how to use Redux and Canvas to build software. It may help build a foundation for a career as a Quality Assurance Analyst.

See salaries and explore the career path for Quality Assurance Analyst

Front-End Developer

Front End Developers are responsible for designing and building the user interface of a website or application. This course may provide some of the skills and knowledge needed for this role, including working with Canvas.

See salaries and explore the career path for Front-End Developer

Game Developer

Game Developers create video games. This course provides basic skills and knowledge in working with Canvas, which is used in many video games. It may lead to success as a Game Developer.

See salaries and explore the career path for Game Developer

Cloud Engineer

Cloud Engineers design, build, and maintain cloud-based systems. This course may be useful in a career as a Cloud Engineer because it teaches SocketIO, which is a popular technology used in cloud computing.

See salaries and explore the career path for Cloud Engineer

Technical Writer

Technical Writers create instruction manuals, training materials, and other documentation to explain technical information. This course may help build a foundation for a career as a Technical Writer by providing experience with Redux and Canvas.

See salaries and explore the career path for Technical Writer

Data Scientist

Data Scientists clean and analyze data to extract meaningful insights. This course may provide some of the skills and knowledge needed for this role, including working with Canvas to visualize data.

See salaries and explore the career path for Data Scientist