m0rp43us / pixorama

Collaborative pixel drawing demo app.

Pixorama

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.

Server code

On the server side there are three main files that makes Pixorama tick. Two serializable objects, found in the protocol directory and the PixoramaEndpoint class. Those files are great starting points for understanding how Pixorama works.

Client code

The main Pixorama client/Flutter code can be found in Pixorama widget.

Running the server

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
serverpod generate
docker compose up --build --detach
docker compose exec -T postgres env PGPASSWORD="PASSWORD" psql -h postgres -U postgres -d pixorama < generated/tables-serverpod.pgsql
docker compose exec -T postgres env PGPASSWORD="PASSWORD" psql -h postgres -U postgres -d pixorama < generated/tables.pgsql

The first docker compose exec commands should return numerous sql verifications like:

CREATE TABLE
ALTER TABLE
CREATE INDEX
CREATE TABLE
ALTER TABLE
CREATE INDEX
CREATE INDEX
...
.
.
CREATE INDEX
ALTER TABLE

The second docker compose exec commands should return two sql verifications like:

CREATE TABLE
ALTER TABLE

This version of Pixorama runs the serverpod locally from the vendor directory, and postgres and redis are run within Docker containers.

cd vendor
git clone https://github.com/serverpod/serverpod.git
cd ..

Next, fetch packages for serverpod.

dart pub get

Finally, start the server by typing:

dart bin/main.dart

In another window, go to pixorama_flutter and modify the lib/main.dart file to use the local server url instead of the live app server. Then type:

flutter run

The debugger will open chrome and the server will return the following screen.

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.

Hosting the Flutter app with Serverpod

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.