Companies Home Search Profile
TrainingHub TrainingHub

Collaborative Whiteboard 2023 with React Canvas and SocketIO

Focused View

Marek Gryszkiewicz

7:07:17

64 View
  • 1. Node installation.mp4
    01:42
  • 2. Creating React Application.mp4
    03:32
  • 3. Redux Introduction.mp4
    05:13
  • 4. Cleaning Redux Template.mp4
    09:37
  • 5. Creating Whiteboard Component.mp4
    02:06
  • 6. Creating Tools Menu.mp4
    04:32
  • 7.1 rectangle.zip
  • 7. Creating Add Rectangle Button.mp4
    09:22
  • 8. Connecting Action To Rectangle Button.mp4
    09:56
  • 9.1 S01E08-app.zip
  • 9. Complete code after section.html
  • 1. Preparing Canvas And Drawing Simple Elements.mp4
    14:42
  • 2. Handling Mouse Move Event.mp4
    09:13
  • 3. Creating Rectangle Element.mp4
    13:54
  • 4. Adding New Element To Elements Array.mp4
    11:42
  • 5. Handling Mouse Up Event.mp4
    02:24
  • 6. Updating Element On Mouse Move.mp4
    23:36
  • 7. Drawing Rectangle.mp4
    08:50
  • 8. Coordinates Adjustments.mp4
    14:00
  • 9.1 S02E08-app.zip
  • 9. Complete Code After Section.html
  • 1. Introduction to SocketIO.mp4
    02:43
  • 2. Creating Express Server.mp4
    07:02
  • 3. Connecting With SocketIO Server From Client Side.mp4
    09:21
  • 4. Exchanging Data through SocketIO Server With Other Connected Clients.mp4
    12:42
  • 5.1 S03E04-app.zip
  • 5. Complete Code After Section.html
  • 1.1 line.zip
  • 1. Adding Line Menu Button.mp4
    02:46
  • 2. Creating Line Element.mp4
    04:34
  • 3. Handling Mouse Move Event When Drawing Line.mp4
    04:51
  • 4. Drawing Line.mp4
    03:47
  • 5. Adjusting Line Coordinates.mp4
    06:58
  • 6.1 S04E05.zip
  • 6. Complete Code After Section.html
  • 1.1 rubber.zip
  • 1. Creating Menu Button and Clearing Local State.mp4
    04:46
  • 2. Clearing Elements State At Server Side And All Connected Clients.mp4
    04:10
  • 3.1 S05E02.zip
  • 3. Complete Code After Section.html
  • 1.1 pencil.zip
  • 1. Adding Pencil Button To Menu.mp4
    02:21
  • 2. Perfect Freehand Introduction.mp4
    03:29
  • 3. Creating New Pencil Element.mp4
    03:55
  • 4. Updating Array Of Points.mp4
    05:08
  • 5.1 getsvgpathfromstroke.js.zip
  • 5. Drawing Pencil Element.mp4
    12:26
  • 6. Fixing Console Error.mp4
    01:40
  • 7.1 S06E06.zip
  • 7. Complete Code After Section.html
  • 1.1 text.zip
  • 1. Creating Text Button.mp4
    02:15
  • 2. Small Refactor Of Handle Mouse Down Handler.mp4
    05:18
  • 3. Updating Text Element.mp4
    02:11
  • 4. Rendering Text Area.mp4
    06:36
  • 5. Drawing Text Element.mp4
    04:27
  • 6. Handling Blur Event.mp4
    08:10
  • 7. Fixing Console Error.mp4
    01:11
  • 8. Fixing Jumping Effect.mp4
    03:58
  • 9.1 S07E08.zip
  • 9. Complete Code After Section.html
  • 1. Creating Selection Button.mp4
    03:05
  • 2. Getting Element At Position.mp4
    20:40
  • 3. Fixing Bug With Position.mp4
    02:46
  • 4. Getting Correct Cursor Depending On Position.mp4
    07:35
  • 5. Setting Action Type Depending On Position On Rectangle.mp4
    07:26
  • 6. Calculating Offset And Setting Element.mp4
    03:59
  • 7. Calculating Coordinates After Moving Element.mp4
    06:02
  • 8. Fixing Bug And Testing Moving Functionality.mp4
    03:35
  • 9. Resizing Functionality And Testing.mp4
    14:29
  • 10.1 S08E09-app.zip
  • 10. Complete Code After Section.html
  • 1. Moving Text Element.mp4
    07:26
  • 2.1 S09E01.zip
  • 2. Complete Code After Section.html
  • 1. Resizing Line.mp4
    08:25
  • 2. Moving The Line.mp4
    13:01
  • 3.1 s10e02.zip
  • 3. Complete Code After Section.html
  • 1. Selecting Pencil Element.mp4
    10:55
  • 2. Fixing Bug With Selection.mp4
    01:31
  • 3. Adding Login On Move.mp4
    09:07
  • 4. Fixing Bug With Moving.mp4
    03:20
  • 5.1 S11E04.zip
  • 5. Complete Code After Section.html
  • 1. Preparing Cursor Slice (Redux).mp4
    07:00
  • 2. Preparing Events To Send Cursor Data.mp4
    03:55
  • 3. Sharing Cursor Position With Other Users.mp4
    11:11
  • 4. Rendering Cursors.mp4
    06:27
  • 5. Removing Disconnected User Cursor.mp4
    04:16
  • 6.1 S12E05-app.zip
  • 6. Comple Code After Section.html
    •

    Description

    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

    Who is this for?

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

    • More details

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

    Who this course is for:

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

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category

    React

    Marek Gryszkiewicz
    Marek Gryszkiewicz
    Instructor's Courses
    My main goal is to improve as a developer  and share my knowledge. I am working as full stack web developer and my main interests are programming and boxing. I like learning new stuff and programming makes me happy when I can share my knowledge. I will do my best to show you how you can create amazing apps.
    Udemy
    Udemy
    View courses Udemy
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 62
    • duration 7:07:17
    • Release Date 2023/04/26

    Courses related to React

    JavaScript The Hard Parts, v2
    Frontend MastersJavaScript The Hard Parts, v2
    6:41:28
    04/13/2024
    Discussion React.js Decentralized App Development for NEAR
    Udemy Mammoth Interactive
    Mammoth Interactive
    Discussion React.js Decentralized App Development for NEAR
    10:33:16
    11/24/2022
    Build Social Media Website Using React
    UdemyBuild Social Media Website Using React
    13:22:28
    03/17/2023