sveltekit-supabase-dashboard - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #go #android #machine-learning #linux #docker #nodejs #vue #pytorch #ios #mcp #openai

sveltekit-supabase-dashboard

(★ 146)

Dashboard inspired by Supabase UI and made with SvelteKit as frontend and Supabase as backend.

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- create_user.png
- dashboard.png
- organizations.png
- users.png
- init_database.sql
- init_demo_data.sql
- - stores.ts
  - utils.ts
- - +layout.server.ts
  - +layout.svelte
  - +layout.ts
  - +page.svelte
- app.d.ts
- app.html
- app.postcss
- hooks.client.js
- hooks.server.ts
- index.test.ts
- favicon.png
- img
- supabase.png
- supabase.webp
- supabase_white.svg
- svelte.png
- sveltekit.svg
- test.ts
.env.example
.eslintignore
.eslintrc.cjs
.gitignore
.npmrc
.prettierignore
.prettierrc
LICENSE
package-lock.json
package.json
playwright.config.ts
pnpm-lock.yaml
postcss.config.cjs
README.md
README_DEV.md
svelte.config.js
tailwind.config.cjs
tsconfig.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd sveltekit-supabase-dashboard

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev

개발/실행 서버를 켭니다.

npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run preview

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SvelteKit Supabase Dashboard (BETA)

![alt text](https://raw.githubusercontent.com/xulioc/sveltekit-supabase-dashboard/main/img/dashboard.png)

---

## Simple dashboard inspired by Supabase UI made with [SvelteKit](https://kit.svelte.dev/) as frontend and [Supabase](https://supabase.com/) as backend.

<h3>
<span style="color:red">
DISCLAIMER: This project is not production ready. Role based access is not fully tested. Use at your own risk.
</h3>
</span>

## Demo

Try different access roles and views [here](https://sveltekit-supabase-dashboard.vercel.app/).

## Features

- Supabase inspired UI
- Multi organization
- Role based access
- User creation and deletion in dashboard UI
- Tables & Charts demo views
- Demo mode (show hints and disable database updates)

## Technologies

- [Svelte](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/) as application framework
- [Supabase](https://supabase.com/) as database and backend
- [TailwindCSS](https://tailwindcss.com/) as CSS framework
- [DaisyUI](https://daisyui.com/) as Tailwind CSS component library
- [Supabase Auth Helpers](https://github.com/supabase/auth-helpers) as Auth utilities for working with Supabase
- [Supabase custom claims](https://github.com/supabase-community/supabase-custom-claims) for multi organization and role based access
- [Charts.js](https://www.chartjs.org/) and [svelte-chartjs](https://www.npmjs.com/package/svelte-chartjs) for charts
- [Feather Icons](https://feathericons.com/) and [svelte-feather-icons](https://www.npmjs.com/package/svelte-feather-icons) for icons
- [svelte-loading-spinners](https://www.npmjs.com/package/svelte-loading-spinners) for loading spinners
- [Vercel](https://vercel.com/) as deployment platform

## TODO

- Improve development docs
- Fix TypeScript issues
- Add more chart views
- ~~Update supabase-js v2~~
- ~~User profiles~~
- ~~Light/Dark mode~~
- Improve mobile navigation
- PWA

## Installation

### Setup Supabase

Create new project at [supabase.com](https://supabase.com/) and go to Settings->API to check your project URL and API keys

### Clone the repo

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

### Setup environment variables

Create a new `.env` file

```bash
cp .env.example .env
```

Edit your `.env` file to match your project URL and API keys

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

### Initialize database

Execute `sql/init_databse.sql` and `sql/init_demo_data.sql` in Supabase SQL Editor.

### Install & run

```bash
npm install
```

To start in development mode:

```bash
npm run dev
```

To build and start in production mode:

```bash
npm run build
npm run preview
```

### Deploy

To deploy to Vercel please follow instructions [here](https://vercel.com/guides/deploying-svelte-with-vercel).

## Development

Find more development details [here](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/README_DEV.md).

## Contribute

Feel free to contribute. Issues and Pull Requests are welcome.

## License

[MIT](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/LICENSE)