sveltekit supabase dashboard

SvelteKit Supabase 儀表板（測試版）

---

受 Supabase UI 啟發的簡單儀表板，使用 SvelteKit 作為前端，Supabase 作為後端。

免責聲明：該項目尚未準備好投入生產。基於角色的訪問尚未經過充分測試。使用風險自負。

示範

在這裡嘗試不同的存取角色和視圖。

特徵

• Supabase 啟發的 UI
• 多組織
• 基於角色的訪問
• 儀表板 UI 中的使用者建立和刪除
• 表格和圖表演示視圖
• 演示模式（顯示提示並停用資料庫更新）

科技

• Svelte 和 SvelteKit 作為應用程式框架
• Supabase 作為資料庫和後端
• TailwindCSS 作為 CSS 框架
• DaisyUI 作為 Tailwind CSS 元件庫
• Supabase Auth Helpers 作為與 Supabase 一起使用的 Auth 實用程序
• Supabase 自訂聲明用於多組織和基於角色的訪問
• Charts.js 和 svelte-chartjs 用於圖表
• 羽毛圖示和圖示的 svelte-feather-icons
• svelte-loading-spinners 用於載入旋轉器
• Vercel 作為部署平台

待辦事項

• 改進開發文檔
• 修復 TypeScript 問題
• 新增更多圖表視圖
• 更新supabase-js v2
• 使用者資料
• 明/暗模式
• 改進移動導航
• 漸進式網頁應用

安裝

設定 Supabase

在supabase.com建立新專案並進入Settings->API檢查您的專案URL和API金鑰

克隆儲存庫

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

設定環境變數

建立一個新的.env文件

cp .env.example .env

編輯您的.env檔案以符合您的專案 URL 和 API 金鑰

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

初始化資料庫

在 Supabase SQL 編輯器中執行sql/init_databse.sql和sql/init_demo_data.sql 。

安裝並運行

npm install

若要以開發模式啟動：

npm run dev

要在生產模式下建置並啟動：

npm run build
npm run preview

部署

若要部署到 Vercel，請按照此處的說明進行操作。

發展

在這裡查找更多開發細節。

貢獻

請隨意貢獻。歡迎提出問題和請求請求。

執照

麻省理工學院