This project uses websockets to create a live canvas that users can place pixels on to create art and interact with eachother.
The boardstate is stored as a two dimensional array inside a single mongoDB document. When users place tiles on the frontend, the document is updated with the x and y coordinates as well as the color placed. Simultaneously, a socket.io event is emmitted with this same data.
On the frontend, an html <canvas> element uses the .drawrect() function to render each item in the boardstate array as a pixel. Some simple Javascript and CSS code allows for scaling and panning the canvas.
Right now I'm working on contributing to Project Slippi
Slippi is a project based around Super Smash Brothers Melee. The people who created Project Slippi are so passionate about this 20 year old game that they created from scratch an app that lets you play people from around the world from your computer, with one of the best rollback netcode implementations in the fighting game community to date. The Slippi project also includes a number of other apps that let you broadcast your matches, or save and watch your own replays.
I'm working on a rewrite of the desktop app that improves replay viewing functionality as well as other refactoring. As someone who also loves Melee, it is awesome getting to help keep the game alive!