Pixorama is a multi-user pixel editor inspired by r/place. The app demonstrates the real-time capabilities of Serverpod. It is a complete example and you can try it out at https://pixorama.live.
For full Serverpod documentation, please visit https://docs.serverpod.dev.
On the server side there are three main files that makes Pixorama tick. Two serializable objects, found in the generated directory and the PixoramaEndpoint class. Those files are great starting points for understanding how Pixorama works.
The main Pixorama client/Flutter code can be found in Pixorama widget.
To run the server locally, you need to first install Serverpod. Check the docs on getting started.
Next, you need to setup the Docker container and Serverpod & Pixorama database tables:
cd pixorama_server
docker compose up --build --detach
Next, run migrations by typing:
dart bin/main.dart --role maintenanceFinally, start the server by typing:
dart bin/main.dartIn another window, go to pixorama_flutter and then type:
flutter run -d ChromeFlutter will open Chrome and start the Pixorama app.
Select a color from the pallete on the right side, then click on a location in the square to the left. The pixel color should change. Open several chrome tabs with the same url as that opened by the flutter debugger. Changing a pixel in one window should update all the other the images in the other browser windows, as shown below.
This project demonstrates how to use Serverpod to host a Flutter app. The deployment-aws.yml file in Github workflows contains the code that will build the web app in CI/CD. You will also need the build_web script and use the modifications in the server's server.dart file.
