Collaborative Drawing App
The Collaborative Drawing App is a fun, collaborative pixel art application built with Refine and Supabase. Use this starter kit when you want a ready-to-run creative application that demonstrates realtime collaboration, authentication, and CRUD operations, or as a foundation for building your own realtime collaborative tool.
Launch
Section titled “Launch”Launch Collaborative Drawing App on Diploi to create a new project from this starter kit. Like any Diploi project, it can be extended with more components and add-ons through its diploi.yaml file.
Tech stack
Section titled “Tech stack”| Technology | Role |
|---|---|
| Refine | React-based CRUD framework, on React + Vite |
| Supabase | Backend (database, auth, realtime) |
| TypeScript | Language |
Readme
Section titled “Readme”A fun, collaborative drawing app built with Refine, React (Vite) and Supabase.
This starter kit demonstrates:
- 🔐 Authentication with Supabase
- 🎨 Realtime collaborative updates
- ⚡️ Vite-powered React frontend
- 🗄️ Supabase DB migrations and seeded data
✨ Overview
Section titled “✨ Overview”This starter kit consists of two Diploi components:
react-vite– Frontend application (Refine + React + Vite)supabase– Database, auth, and realtime backend
Everything is wired together automatically via environment variables
defined in diploi.yaml.
🧱 Architecture
Section titled “🧱 Architecture”1️⃣ React (Vite) Component
Section titled “1️⃣ React (Vite) Component”Based on the official Diploi react-vite component.
Environment Variables
Section titled “Environment Variables”These are automatically injected from the Supabase component:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
This starter kit enables Diploi’s runtime build mode:
- name: __VITE_RUNTIME_BUILD value: trueThis allows environment variables to be populated correctly in production deployments.
2️⃣ Supabase Component
Section titled “2️⃣ Supabase Component”Based on the official Diploi supabase component.
The component automatically configures redirect URLs so authentication flows correctly back to the React app.
🔑 Default Login Credentials
Section titled “🔑 Default Login Credentials”The database is seeded with a test account:
Email: test@example.com
Password: password
You can log in immediately after deployment.
⚠️ Make sure to change or remove this account in production environments.
🚀 Running on Diploi
Section titled “🚀 Running on Diploi”Start a new project
Section titled “Start a new project”- Create a new project in Diploi
- Select this starter kit
- Deploy
Diploi automatically:
- Connects Supabase to React
- Injects environment variables
- Configures networking
- Builds production images
- Enables edge delivery via Cloudflare
💡 About Refine
Section titled “💡 About Refine”This project is originally based on the Refine example template Pixels and adapted for Diploi deployments.
Refine is a headless React framework for building CRUD applications:
https://refine.dev