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

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Collaborative Whiteboard with React Canvas and SocketIO with these activities:

Review Calculus Concepts

Show steps

Refresh your knowledge of calculus concepts that are foundational for this course.

Browse courses on Calculus

Show steps

Review the fundamentals of limits and derivatives
Practice solving calculus problems
Identify areas where you need additional support
Seek help from a tutor or online resources

Refresh HTML and JavaScript

Show steps

Begin the course by reviewing the fundamentals of HTML and JavaScript to ensure a solid understanding for the more challenging concepts that will follow.

Browse courses on HTML

Show steps

Review HTML syntax and structure
Practice writing HTML code to create basic web pages
Review JavaScript syntax and data types
Practice writing JavaScript code to manipulate the DOM

Organize Your Notes and Assignments

Show steps

Stay organized by compiling your notes, assignments, and other course materials in a structured manner.

Show steps

Gather all your notes, assignments, and other materials
Create a system for organizing your materials
Store your materials in a central location
Review your materials regularly

Six other activities

Expand to see all activities and additional details

Show all nine activities

Join a Study Group

Show steps

Collaborate with peers to discuss concepts, work through problems, and reinforce your understanding of the course material.

Show steps

Find or create a study group with同学
Set regular meeting times
Share notes and resources
Discuss lecture topics and assignments
Prepare for exams together

Practice Drawing Shapes with HTML Canvas

Show steps

Reinforce your understanding of HTML Canvas by practicing drawing basic shapes like rectangles, lines, and circles.

Show steps

Create a simple HTML Canvas
Use the Canvas API to draw rectangles
Use the Canvas API to draw lines
Use the Canvas API to draw circles
Combine shapes to create more complex drawings

Build a Simple Drawing App with React and Redux

Show steps

Put your skills to the test by building a simple drawing app that allows users to create and manipulate shapes on a canvas.

Browse courses on React

Show steps

Create a new React project
Add Redux for state management
Implement basic drawing functionality using HTML Canvas
Add features like shape selection, resizing, and moving
Polish the UI and add additional features as desired

Participate in a Coding Challenge

Show steps

Test your skills and knowledge by participating in a coding challenge related to the course material.

Browse courses on Coding

Show steps

Find a coding challenge that aligns with your interests
Prepare by practicing relevant concepts
Participate in the challenge and submit your solution
Analyze the results and identify areas for improvement

Contribute to an Open-Source Library

Show steps

Make a valuable contribution to the community by contributing to an open-source library related to the course material.

Browse courses on Open Source

Show steps

Research open-source libraries in the field
Identify a specific library to contribute to
Fork the library and make your changes
Submit a pull request with your contribution
Collaborate with other developers on the project

Create a Tutorial on a Course Topic

Show steps

Deepen your understanding of a specific course topic by creating a tutorial that explains it to others.

Show steps

Choose a specific topic to focus on
Research and gather information about the topic
Outline your tutorial and organize your content
Create written or video content that explains the topic clearly
Share your tutorial with others

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