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

1. Introduction

1. Node installation

2. Creating React Application

3. Redux Introduction

4. Cleaning Redux Template

5. Creating Whiteboard Component

6. Creating Tools Menu

7.1 rectangle.zip

7. Creating Add Rectangle Button

8. Connecting Action To Rectangle Button

9.1 S01E08-app.zip

9. Complete code after section.html

2. Drawing Rectangle

1. Preparing Canvas And Drawing Simple Elements

2. Handling Mouse Move Event

3. Creating Rectangle Element

4. Adding New Element To Elements Array

5. Handling Mouse Up Event

6. Updating Element On Mouse Move

7. Drawing Rectangle

8. Coordinates Adjustments

9.1 S02E08-app.zip

9. Complete Code After Section.html

3. Implementing Collaborative Feature with SocketIO

1. Introduction to SocketIO

2. Creating Express Server

3. Connecting With SocketIO Server From Client Side

4. Exchanging Data through SocketIO Server With Other Connected Clients

5.1 S03E04-app.zip

5. Complete Code After Section.html

4. Creating Line Element

1.1 line.zip

1. Adding Line Menu Button

2. Creating Line Element

3. Handling Mouse Move Event When Drawing Line

4. Drawing Line

5. Adjusting Line Coordinates

6.1 S04E05.zip

6. Complete Code After Section.html

5. Rubber Feature

1.1 rubber.zip

1. Creating Menu Button and Clearing Local State

2. Clearing Elements State At Server Side And All Connected Clients

3.1 S05E02.zip

3. Complete Code After Section.html

6. Pencil Feature

1.1 pencil.zip

1. Adding Pencil Button To Menu

2. Perfect Freehand Introduction

3. Creating New Pencil Element

4. Updating Array Of Points

5.1 getsvgpathfromstroke.js.zip

5. Drawing Pencil Element

6. Fixing Console Error

7.1 S06E06.zip

7. Complete Code After Section.html

7. Text Feature

1.1 text.zip

1. Creating Text Button

2. Small Refactor Of Handle Mouse Down Handler

3. Updating Text Element

4. Rendering Text Area

5. Drawing Text Element

6. Handling Blur Event

7. Fixing Console Error

8. Fixing Jumping Effect

9.1 S07E08.zip

9. Complete Code After Section.html

8. Selection Feature (Resizing And Moving Rectangle)

1. Creating Selection Button

2. Getting Element At Position

3. Fixing Bug With Position

4. Getting Correct Cursor Depending On Position

5. Setting Action Type Depending On Position On Rectangle

6. Calculating Offset And Setting Element

7. Calculating Coordinates After Moving Element

8. Fixing Bug And Testing Moving Functionality

9. Resizing Functionality And Testing

10.1 S08E09-app.zip

10. Complete Code After Section.html

9. Moving Text Element

1. Moving Text Element

2.1 S09E01.zip

2. Complete Code After Section.html

10. Resizing And Moving Line

1. Resizing Line

2. Moving The Line

3.1 s10e02.zip

3. Complete Code After Section.html

11. Selecting And Moving Pencil Element

1. Selecting Pencil Element

2. Fixing Bug With Selection

3. Adding Login On Move

4. Fixing Bug With Moving

5.1 S11E04.zip

5. Complete Code After Section.html

12. Sharing Cursor Positions Functionality

1. Preparing Cursor Slice (Redux)

2. Preparing Events To Send Cursor Data

3. Sharing Cursor Position With Other Users

4. Rendering Cursors

5. Removing Disconnected User Cursor

6.1 S12E05-app.zip

6. Comple Code After Section.html

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training