Figma’s collaborative whiteboard platform. There are many features that FigJam offers, but we decided to focus on a few canvas/graphics tools and implemented them to work in a multi-user experience. FigJam has become an essential tool for real-time brainstorming, visualizing, and collaborating (especially in developing this project), so we thought it would be a fun challenge to recreate! Our remake is called JigJam. It is a multi-user whiteboard where users can collaboratively add, delete, and modify graphics on a canvas in real-time. When first opening JigJam, users are prompted to enter their name. Users then advance to the home screen with options for different “rooms” or canvases to edit (work in progress currently; only one room is available). Once selecting a room, users will advance to the multi-user canvas.
jigjam_demo.mov
The application will store the layers created on the canvas - allowing for restoring the current state of the global canvas
- Layers contain all attributes needed to render onto clients' canvases
- uniqueID: generated uuid ->
String - layerAttributes: all layer properties needed for rendering ->
String - author: who created the layer ->
String - ...
- uniqueID: generated uuid ->
- Each layer in the database should be dynamically deleted/added depending on client interaction
An Example Layer:
{
"uniqueID": "1713795863261",
"graphicType": "line",
"layerAttributes": {
"col": 6,
"x1": 373,
"y1": 609,
"x2": 579.5,
"y2": 501,
"wt": 6
},
"author": "newuser298",
"createdAt": "2024-04-22T14:24:23.340Z",
"updatedAt": "2024-04-25T04:51:15.967Z",
"__v": 0
}An Example User:
{
"username": "ethan",
"color": "testing red",
"__v": 0
}/home
/home (once user submits name)
/home (once user enters a canvas)
- as a user, I can enter a display name for myself
- as a user, I can choose from one of three global canvases
- as a user, I can see all previously created designs, ideas, and creativity from all users that preceeded me
- as a user, I can freely express my own designs and ideas on the canvas using the tools at my disposal (lines, shapes, sticky notes, stickers, text)
- as a user, I can edit all layers on the canvas (resizing, editing the color, changing the thickness, etc.)
- as a user, I can see all other live users in the canvas creating and moving in real-time
- as a user, I can change the music that is playing
- as a user, I can save the current state of the canvas via a .png export
-
(6 points) Use of client-side JavaScript library: p5.js
- p5.js is a JS client-side frontend library used for creating graphic and interactive tools and experiences
- Artists and Design-heavy programmers choose p5.js as a common library to create randomly-generated art, interactive experiences, and quick components to render graphics
-
(4 points) Load Balancing & Performance Optimizations (server-side JS library)
- Sending over constant data of deleting, adding, and editing layers across multiple users can eventually overload the server
- To mitigate this, using Socket.io's Node.js clusters can help with performance issues when many users are connected
- Also known as sticky load balancing as per Socket.IO docs
- Performance Tuning
10 points total out of 10 required points
- p5.js docs - sketch.js: used for custom graphic/layer tools + canvas
jigjam_api_demo.mp4
api/layers/create- This third AJAX form is used to save the current state of the canvas for new and returning users to see when they join JigJam (essentially picking up where you left off: save state).
- With each line that is created by any user, the layer data is sent to the server where it is then stored in the
Layercollection in our MongoDB database. Where such data can be retrieved on-load of new users and manipulated (delete, edit, etc.) - Layer data can be retrieved here
- The post has only been implemented for new lines. However, the movements of the lines have also been implemented. The other tools are to come soon!
- The demo shows two separate users where, upon joining a canvas, all previously created layers are rendered
- The rightmost page is showing the layer data retrieved and updated to the database: https://jigjam.live/api/layers
milestone_3.mp4
Use of client-side JavaScript library: p5.js
(Used heavily here but is not limited to most other p5.js components in the repo) p5.js's library has been used heavily throughout the project thus far. The continued exploration and implementation of its frontend components have helped create almost 100% of all the front-end of JigJam. It has been a journey navigating how to connect the nuances and quirks of Socket.io's behavior within the client-side library. The flow of creating a new front-end component and moving such data to our database to be retrieved and modified by users is complete and will be easily transferrable between the rest of the tools (only lines are available in the current working state)!
When looking at ways to optimize the websocket server's performance, I came across a replacement module, eiows. However, after installing and deploying to my server, I realized that such implementations are either deprecated or not supported as much as socket.io's default, ws. Other ways I am planning to optimize the server is through performance tuning, where I can install ws native add-ons such as bufferutil and utf-8-validate. Though not necessary, if for some reason JigJam reaches a substantial amount of live users at a given time, using sticky load balancing would be advantageous, which can be implemented in the next iteration.
jigjam_live_users.mp4
song_sync_jigjam.mp4
Current song playing API can be accessed here
(6 points) Use of client-side JavaScript library: p5.js
(Used heavily here but is not limited to most other p5.js components in the repo) p5.js's library has been used heavily throughout the project thus far. The continued exploration and implementation of its frontend components have helped create almost 100% of all the front-end of JigJam. It has been a journey navigating how to connect the nuances and quirks of Socket.io's behavior within the client-side library. The flow of creating a new front-end component and moving such data to our database to be retrieved and modified by users is complete and will be easily transferrable between the rest of the tools (only lines are available in the current working state)!
(4 points) Load Balancing & Performance Optimizations (server-side JS library): utilized libraries
When looking at ways to optimize the websocket server's performance, I came across a replacement module, eiows. However, after installing and deploying to my server, I realized that such implementations are either deprecated or not supported as much as socket.io's default, ws. I've optimized the server using ws native performance tuning add-ons such as bufferutil and utf-8-validate. Though not necessary, if for some reason JigJam reaches a substantial amount of live users at a given time (10,000+), using sticky load balancing would be advantageous, though, after thorough research, this would require a complete refactor of the current server.
- Migrate hosting to AWS, Google Cloud, or Heroku (and publish to JigJam's official domain)
- Save state for all tools (only line implemented - weights)
- Multi-Canvas experience
- Google-authentication login for users
- # of users in canvas and who
- Live cursor tracking
- Storing the current state of canvases for new users
- More tools!
- Commenting
- And so much more!!
npm install(only do once globally)npx nodemon server.js- Navigate to
localhost:3000