Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

Collaborative Whiteboard with React Canvas and SocketIO

via Udemy

Overview

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

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 HTMLCanvas 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 SocketIOServer

  • 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

Syllabus

  • Introduction
  • Drawing Rectangle
  • Implementing Collaborative Feature with SocketIO
  • Creating Line Element
  • Rubber Feature
  • Pencil Feature
  • Text Feature
  • Selection Feature (Resizing And Moving Rectangle)
  • Moving Text Element
  • Resizing And Moving Line
  • Selecting And Moving Pencil Element
  • Sharing Cursor Positions Functionality

Taught by

Marek Gryszkiewicz

Reviews

4.7 rating at Udemy based on 33 ratings

Start your review of Collaborative Whiteboard with React Canvas and SocketIO

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.