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

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.

Based on the official Diploi react-vite component.

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.

Based on the official Diploi supabase component.

The component automatically configures redirect URLs so authentication flows correctly back to the React app.

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.

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

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