Blurple Canvas Web

🥪 Tech stack & repo structure

This is a monorepo, with three packages:

• @blurple-canvas-web/backend: The Node–Express back-end server
• @blurple-canvas-web/frontend: The Next.js front-end
• @blurple-canvas-web/types: Where TypeScript types shared by the front- and back-end live

Worth noting:

• this web app succeeds the now-deprecated Blurple Canvas Discord bot;
• backend talks to the same PostgreSQL as the old bot;
• Prisma serves as the ORM layer.
• With the odd exception, frontend makes queries to the backend API with TanStack Query.
• Realtime canvas updates are pushed to clients with Socket.IO. Primarily, this is for streaming pixels to everyone as they get placed.
• We make a bit of an effort to do right by the Web Accessibility Content Guidelines.¹

🌱 Getting started

☑️ Prerequisites

[!WARNING] Windows users, these instructions assume you use WSL. You’re welcome to use PowerShell—things still work—but you’ll have to “translate” these steps for yourself.

nvm & Node.js. Node Version Manger optional but recommended. Just make sure your Node version matches /.nvmrc.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash  # …or… `brew install nvm`
nvm --version   # Shouldn’t error
nvm install
node --version  # Should match .nvmrc

Corepack & pnpm. Corepack optional but recommended. If you’d prefer installing pnpm some other way, go ahead.

npm install --global corepack  # or `brew install corepack`
corepack enable pnpm
corepack --version             # Shouldn’t error
pnpm --version                 # Should match package.json → engines

PostgreSQL 17+. 👉 postgresql.org/download

🧱 Install dependencies

pnpm install

🤫 Secrets & environment variables

The backend and frontend packages need to have some environment variables set work correctly (in /packages/backend/.env and /packages/frontend/.env, respectively). Consult the .env.example files in each of those packages to see what variables are needed, and contact one of the maintainers if you need any secrets.

💽 Database

Create a database (for example, canvas); and set DATABASE_URL in packages/backend/.env to point to it.

With the database server running:

pnpm install
# Build backend once, so generated scripts can import the built client
pnpm -F backend run build
# Set up database
pnpm run prisma:migrate && pnpm run prisma:seed

🚀 Build & deploy

From repo root:

pnpm run dev                      # with hot reloading…
pnpm run build && pnpm run start  # …or without

If you want to run the front- and back-ends in different terminals:

pnpm -F backend run dev
pnpm -F frontend run dev

🤓 Maintainers

Availabilities and contributions ebb and flow but, at the moment, these are probably the most reasonable people to contact if you need to get in touch with a core contributor: @rocked03, @jaskfla, @stijnvdkolk.

🦒 The OG team

Blurple Canvas Web started as a SOFTENG 750 project at Waipapa Taumata Rau.²

• Aaron Guo
• Emily Zou
• Henry Wang
• Jasper Lai
• Josh Jeffers
• Samuel Ou

💌 Acknowledgements

Blurple Canvas Web wouldn’t exist without these lovely people and projects. Thanks to:

• Project Blurpleand the Project Blurple community, which Blurple Canvas was spun out of;
• Rocked03 for creating the Blurple Canvas Discord bot;³
• the Place Atlas Initiative for their efforts cataloguing r/Place;
• Josh Wardle and r/Place participants (no introduction needed); and
• you, for your interest in this project!

Footnotes

1. Plenty of room to improve, we realise. ↩

2. Dig back far enough in the commit history, and you’ll find that we once had the team name Golden Giraffes. Not sure we would’ve chosen this name for ourselves, though… ↩

3. Pretty sure Samuel isn’t happy about me putting him on this list. Tough cookies. —Jasper ↩