sveltekit supabase dashboard

Dasbor Supabase SvelteKit (BETA)

---

Dashboard sederhana yang terinspirasi dari Supabase UI dibuat dengan SvelteKit sebagai frontend dan Supabase sebagai backend.

PENOLAKAN: Proyek ini belum siap produksi. Akses berbasis peran belum sepenuhnya diuji. Gunakan dengan risiko Anda sendiri.

Demo

Coba peran dan tampilan akses yang berbeda di sini.

Fitur

• UI yang terinspirasi Supabase
• Multi organisasi
• Akses berbasis peran
• Pembuatan dan penghapusan pengguna di UI dasbor
• Tampilan demo Tabel & Bagan
• Mode demo (tampilkan petunjuk dan nonaktifkan pembaruan basis data)

Teknologi

• Svelte dan SvelteKit sebagai kerangka aplikasi
• Supabase sebagai database dan backend
• TailwindCSS sebagai kerangka CSS
• DaisyUI sebagai pustaka komponen Tailwind CSS
• Supabase Auth Helpers sebagai utilitas Auth untuk bekerja dengan Supabase
• Klaim khusus Supabase untuk akses berbasis peran dan multi organisasi
• Charts.js dan svelte-chartjs untuk grafik
• Ikon Bulu dan ikon bulu langsing untuk ikon
• svelte-loading-spinner untuk memuat spinner
• Vercel sebagai platform penerapan

TODO

• Memperbaiki dokumen pengembangan
• Perbaiki masalah TypeScript
• Tambahkan lebih banyak tampilan bagan
• Perbarui supabase-js v2
• Profil pengguna
• Mode Terang/Gelap
• Tingkatkan navigasi seluler
• PWA

Instalasi

Siapkan Supabase

Buat proyek baru di supabase.com dan buka Pengaturan->API untuk memeriksa URL proyek dan kunci API Anda

Kloning reponya

git clone https://github.com/xulioc/sveltekit-supabase-dashboard.git
cd sveltekit-supabase-dashboard

Siapkan variabel lingkungan

Buat file .env baru

cp .env.example .env

Edit file .env Anda agar sesuai dengan URL proyek dan kunci API Anda

 # SUPABASE
PUBLIC_SUPABASE_URL= " YOUR PROJECT URL "
PUBLIC_SUPABASE_ANON_KEY= " YOUR PROJECT ANON KEY "
PRIVATE_SUPABASE_SERVICE_KEY= " YOUR PROJECT SERVICE KEY "

Inisialisasi basis data

Jalankan sql/init_databse.sql dan sql/init_demo_data.sql di Supabase SQL Editor.

Instal & jalankan

npm install

Untuk memulai dalam mode pengembangan:

npm run dev

Untuk membangun dan memulai dalam mode produksi:

npm run build
npm run preview

Menyebarkan

Untuk menerapkan ke Vercel, ikuti petunjuk di sini.

Perkembangan

Temukan detail pengembangan lebih lanjut di sini.

Menyumbang

Jangan ragu untuk berkontribusi. Masalah dan Permintaan Tarik dipersilakan.

Lisensi

MIT