Collaborative Drawing App Starter Kit for Diploi

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

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

1️⃣ React (Vite) Component

Based on the official Diploi react-vite component.

Environment Variables

These are automatically injected from the Supabase component:

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY

This starter kit enables Diploi's runtime build mode:

- name: __VITE_RUNTIME_BUILD
  value: true

This allows environment variables to be populated correctly in production deployments.

---

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

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

Start a new project

1. Create a new project in Diploi
2. Select this starter kit
3. Deploy

Diploi automatically:

• Connects Supabase to React
• Injects environment variables
• Configures networking
• Builds production images
• Enables edge delivery via Cloudflare

---

💡 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