https://github.com/costingh/collaborative-whiteboard

This is a collaborative whiteboard that allows real-time communication through sockets. It was built using Next.js and Spring Boot. Users can share a room and draw on canvas which will be updated on every user's screen.
https://github.com/costingh/collaborative-whiteboard

canvas docker draw drawing java mongodb mongodb-database nextjs react real-time-collaboration realtime scpringboot sockjs stomp stomp-client vercel websockets

Last synced: 13 days ago
JSON representation

This is a collaborative whiteboard that allows real-time communication through sockets. It was built using Next.js and Spring Boot. Users can share a room and draw on canvas which will be updated on every user's screen.

• Host: GitHub
• URL: https://github.com/costingh/collaborative-whiteboard
• Owner: costingh
• Created: 2021-08-28T05:58:45.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-01T06:47:59.000Z (about 3 years ago)
• Last Synced: 2023-09-27T07:59:19.504Z (about 1 year ago)
• Topics: canvas, docker, draw, drawing, java, mongodb, mongodb-database, nextjs, react, real-time-collaboration, realtime, scpringboot, sockjs, stomp, stomp-client, vercel, websockets
• Language: JavaScript
• Homepage: https://collaborative-whiteboard.vercel.app/
• Size: 678 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Collaborative Whiteboard

Live Demo: https://collaborative-whiteboard.vercel.app/ 

This is a collaborative whiteboard that allows real-time communication through sockets. It was built using Next.js, Spring Boot and MongoDB. Users can share a room and draw on canvas which will be updated on every participant's screen. 

# Demo

![Demo Image](https://github.com/costingh/collaborative-whiteboard/blob/master/demo.png?raw=true)

# Functionality

When the app is launched, the user must create a room or join an existent one. 

If the user chooses to create a room, a username and a room name is required. Else, to join a room a username and the room ID are required.

* Once the room is created, it will be stored in MongoDB Database.

* Other users can join this room if they know its ID

* Every time a user joins or leaves a room, the message will be broadcasted to all users in that specific room through sockets.

* Each user in a room can draw on canvas, change the width of pencil, erase drawings, save the canvas or import other.

* Each drawing is stored in Database. Drawings are broadcasted as json object which holds coordinates of drawing, color, lineWidth, and the ID of the user who draw it.