I just finished a proof of concept web app that emulates the same concept introduced by reddit place app: a shared pixel board.
Front-End: Flutter
Back-End: FastAPI, Uvicorn, SQLite, Pillow
Here you can try the beta
App Usage: Zoom In and Out the view, touch a pixel to bring up a color palette, select a color and voila, pixel's color has been changed!
Color palette menu only works if zoomed in more than 50% of the image
Front End design is a two layer view, background layer is loaded with a PNG of the pixel board, new changes are drawn over in the forebackground using canvas
This decision was to optimize bandwidth consumption,the grid is 1000x1000, that gives us 1 million pixels, sending the current grid as a PNG file weight 1.9mbs, which is better than sending a gzip json that weights 4.4mbs for coordinates and colors.
Also, flutter app design has to be imperative, that means, the view is going to be refreshed many times per second, if device screen can run 60fps, the view is going to be refresed 60 times.
Rendering the whole view painting 1 million pixels on canvas takes about 2 to 4 seconds, rekt, but loading a png is really fast.
I also implemented websockets so users can see live changes
webserver refreshes PNG file every 2 minutes.
Im open to suggestions, i will upload the code once a do some cleaning and do proper documentation.
