Best technology stack for creating a multiplayer whiteboard?
Sort of like FigJam or Google Jamboard, or even Miro.
I'm referring to those online whiteboards that allow multiple people to join.
I'd like to build one as a hobby project but other than websockets I'm not sure what sort of technologies those things use. Any ideas?
Trending on Indie Hackers
This article is a very interesting read by the Figma team https://www.figma.com/blog/how-figmas-multiplayer-technology-works/
Of course, they built it in house though but it may give you a sense of how to architect your app :)
Thank you, I did read that article but it is primarily related to how to design a multiplayer system rather than how the frontend UI is built. Are you aware of any articles outlining how the UI portion is built?
For an open source example of a canvas frontend, it's worth checking out https://github.com/tldraw/tldraw if you haven't already!
You can go simple and use Supabase for backend: https://supabase.com/docs/guides/realtime
Used it before for a simple real-time chat app and it's good. The tech is based on CRDT. There is a free plan as well.
Hm, I'm not sure. I definitely lean towards a SPA over a MPA. Typically the advice is that if the user experience is very "app like", dynamic, and interactive, which an online whiteboard would be, an SPA is preferred. On the other hand, if it is more content-focused like a blog or marketing site, an MPA is preferred.
You might need something more specialized than traditional frameworks like React, Vue or Angular though. I think it'd be wise to consult with people who have build similar apps in the past. Pay them if you have to. I forget where I heard this but I remember someone saying that paying experts to confirm that your approach is "directionally accurate" is almost always worthwhile. Like, if you're headed northwest and the correct direction to head is due east, you'd want to know that sooner rather than later.
If you want a Figma-like experience, consider using a scene-graph library that renders using WebGL, such as Three.js.
Use the CRDT pattern for multiplayer.
frontend: react/vue/etc + pixi.js or phaser
backend: any fw you're comfortable with
Don't manipulate youself svg's or canvas, just use pixi or phaser. They are specifically made for this kind of taks.
does pixi have event handler on the drawn features ?
say I draw a rectangle and I want to move it.
Of course, you can virtually do anything you can think of!
for the frontend, hardest in this project: React or vue, but you need to master the lifecycle and make sure you don't re-render if not needed.
You need to understand and native html/js SVG and Canvas. SVG is easier to start with and you can optimize with canvas later
For complex geometries interpolations you can use the Math stuff in d3 (but do not use the rendering from there).
the multi player part is not that hard, is like any live application, chat etc, it's basically items you receive from a server and render them.
Source: build visual stuff with 100k s geometries in the browser.
I can go in detail if you need.
Someone else mentioned using a library like pixi.js or phaser. It's my understanding those are more for games. Would you recommend using one of those libraries for the type of UI required for an online collaborative whiteboard?
I would not use one of those for sure. I would use d3.js or WebGL 2D, I would want to have full control
if you are interested we can have a 30 min call and will tell you all I know.
You might like CLOG as a technology stack. It’s mostly Common Lisp with a little JavaScript sprinkled here and there.
https://github.com/rabbibotton/clog
This sounds like an interesting project to work on. Would love to learn what goes into building something like this. How can I follow your journey if you plan to build it. Openly?
I had no plans to write about it. Why do you think that would be interesting?
I love to learn about system design. I imagine it would be powered by some really sophisticated logic and system-interaction on the backend.
https://github.com/yjs/yjs might help. Also keywords like CRDT etc.
I want to add it to my app but i have a ton of complexity (multiple pages, components, site settings etc)
WS seems like the easiest/less friction option to go for.
Yea, not too concerned about the WS part of it. Just not sure how the UI portion is built; surely something like that doesn't use frameworks like React.