React online paint

Paint online use websockets to share the canvas between users in the room.

Demo: https://online-paint.the73756.ru

Implemented:

• Responsive canvas (not recommended to draw at different screen resolutions)
• 5 tools + stroke and fill color selection
• Real-time synchronization between multiple users in the same room
• Image sync for newly connected users
• Saving a picture to png
• User Activity Notifications

Stack:

• ReactJS 18
• React Router 6
• MobX
• SCSS modules
• Axios
• WebSockets
• ExpressJS 4

How to run:

1. npm install - (server + client)
2. npm run dev - start server
3. npm start - start client

Comment:

For me, this is the first project with WebSockets and Canvas, I consider it successful and very informative

Sources:

• Ulbi TV - Basis for this project