This content originally appeared on DEV Community and was authored by Zaoui Amine
Try the live demo: 👉 Play Pixxame Now
In this tutorial, we’ll build a real-time pixel collaboration app where users can share a canvas, create collaborative pixel art, and chat — all powered by Taubyte’s WebSockets, serverless functions, and databases.
🧩 Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript + Tailwind CSS |
| Backend | Taubyte (Go serverless functions, databases, WebSockets) |
| Communication | Taubyte WebSockets + Pub/Sub channels |
| Local Dev | Dream (Taubyte’s local cloud) + AI coding (Cursor) |
🚀 Step 1: Set Up Local Cloud
Create a new local cloud with Dream:
dream new multiverse
Then open console.taubyte.com, log in, and select Dream/blackhole (default local project).
🧱 Step 2: Create Project
Create a new project (e.g., my-pixel-app) and optionally add a description.
➕ Step 2.1: Add Applications
Create two applications under your project:
| Name | Purpose |
|---|---|
frontend |
Hosts the React website |
backend |
Handles real-time logic |
💡 Make sure to create a global domain so both apps share the same origin.
🌐 Step 3: Configure Libraries & Websites
Frontend Website
-
Name:
your-project-frontend - Domain: your global domain
-
Path:
/
Backend Library
-
Name:
your-project-backend - Language: Go (empty template)
🧭 Step 4: Clone Repositories
Frontend
git clone <your-frontend-repo-url>
cd <your-frontend-repo-name>
Backend
git clone <your-backend-repo-url>
cd <your-backend-repo-name>
To help the AI assistants like "Cursor" clone the taubyte-guide folder in to your project folder
git clone https://github.com/taubyte/agents.doc taubyte-guide
the initial folder structure should look like :
pixxame/
├── taubyte-guide/
├── frontend/
│ ├── .taubyte/
│ └── src/
└── backend/
└── .taubyte/
💡 Step 5: Initialize Frontend
Set up the React + Tailwind project:
cd <your-frontend-repo-name>
npm create vite@latest . -- --template react-ts
npm install
npm install -D tailwindcss
npx tailwindcss init -p
Clean boilerplate CSS and configure Tailwind.
🧠 Step 6: Build the Interface (with AI)
Core Components:
- Navigation bar (logo + login)
- Pixel canvas for drawing
- Color toolbar (with PNG export)
- Chat panel (responsive)
AI-Generated Features:
- Real-time pixel sync
- Color selection + export
- Responsive chat UI
- Local username storage
🎨 AI Prompt Used in Cursor (Frontend)
This is the exact prompt used in Cursor to generate the Pixxame frontend.
It was guided by the .taubyte folder to ensure the AI followed Taubyte project standards.
cursor, add a .taubyte folder to the tb_website_pixxame_frontend
using the guide.
add a slate background and a simple navbar with no links.
remove the password field and add a logo.
add a canvas for our game where users can draw pixels to create a shared image.
add a toolbar above the canvas with color options and an export button.
add a chat panel on the right side that matches the combined height of the toolbar and canvas.
make the layout responsive:
– on smaller screens, turn the chat into a chat bubble.
– fix the toolbar CSS so it stays above the canvas, not under the navbar.
– make sure the navbar is not absolute.
💡 Tip: Copying the .taubyte guide folder into your project helps Cursor or Copilot understand how Taubyte projects work, ensuring cleaner AI-generated code and consistent folder structure.
⚙️ AI Prompt Used in Cursor (Backend)
This prompt was used to generate the Taubyte backend library, including HTTP endpoints and Pub/Sub functions.
in the tb_library backend, add the following HTTP endpoints:
– GET /api/canvas → fetch saved pixels from the "/canvas" database as JSON
– GET /api/getchannelurl → return the WebSocket URL for a given channel name
add two Pub/Sub functions:
– onPixelUpdate → listens to WebSocket events and stores pixel updates in the "/canvas" database
– onChatMessage → listens to chat messages and saves them in the "/chat" database and channel
🧠 Note: These prompts guided the AI to automatically generate Taubyte-compliant Go functions with database access and real-time WebSocket event handling.
🗃️ Step 7: Create Taubyte Databases & Channels
Databases
| Name | Purpose | Size |
|---|---|---|
canvas |
Stores pixel data | 10MB |
chat |
Stores chat messages | 10MB |
Pub/Sub Channels
| Channel | Purpose |
|---|---|
pixels |
Real-time drawing |
chat |
Real-time chat |
⚙️ Step 8: Implement Backend Logic
Endpoints to create:
| Method | Path | Description |
|---|---|---|
| GET | /api/canvas |
Get current pixel data |
| GET | /api/chat |
Get chat history |
| GET | /api/channel-url |
Get WebSocket URLs |
Add Pub/Sub functions:
-
onPixelUpdate→ syncs canvas data to DB -
onChatMessage→ stores chat messages
tb_library_pixxame_backend/
├── .taubyte/
├── canvas.go
├── chat.go
├── types.go
├── utils.go
├── go.mod
├── go.sum
└── README.md
🔗 Step 9: Connect Frontend to Backend
Integrate WebSockets:
- Client ↔ Taubyte WebSockets ↔ Backend
- Backend persists data in DB
- Use JSON for all exchanges
Open multiple tabs to test real-time collaboration.
☁️ Step 10: Deploy & Test
Commit and push changes:
git add .
git commit -m "Add real-time collaboration features"
git push
Trigger local builds:
dream inject push-specific --rid <frontend-id> --fn <frontend-name>
dream inject push-specific --rid <backend-id> --fn <backend-name>
🏁 What We Built
✅ Multi-user real-time pixel canvas
✅ Live chat system
✅ Export artwork as PNG
✅ Responsive UI
✅ Fully managed backend on Taubyte
💭 Key Takeaways
- AI coding + Taubyte = supercharged dev flow
- Infrastructure-free: focus on app logic, not setup
- Real-time collaboration is easy with Pub/Sub
- Dream accelerates local development
Resources
Ready to build your own real-time app?
Combine AI development with Taubyte’s infrastructure — complex multiplayer systems become simple.
This content originally appeared on DEV Community and was authored by Zaoui Amine
Zaoui Amine | Sciencx (2025-10-06T17:13:28+00:00) Vibe Coding a Real-Time Pixel Collaboration App 🎨. Retrieved from https://www.scien.cx/2025/10/06/vibe-coding-a-real-time-pixel-collaboration-app-%f0%9f%8e%a8-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.