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.