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，请按照此处的说明进行操作。

发展

在这里查找更多开发细节。

贡献

请随意贡献。欢迎提出问题和请求请求。

执照

麻省理工学院