Reddit's r/Place inspired canvas allowing real-time pixel placements at a one-minute interval. Hosted in collaboration with the school student council for Spirit Week featuring 120 students all creating art simultaneously.
- Scrollable and pannable camera
- Pixel placement live in real time across clients using Socket.io
- Pixels and cooldown stored server side in MongoDB database
- Pixel owner fetched and displayed on hover
- Google sign in restricted to school domain
- Google OAuth token verified on each request
expand.jsexpands the canvas in real time
Default view:
Hovering pixel, displaying user that placed it:
Signed in to non school domain:
Signed in:
Orange colour selected:
Placed orange pixel, on placement cooldown:
Clone the repo
git clone https://github.com/TheRedstoneRadiant/VLC-Board
cd VLC-BoardInstall dependencies
npm installCopy .env.example to .env
cp .env.example .env
nano .envEdit environment variables
MONGO_URI: Primary MongoDB database URI where pixels and users are storedMONGO_URI2: Secondary MongoDB database URI, stores pixel ownershipGOOGLE_SECRET: Google OAuth Secret (see Create Authorization Credentials)GOOGLE_CLIENT_ID: Google OAuth Client IDDATABASE: MongoDB database name, can be anything
Run database schema
npm run schemaStart server
npm run dev
